.wrap {position: relative;margin-top: 60px;z-index: 10;} .wrap h4.stitle {margin-bottom: 10px;text-transform: uppercase;font-weight: 300;font-size: 20px;color: #333;} .wrap h2.title { margin-bottom: 30px; font-size: 40px; color: #222; } .wrap p.more a {padding: 10px 40px 15px;background: #333;display: inline-block;color: #fff;} .wrap p.more a span { letter-spacing: 1px; font-size: 14px; font-weight: bold;} .wrap p.more a:hover span{letter-spacing: 5px;} /* productBox */ #productBox { padding-bottom: 4vw; } #productBox .bgTxt { position: absolute; width: 100%; font-weight: 700; text-align: center; font-family: 'Rubik', sans-serif; font-size: 10vw; color: #f1f1f1; z-index: 1; bottom: -8vw; left: 0; } #productBox .list { position: relative; z-index: 2; } #productBox .list .item { position: relative; margin: 0 30px 10px; background: #fff no-repeat 50% / cover; box-shadow: 0 0 10px rgba(0, 0, 0, .5); } #productBox .list .item img { position: relative; width: 100%; z-index: 1; } #productBox .list .item a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; } #productBox .list .item .info { position: absolute; width: 100%; height: 100%; top: 150%; z-index: 2; } #productBox .list .item .info h3 { margin: calc((100% - 117px) / 2) 0; padding: 0 15%; height: 61px; font-weight: normal; font-size: 20px; color: #fff; -webkit-line-clamp: 2; } #productBox .list .item .info p { padding: 13px 20px; background: #fff; } /* aboutBox */ #aboutBox {margin-bottom: 5vw;font-size: 0;} #aboutBox h2.title{ color: #f1f1f1; font-size: 200px; letter-spacing: 110px; position: absolute; top: -30px; left: 0; width: 100%; text-align: end; line-height: 100%; font-family: 'Noto Serif TC', serif; font-weight: 500; margin: 0;} #aboutBox h4.stitle { font-size: 38px;} #aboutBox h4.stitle b{ color: #ac9b79; margin: 0 5px; font-size: 38px; vertical-align: baseline;} #aboutBox >div , #customBox .row {margin: 0 5% 0 0;width: 40%;display: inline-block;position: relative;} #aboutBox .aboutImg{ margin-top: 90px;} #aboutBox .aboutImg:after {content:url(/images/33/about-img-bg.jpg);position:absolute;bottom: -80px;right: -80px;z-index: -1;} #aboutBox .info , #customBox .youtubeBox {margin: 90px 0 0 10%;} #aboutBox .info p.arts {margin-bottom: 20px;color: #585858;font-size: 16px;text-align: justify;line-height: 200%;} #aboutBox .info p.more , #aboutBox .info #SeoStarRating {margin-bottom: 30px;} /* customBox */ #customBox {position: relative;padding: 400px 0 0;background-image: url(/images/33/customBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;margin-top: 150px;} #customBox .workframe { z-index: 2; font-size: 0; } #customBox .row { vertical-align: top; } #customBox .listBox ul li h3 { margin: 20px 0 10px; font-size: 40px; color: #fff; } #customBox .listBox ul li article { font-size: 18px; color: #909090; } #customBox .listBox .btn { text-align: right; } #customBox .listBox .btn a { position: relative; color: #eee; text-align: center; } #customBox .listBox .btn a#nextBtn:before { color: #6b6b78; content: "|"; } #customBox .listBox .btn a span { position: absolute; width: 80px; height: 27px; display: block; text-align: center; line-height: 27px; top: 0; left: 0; -webkit-transform: translate(0) scale(0); transform: translate(0) scale(0); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } #customBox .listBox .btn a i { text-align: center; width: 80px; height: 27px; font-size: 27px; -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } #customBox .youtubeBox { position: relative; } #customBox .youtubeBox:before { position: absolute; width: 40%; height: 100%; background: url(/images/33/dote.png) 0 0; top: -2vw; left: 90%; z-index: -1; opacity: 0.4; content: ""; } #customBox .youtubeBox iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #customBox .youtubeBox .playBtn { position: absolute; width: 100px; height: 100px; background: #ff5860; border-radius: 50%; display: block; text-align: center; line-height: 100px; top: calc((100% - 100px) / 2); left: -50px; -webkit-animation: playbtn 1s infinite alternate ease-in-out; animation: playbtn 1s infinite alternate ease-in-out; } #customBox .youtubeBox .playBtn i { font-size: 36px; color: #fff; } #customBox .contact { position: absolute; padding-left: calc((100% - 1300px) / 2); width: 650px; height: 110px; background: #21bcd8; line-height: 110px; bottom: 0; left: 0; z-index: 3; } #customBox .contact a { display: inline-block; } #customBox .contact font { text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 40px; color: #fff; } #customBox .contact i { margin: 10px 0 10px 30px; font-size: 30px; color: #fff; -webkit-animation: arrowright 1s infinite alternate ease-in-out; animation: arrowright 1s infinite alternate ease-in-out; } /* NewsBox */ #NewsBox {position: relative;padding: 80px 0;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} #NewsBox:after{content:'';position:absolute;width: 1px;height: 50px;background: #cbbc9d;top: 0;left: 50%;z-index: 2;} #NewsBox .bg , #bookBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; } #NewsBox h4.stitle , #NewsBox h2.title {text-align: center;font-weight: 300;} #NewsBox #newList li{ margin: 0 15px; position: relative;} #NewsBox #newList li a{position:absolute;width: 100%;height: 100%;z-index: 9;top: 0;left: 0;} #NewsBox #newList li .img { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; overflow: hidden; position: relative;} #NewsBox #newList li .img:before{content:'';position:absolute;bottom: 40px;left: 0;background: #cbbc9d;width: 90px;height: 1px;z-index: 3;} #NewsBox #newList li .img:after{ content:''; position:absolute; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(202, 202, 202, 0) 24%, #000000 88%, #000000 100%); opacity: .75; top: 0; left: 0; width: 100%; height: 100%; } #NewsBox #newList li:hover .img:after{background:#232323;opacity: 1;} #NewsBox #newList li .img img{width:100%;} #NewsBox #newList li .img a.photo img , #bookBox ul li a.photo img { width: 100%; } #NewsBox #newList li .info{ position: absolute; bottom: 40px; padding: 40px;} #NewsBox #newList li .info p{color:#fff;font-size: 14px;} #NewsBox #newList li .info p a { margin-right: 15px; padding: 2px 15px; background: #ffd9db; display: inline-block; color: #ff5860; } #NewsBox #newList li .info p font {font-family: 'Rubik', sans-serif;color: #fff;vertical-align: baseline;margin-right: 10px;} #NewsBox #newList li .info h3 {margin-top: 10px;height: 110px;font-weight: bold;font-size: 24px;color: #fff;-webkit-line-clamp: 3;line-height: 150%;overflow: hidden;} #NewsBox #newList li .info article{ transition: .3s ease; color: #cccccc; display: none; font-size: 14px; text-align: justify; overflow: hidden; height: 85px; margin-top: 10px; line-height: 200%;} #NewsBox #newList li:hover .info article{display:block;} #NewsBox p.more , #bookBox p.more { margin-top: 60px; text-align: center; } /* bookBox */ #bookBox {position: relative;padding: 80px 0 100px;} #bookBox:after{content:'';position:absolute;width: 1px;height: 50px;background: #cbbc9d;bottom: 0;left: 50%;z-index: 2;} #bookBox h1{font-family: 'Noto Serif TC', serif;font-weight: 500;line-height: 100%;text-transform: uppercase;color: #f1f1f1;text-align: center;font-size: 200px;letter-spacing: 110px;} #bookBox h2.title {text-align: center;margin-top: -120px;font-size: 38px;letter-spacing: 5px;font-weight: 300;line-height: 130%;} #bookBox h2.title b{ color: #ac9b79; margin: 0 5px; font-size: 38px; vertical-align: baseline;} #bookBox ul{ width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); margin-top: -20px;} #bookBox ul li{ position: relative; margin: 5px; overflow: hidden; display: inline-block; vertical-align: top; border: 7px rgb(255 255 255 / 0%) solid;} #bookBox ul li:hover{border: 7px #5d5d5d solid;} #bookBox ul li:last-child:hover{border: 7px rgb(255 255 255 / 0%) solid;} #bookBox ul li a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 5;} #bookBox ul li >div { overflow: hidden; position: relative; margin: 0; z-index: 0;} #bookBox ul li .img img { position: relative; width: 100%; height: 280px; object-fit: cover; z-index: 1; display: block; width: 100%; -webkit-transition: all 8s linear; -o-transition: all 8s linear; transition: all 8s linear;} #bookBox ul li:hover .img img { -webkit-transform: scale(1.4); transform: scale(1.4);} #bookBox ul li .info { position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; overflow: overlay;} #bookBox ul li .info .titleBox { z-index: unset; text-align: right; margin: 1.2em 3.0em 1.2em; position: absolute; z-index: 1; top: 110px; right: 0; bottom: 0;} #bookBox ul li .info .titleBox h4 { color: #333; text-align: right; font-size: 30px;} #bookBox ul li .info .titleBox p { color: #656565; text-align: right;} #bookBox ul li .info .titleBox p:after { background: rgb(0 0 0 / 15%); transition: all ease-in-out .3s; content: ""; position: absolute; bottom: 25px; transform: rotate(180deg); width: 100%; height: 5px; display: block;} #bookBox ul li:hover .info .titleBox {letter-spacing: 4.2px;} #bookBox ul li .info .project-zoom {position: absolute;left: 25%;top: 65%;margin: -4.5em;overflow: hidden;opacity: 0;-webkit-transform: scale(.5);-ms-transform: scale(.5);-o-transform: scale(.5);transform: scale(.5);-webkit-transition: all .7s;-o-transition: all .7s;transition: all .7s;} #bookBox ul li:hover .project-zoom { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} #bookBox ul li .info h3 { margin-bottom: 0px; font-weight: 600; font-size: 34px; line-height: 120%; height: 50px; letter-spacing: .05em; color: #fff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s;} #bookBox ul li .info h3:after { background: rgb(255 255 255 / 80%); transition: all ease-in-out .3s; content: ""; position: absolute; bottom: 32px; transform: rotate(180deg); width: 100%; height: 1px; display: block;} #bookBox ul li .info article { font-size: 18px; color: #fff; letter-spacing: 2.2px; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; display: contents;} #bookBox ul li:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s;} #bookBox ul li:hover:after { opacity: .75;} #bookBox ul li:last-child .info, #bookBox ul li:last-child:after { background: none;} #bookBox ul li a.photo , #bookBox ul li h3 {} #bookBox ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; } @keyframes playbtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @-webkit-keyframes playbtn { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } } @keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } } @-webkit-keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } } @media screen and (max-width:1366px) { #aboutBox h2.title, #bookBox h1{ letter-spacing: 80px;} } @media screen and (min-width:1281px) { #productBox .list .item:hover img { background: rgba(27, 28, 56, .4); } #productBox .list .item:hover .info { top: 0; } #customBox .listBox .btn a:hover span { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); } #customBox .listBox .btn a:hover i { -webkit-transform: rotate(0) scale(0); transform: rotate(0) scale(0); } #customBox .youtubeBox .playBtn:hover { background: #2c2a2a; } #NewsBox #newList li .info p a:hover { background: #ff5860; color: #fff; } #bookBox ul li:hover a.photo img { background: rgba(44, 44, 44, .6); } } @media screen and (min-width:980px) { #customBox, #NewsBox{background-attachment: fixed;} } @media screen and (max-width:1024px) { #aboutBox .aboutImg{margin:0;width: 50%;} #aboutBox .aboutImg:after{display:none;} #aboutBox h2.title, #bookBox h1{letter-spacing: 30px;} #aboutBox h4.stitle, #aboutBox h4.stitle b{line-height: 130%;} } @media screen and (max-width:1280px) { #productBox .list .item img { background: rgba(27, 28, 56, .4); } #productBox .list .item .info { top: 0; } } @media screen and (max-width:1024px) { #customBox { margin-top: 40px;} #bookBox ul{ grid-template-columns: repeat(2, 1fr);} #customBox:before { height: 100%; } #customBox .row { margin: 0 0 30px; width: 80%; } #customBox .youtubeBox { margin: 10px 0 0; width: auto; } #customBox .contact { padding-left: 5%; width: 85%; bottom: -20px; } } @media screen and (max-width:980px) { .wrap{margin:0;} #customBox{margin:0;padding: 300px 0 0;} #aboutBox h2.title{font-size:95px;top: 20px;} #bookBox h1{font-size:95px;} #productBox .bgTxt { font-size: 15vw; bottom: -12vw; } #aboutBox {position: relative;margin-bottom: 0;padding: 5%;width: 90%;} #aboutBox .aboutImg { position: absolute; width: 100%; height: 100%; display: block; left: 0; top: 0; z-index: 1; } #aboutBox .aboutImg a.photo {height: 100%;opacity: .1;} #aboutBox .info { position: relative; margin: 0; width: 100%; display: block; z-index: 2; } #NewsBox #newList {margin: 0 auto;} } @media screen and (max-width:640px) { #bookBox ul li:last-child{display:none;} #aboutBox .info p.arts{font-size:15px;} #bookBox h1{font-size: 55px;letter-spacing: 20px;} #bookBox ul{margin:0;grid-template-columns: repeat(1, 1fr);} #bookBox ul li .img img{height: 240px;} #bookBox{padding: 30px 0 80px;} #aboutBox h2.title{font-size: 55px;letter-spacing: 20px;} #aboutBox .info{margin-top: 70px;} #aboutBox h4.stitle, #aboutBox h4.stitle b, #bookBox h2.title, #bookBox h2.title b, #NewsBox h4.stitle, #NewsBox h2.title{font-size: 28px;} #bookBox h2.title{margin:0;} #productBox .list .item { margin: 0 10px 10px; } } @media screen and (max-width:600px) { #productBox .list .item { margin: 0 10vw 10px; } } @media screen and (max-width:500px) { #customBox .contact { height: 14vw; line-height: 14vw; } #customBox .contact font { font-size: 9vw; } #customBox .contact i { font-size: 8vw; } #NewsBox #newList { width: 100%; } }