.wrap {
    position: relative;
    background: #fff;
    padding-top: 4vh;
    z-index: 998
}

.wrap #wrapBox >div {
    position: relative
}

.wrap #wrapBox .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 50% / auto;
    top: 0;
    left: 0;
    opacity: .4;
}

/*aboutBox*/
#aboutBox {
    overflow: hidden;
}

#aboutBox .imgs {
    position: absolute;
    width: 50vw;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

#aboutBox .imgs .list {
    height: 40vw;
    background: no-repeat 50% / contain;
}

#aboutBox .info {
    position: relative;
    padding: 70px 0 70px 55vw;
    width: 650px;
    z-index: 3
}

#aboutBox .info .bgTxt {
    text-align: left
}

#aboutBox .info .stitle {
    position: relative;
    margin-bottom: 25px;
    padding: 0px 0 15px;
    font-size: 18px;
    color: #6D6D6D
}

#aboutBox .info .stitle:after {
    position: absolute;
    top: 33%;
    width: 70px;
    height: 1px;
    display: inline-block;
    background: #CCC;
    content: ""
}

#aboutBox .info article {
    line-height: 200%;
    color: #6D6D6D
}

#aboutBox #SeoStarRating {
    margin: 15px 0 30px;
    text-align: right
}

#aboutBox p.more {
    text-align: left
}

/*productBox*/
#productBox .workframe {
    position: relative;
    width: 100%;
    padding: 60px 0;
}

#productBox .proList {
    padding: 0 0 1vw
}

#productBox .proList li {
    position: relative;
    padding: 0;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

#productBox .proList li.slick-slide {
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    z-index: -1;
    margin: 0 -30px;
    opacity: 0.5
}

#productBox .proList li.slick-center {
    z-index: 1;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1
}

#productBox .proList .item {
    margin: 30px auto;
    position: relative;
    width: 100%;
    max-width: 1180px;
    -webkit-box-shadow: 0px 5px 30px -5px rgb(0 0 0 / 19%);
    box-shadow: 0px 5px 30px -5px rgb(0 0 0 / 19%)
}

#productBox .proList .item .Img,#productBox .proList .item .Img a,#productBox .proList .item {
    position: relative;
    border-radius: 5% 5% 5% 5%;
    height: 350px;
}

#productBox .proList .item .Img a.photo:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 0.2);
    content: ""
}

#productBox .proList li.slick-slide .Img a.photo:after {
    background-color: #00000080
}

#productBox .proList li.slick-slide .Img a {
    filter: blur(2px)
}

#productBox .proList li.slick-center .Img a {
    filter: blur(0px)
}

#productBox .proList li.slick-center .Img a.photo:after {
    background-color: rgb(0 0 0 / 0.2)
}

#productBox .proList .item .info {
    position: absolute;
    bottom: 35px;
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center
}

#productBox .proList .item .info h3 {
    text-align: center;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0px 0px 10px rgb(0 0 0 / 12%);
    -webkit-line-clamp: 1;
    border-bottom: #f7f7f7b8 1px solid;
    margin-bottom: 10px
}

#productBox .proList .item .info article p {
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 0 10px rgb(0 0 0 / 0.3);
    -webkit-line-clamp: 2
}

#productBox .proList .item .info article {
    width: 90%;
    margin: 0 auto
}

/* contactBox */
#contactBox{background: #9b0b0a;padding: 60px 0;}
#contactBox .container .row{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#contactBox .container .row .col-md-8 p{color:#fff;}
#contactBox .container .row .col-md-8 h2{color:#fff;font-size: 35px;font-weight: 400;}
#contactBox p.more{padding:0;}
#contactBox p.more a {padding: 12px 50px;border: 0;transition: 1.2s ease 1.8s;transform: translateY(0%);background: #f8d581;color: #fff;}
#contactBox p.more a:before {background: rgb(255 255 255 / 15%);}
#contactBox p.more a font {color: #000;padding-bottom: 5px;z-index: 2;font-size: 20px;font-weight: 500;}
#contactBox p.more a:hover:before { transform: translateY(0); }


/*bookBox*/
#bookBox {
    font-size: 0
}
#bookBox .row {
    position: relative;
    width: 100%
}
#bookBox #BookList {
    padding-bottom: 7vh
}
#bookBox #BookList ul li {
    position: relative;
    width: 100%;
    max-width: 1180px;
    -webkit-box-shadow: 0px 5px 30px -5px rgba(0,0,0,0.3);
    box-shadow: 0px 5px 30px -5px rgba(0,0,0,0.3)
}
#bookBox #BookList ul li.slick-slide {
    position: relative;
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    z-index: -1;
    margin: 0 -70px;
    filter: blur(3px)
}
#bookBox #BookList ul li.slick-slide:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(215 162 151 / 78%);
    content: ""
}
#bookBox #BookList ul li.slick-center {
    z-index: 1;
    -webkit-transform: scaleY(0.9);
    -ms-transform: scaleY(0.9);
    transform: scaleY(0.9);
    filter: none
}
#bookBox #BookList ul li.slick-center:after {
    display: none
}
#bookBox #BookList ul li h3 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 35px
}
#bookBox #BookList ul li h3 a {
    height: 70px;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgb(0 0 0 / 50%);
    text-align: center;
    -webkit-line-clamp: 1
}

#bookBox #customBox {
    background: url(/images/42/flower-bg.jpg) no-repeat 50% / cover
}

#bookBox #customBox ul {
    margin-bottom: 0
}

#bookBox #customBox .custom {
    position: relative;
    height: 80vh;
    font-size: 0
}

#bookBox #customBox .imgs {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 48vw;
    z-index: 1
}

#bookBox #customBox .imgs .list {
    height: 100vh;
    background: no-repeat 50% / cover
}

#bookBox #customBox .info {
    display: inline-block;
    width: 25vw;
    vertical-align: top;
    padding: 5vw 13vw 0;
    float: left;
    z-index: 3
}

#bookBox #customBox .info h3 {
    position: relative;
    font-size: 40px;
    color: #D7A297;
    text-align: center
}

#bookBox #customBox .info h3:after {
    position: absolute;
    bottom: -11px;
    left: calc((100% - 80px) / 2);
    width: 80px;
    height: 1px;
    background: #D7A297;
    content: ""
}

#bookBox #customBox .info article {
    color: #6D6D6D;
    margin: 55px 0
}

#bookBox #customBox .slick-dots {
    position: absolute;
    bottom: 4vh;
    left: -25%
}

#bookBox #customBox .slick-dots li button:before {
    color: #d49e93;
    font-size: 10px;
    opacity: .25
}

#bookBox #customBox .slick-dots li.slick-active button:before {
    color: #d7a297;
    opacity: .75
}

/*photo_area*/
#photo_area{
    padding: 20px 0 60px;
    background-image: url(/images/42/img-ad-bg.jpg);
    repeat;
    background-position: 50% 20%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#photo_area .title_box:before {
    content: url(/images/44/img-c-leaf.png);
    position: absolute;
    left: 38%;
    bottom: 60px;
    animation-name: leaf2;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 2s
}

#photo_area .title_box:after {
    content: url(/images/44/img-c-leaf-r.png);
    position: absolute;
    right: 38%;
    bottom: 60px;
    animation-name: leaf2;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 2s
}

@keyframes leaf2 {
    0% {
        bottom: 60px
    }

    100% {
        bottom: 40px
    }
}

#photo_area .fivebox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    align-items: flex-start;
}

#photo_area .item {
    width: calc((100%/5) - 40px);
    position: relative;
    padding-bottom: 20px;
    margin: 0 20px;
}

#photo_area .item:hover:before {
    content: url(/images/44/img-br-leaf.png);
    position: absolute;
    bottom: -50px;
    right: -30px;
    z-index: -2;
    animation-name: leaf;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 2s
}

#photo_area .item:hover:after {
    content: '';
    width: 100%;
    height: 70%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--white);
    z-index: -1;
    border-radius: 0 0 75px 0
}

#photo_area .item .photo {
    width: 265px;
    height: 265px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 30px
}
#photo_area .item .photo img{
    width: 50%;
    height: 50%;
}

#photo_area .item:hover h3 {
    color: #9b0b0a;
}
#photo_area .item:hover .photo {
    background: #9b0b0a;
}

#photo_area .item:hover .photo img {
    -webkit-filter: contrast(0) brightness(150%);
    filter: contrast(0) brightness(200%)
}

#photo_area .item h3 {
    font-size: 26px;
    letter-spacing: 2px;
    text-align: center;
    color: #2e2e2d;
    margin-bottom: 10px;
    font-weight: 500;
}
#photo_area .item p{font-weight: 400;}

@media screen and (max-width: 1680px){
	#photo_area .item .photo{width: 225px;height: 225px;}
}

@media screen and (max-width: 1440px){
	#photo_area .title_box:before{left:35%;}
	#photo_area .title_box:after{right:35%;}
	#photo_area .fivebox{width:90%;}
	#photo_area .item .photo{width: 215px;height: 215px;}
}

@media screen and (max-width: 1366px){
	#photo_area .item .photo{width: 200px;height: 200px;}
}

@media screen and (max-width: 1280px) {
    #aboutBox .imgs,#bookBox .row {
        position:relative;
        width: 100%;
        display: inline-block
    }

    #aboutBox .info {
        padding: 70px 15%;
        width: 70%;
        background: rgb(249 249 249)
    }

    #aboutBox p.more {
        text-align: center
    }
    #photo_area .item .photo{width: 180px;height: 180px;}
}

@media screen and (max-width: 1024px){
	#photo_area .item .photo{width: 265px;height: 265px;}
	#photo_area .title_box:before{left: 29%;}
	#photo_area .title_box:after{right: 29%;}
	#photo_area .item{width: calc((100%/3) - 40px);margin: 20px;}
}

@media screen and (max-width: 980px) {
    #aboutBox .info .title {
        font-size:8vw
    }

    #bookBox #BookList ul li.slick-slide {
        margin: 0
    }

    #bookBox #customBox .custom {
        height: auto
    }

    #bookBox #customBox .info {
        width: 100%;
        height: 48vh;
        display: block;
        float: none;
        padding: 10vh 0
    }

    #bookBox #customBox .info article {
        width: 60%;
        margin: 0 auto;
        padding: 5vh 0
    }

    #bookBox #customBox .imgs {
        position: relative;
        width: 100%
    }

    #bookBox #customBox .imgs .list {
        height: 35vh
    }

    #bookBox #customBox .slick-dots {
        bottom: 40vh;
        left: calc(0% / 2)
    }
	#photo_area .item .photo{width: 188px;height: 188px;}
	#photo_area .title_box:before{left: 23%;}
	#photo_area .title_box:after{right: 23%;}
}

@media screen and (max-width: 680px) {
    #aboutBox .imgs .list {
        height:60vw
    }

    #productBox .proList {
        padding: 5vh 0 1vh
    }

    #productBox .proList li.slick-center {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    #bookBox #customBox .info article {
        width: 90%;
        padding: 8vw 0 0
    }
	 #photo_area .item .photo{width: 120px;height: 120px;position: absolute;margin: 0;}
	#photo_area .item h3, #photo_area .item p{text-align:left;padding-left: 140px;}
	#photo_area .item{width: 100%;margin: 20px 0;display: flex;flex-direction: column;justify-content: center;}
	#photo_area .item .photo:before, #photo_area .item .photo:after{display:none;}
	#contactBox .container .row .col-md-8 h2{line-height: 140%;margin: 5px 0 20px;text-align: center;font-size: 30px;}
	#contactBox .container .row .col-md-8 p{font-size: 16px;text-align: center;}
	#contactBox .container .row{justify-content: center;}
	#productBox .workframe{
    width: 90%;
}
}

@media screen and (max-width: 450px) {
    #aboutBox .info {
        padding:10vw 5vw;
        width: 90vw
    }
	#productBox .proList .item .info article{
    width: 74%;
}
}