.wrap {position: relative;background: #fff;margin-top: -8vh;z-index: 20;overflow: hidden;}
.wrap #wrapBox >div {position: relative;}
.wrap #wrapBox .bg {position: absolute;width: 100%;height: 100%;background: no-repeat 50% 100% / cover;top: -20px;left: 0;opacity: 1;z-index: -20;}

/* 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% / cover;}
#aboutBox .info {position: relative;padding: 70px 0 70px 55vw;width: 490px;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{z-index: 10;-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-ms-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;}
#productBox .workframe{ position: relative; width: 100%; }
#productBox .proList{padding: 0 0 0vw;margin-bottom: 10px;}
#productBox .bgTxt.title{padding: 0vw 0 3vw;}
#productBox .bgTxt.title, #productBox .bgTxt.title h3{text-align: inherit;}
#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.6;}
#productBox .proList li.slick-center{z-index: 1;-webkit-transform: scaleY(0.9);-ms-transform: scaleY(0.9);transform: scaleY(0.9);opacity: 1;}
#productBox .proList .item{margin: 0px auto;position: relative;width: 100%;max-width: 1180px;}
#productBox .proList .item .Img{ position: relative}
#productBox .proList .item .info {text-align: center;}
#productBox .proList .item .info h3 {font-size: 19px;font-weight: bold;-webkit-line-clamp: 1;padding: 20px 20px 20px 80px;position: relative;}
#productBox .proList .item .info h3::before {
    top: 50%;
    left: 0;
    margin-top: 1px;
    width: 55px;
    height: 1px;
    background-color: #b3b3b3;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
    pointer-events: none;
    content: "";
    position: absolute;
    z-index: 0;
}
#productBox .productworkframe{
    position: relative;
}
#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 p.more{text-align: right;padding: 0;position: absolute;top: 30px;right: 0;z-index: 20;}


/* bookBox bookList*/
#bookBox {font-size: 0;z-index: 10;}
#bookBox:before {content: '';position: absolute;top: 0px;right: 0;display: block;width: 1920px;height: 700px;background-image: url(/images/42/sideTopImg_t2.png);background-repeat: no-repeat;background-position: center;}
#bookBox .sideImg{z-index: 0;top: -110px;right: 0;position: absolute;z-index: 19;pointer-events: none;}
#bookBox .bgTxt.title h3,#bookBox .bgTxt.title{color: #fff;}
#bookBox .row { position: relative; width: 100%; }
#bookBox #BookList {padding-bottom: 7vh;-webkit-animation-name: fadeInUp;-moz-animation-name: fadeInUp;-ms-animation-name: fadeInUp;-o-animation-name: fadeInUp;animation-name: fadeInUp;}
#bookBox #BookList ul li {position: relative;width: 100%;-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);margin: 0 10px;}
#bookBox #BookList ul{display: flex;flex-direction: row;margin-bottom: 30px;}
#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;display: none;}
#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 p.more a{border: 1px #ffffff solid;}
#bookBox p.more a font{color: #ffffff;}
#bookBox p.more a:before{background: rgb(185 222 231 / 26%);}

/* bookBox customBox*/
#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 }

/* newsBox*/
#newsBox{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-ms-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}
#newsBox h3{margin:0 10px;display:inline-block;position: absolute;top: -90px;left: -70px;padding: 15px 0 15px 0px;font-family: 'Cormorant Garamond', 'Times New Roman', 'serif';font-size: 200px;color: #fff;font-weight: 600;font-style: italic;line-height: 20rem;text-shadow: 0 0 16px rgba(0, 0, 0, .08);overflow: hidden;}
#newsBox .bd{}
#newsBox ul li{padding: 20px 0px;overflow:hidden;}
#newsBox ul li > div{float:left;width: 45%;}
#newsBox ul li .info{float:right;width: 47%;margin: 30px 0 0;}
#newsBox ul li a.photo img{
    width: 100%;
    height: 290px;
    object-position: 50% 0;
    object-fit: cover;
    }
#newsBox ul li .info h4 a ,
#newsBox ul li .info article ,
#productBox ul li .info h4 a ,
#productBox ul li .info article{overflow:hidden;height:27px;font-size:18px;color:#333;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
#newsBox ul li .info article{margin-top: 15px;height: auto;line-height:180%;font-size:14px;color:#777;-webkit-line-clamp: 2;}
#newsBox p{text-align:left;margin-top:15px;}
#newsBox p a{display:inline-block;color:#3ca18e;}

/* customBox*/
#customBox{padding: 140px 0 20px;}
#customBox:after {content: "Physician Team";color: #f2efed;position: absolute;text-transform: uppercase;z-index: 1;font-weight: 500;font-size: 90px;letter-spacing: 9.5px;opacity: 1;line-height: 1;text-align: center;font-family: 'Cormorant Garamond', 'Times New Roman', 'serif';left: 50%;top: 130px;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100%;}
#customBox .cuwrap{position: relative;width: 85%;padding: 50px;background: #ffffff;box-sizing: border-box;outline: 1px solid #e9e9e9;outline-offset: -18px;}
#customBox .cuwrap .bgTxt.title {color: #000000;font-style: inherit;padding: 10px 0;}
#customBox .cuwrap .bgTxt.title h3{font-size: 26px;letter-spacing: 1.5px;font-weight: 500;}
#customBox .cuwrap .bgTxt.title p{text-align: center;font-family: 'Noto Sans TC', 'Noto Sans TC', serif;font-weight: 500;letter-spacing: 0.5px;color: #4e4e4e;}#customBox ul{margin-bottom: 0;padding: 0 50px;-webkit-animation-name: fadeInUp;-moz-animation-name: fadeInUp;-ms-animation-name: fadeInUp;-o-animation-name: fadeInUp;animation-name: fadeInUp;}
#customBox ul li {position: relative;margin: 0px 0 20px;padding: 20px 30px;}
#customBox ul li .img { position: absolute; height: calc(100% - 50px); width: calc(100% - 50px); border: 5px solid #d20320; -webkit-box-shadow: 0 7px 14px rgba(56, 5, 5, .37); box-shadow: 0 7px 14px rgba(56, 5, 5, .37); -webkit-transition: -webkit-transform .3s cubic-bezier(.25,.46,.45,.94); transition: -webkit-transform .3s cubic-bezier(.25,.46,.45,.94); transition: transform .3s cubic-bezier(.25,.46,.45,.94); transition: transform .3s cubic-bezier(.25,.46,.45,.94),-webkit-transform .3s cubic-bezier(.25,.46,.45,.94); left: 20px; top: 20px; }
#customBox ul li .img:before { margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); background: #fff; display: block; content: ""; }
#customBox ul li .custom{position: relative;}
#customBox ul li a {margin: 10px;position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 3;}
#customBox ul li .custom .info{display: flex;justify-content: center;margin: 20px 0;align-items: baseline;}#customBox ul li .custom .info h3{font-size: 20px;font-weight: 600;}
#customBox ul li .custom .info h3,#customBox ul li .custom .info p{margin-right: 10px;}

/* iconbox */
#iconbox {padding: 50px 0 50px;}
#iconbox .workframe{display: flex;align-items: center;justify-content: center;}
#iconbox a {margin: 10px 20px;min-width: 200px;padding: 1rem 2rem;border-radius: 1em;display: flex;background-color: #D0A998;align-items: center;justify-content: center;}
#iconbox a:nth-child(2){background-color: #c3a78e;}
#iconbox a img{width: 30px;margin-right: 10px;}
#iconbox a font {font-weight: 400;font-size: 17px;color: #fff;font-family: 'Noto Sans TC', 'Noto Sans TC', serif;}

.moreBtn {display: inline-block;max-width: 140px;width: 50px;font-weight: 500;font-family: "Noto Sans TC";font-size: 13px;color: #D0A998;letter-spacing: 0.65px;text-align: center;padding: 12.5px 0px;}
.moreBtn:hover {color: #0a0a0a;}
.moreBtn.arrow {position: relative;text-align: left;padding-right: 60px;}
.moreBtn.arrow:before, .moreBtn.arrow:after {content: "";position: absolute;top: 0;margin: auto;display: block;}
.moreBtn.arrow:before {bottom: 0;right: 20px;width: 5px;height: 5px;border-top: 1px solid rgb(24 24 24 / 30%);border-left: 1px solid rgb(24 24 24 / 30%);-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.moreBtn.arrow:after {bottom: 1px;right: 21px;width: 30px;height: 1px;background-color: rgb(10 10 10 / 30%);}
.moreBtn.arrow:hover:before, .moreBtn.arrow:hover:after {right: 15px;-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.moreBtn.arrow:hover:before {border-top-color: black;border-left-color: black;}
.moreBtn.arrow:hover:after {width: 30px;background-color: black;}
.ban-wrap .imgr2{z-index: 0;top: -200px;}
.ban-wrap .mainArea{margin: 0 auto;padding: 0 20px 40px;position: relative;display: flex;flex-direction: row;width: 80%;}
.mainArea .left-box{width: 42%;margin-top: 190px;padding-right: 20px;}
.mainArea .right-box{padding: 220px 0 15px 110px;width: 44%;}
.mainArea .right-box:after {display: block;content: "";position: absolute;z-index: -1;top: 150px;right: -460px;width: 84%;height: calc(100% - -50px);background-color: #fafafa;box-shadow: 0 8px 20px rgb(0 0 0 / 6%);-webkit-box-shadow: 0px 5px 30px -5px rgb(0 0 0 / 30%);box-shadow: 0px 5px 30px -5px rgb(0 0 0 / 30%);}

@media screen and (max-width: 1560px) {
	.mainArea .right-box:after {top: 150px;right: -500px;width: 92%;height: calc(100% - -50px);}
}

@media screen and (max-width: 1440px) {
	.ban-wrap .imgr2{z-index: 0;top: -160px;}
	.mainArea .right-box:after {top: 150px;right: -420px;width: 92%;height: calc(100% - -50px);}
}
@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;}
	#customBox ul{padding: 0 0px;}
	.wrap{margin-top: -18vh;}
}
@media screen and (max-width: 1180px) {
	.ban-wrap .imgr2{display: none;}
	#bookBox #BookList{padding: 1vh 0 0;}
	#bookBox #BookList ul li{margin: 10px 0px 10px;}
	#bookBox{background-color: #6bb0c0;padding: 20px 0;}
	#bookBox:before{height: 100%;}
	.ban-wrap .mainArea{flex-direction: column;align-items: flex-start;}
	.sideImg{top: 0;height: 100%;}
	.mainArea .left-box{width: 100%;margin-top: 50px;padding-right: 0;}
	.mainArea .right-box{width: 100%;padding: 30px 0;}
	.mainArea .right-box:after{display: none;}
	#newsBox h3{display: none;}
	#newsBox ul li .info{margin: 10px 0 0;}
}
@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);}
	#customBox:after{display: none;}
	#customBox{padding: 70px 0 20px;}
	#customBox .cuwrap{width: 95%;padding: 30px;}
	#customBox ul li{padding: 20px 10px;}
	#iconbox .workframe{flex-direction: column;}
	.wrap{margin-top: 5vh;}
}
@media screen and (max-width: 768px) {
	#bookBox #BookList ul{flex-direction: column;margin-bottom: 0px;}
}
@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;}
    #iconbox a{margin: 10px 10px;min-width: 170px;}
	#iconbox {padding: 30px 0 30px;}
	.moreBtn.arrow {padding: 10px 0;}
	.moreBtn.arrow:before, .moreBtn.arrow:after {display: none;}
	#newsBox ul li > div{float: none;width: 100%;}
	#newsBox ul li .info{float: none;width: 100%;margin: 30px 0 0;}
#newsBox ul li{padding: 40px 0px 40px 0px;overflow:hidden;}
}
@media screen and (max-width: 450px) {	
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
}