h2.title { padding-bottom: 50px; text-align: center; font-size: 36px; } /* aboutBox */ #aboutBox { background: no-repeat 50% / cover; } #aboutBox h2 {padding: 60px 0 50px;border-bottom: 1px solid rgb(255 255 255 / 20%);text-align: center;font-weight: 700;font-size: 30px;color: #fff;} #aboutBox .customBox { margin: 50px 0; font-size: 0; } #aboutBox .customBox >div h3 { margin: 0 20px; text-align: center; font-weight: 400; font-size: 30px; } #aboutBox .customBox >div article { margin: 0 20px; text-align: center; font-size: 15px; } #aboutBox .pictureBox {margin: 50px auto 0;width: 90%;} #aboutBox .pictureBox .slick-list { z-index: 2; } #aboutBox .pictureBox .list { position: relative; } #aboutBox .pictureBox .list >div {overflow: hidden;margin: 10px;} #aboutBox .pictureBox .list >div img {} #aboutBox .pictureBox .list p.startgame {position: absolute;left: 0;bottom: -50px;width: 100%;} #aboutBox .pictureBox .list:hover p.startgame{ bottom: 60px; } #aboutBox .pictureBox .list p.startgame a{background: #d9b310;font-size: 14px;color: #fff;} #aboutBox .pictureBox .list p a {padding: 10px 20px;display: block;color: #000;font-weight: bold;letter-spacing: 2px;font-size: 22px;text-align: center;} #aboutBox .aboutInfo {position: relative;margin-top: -150px;padding: 200px 0 50px;background: #fff;box-shadow: 0 -4px 4px rgba(0, 0, 0, .1);z-index: 1;} #aboutBox .aboutInfo .workframe { width: 50%; } #aboutBox .aboutInfo article { text-align: center; font-size: 16px; color: #313136; } #aboutBox .aboutInfo #SeoStarRating { text-align: right; } /* product */ #product {position: relative;padding: 2vw 0 1vw;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} #product .slick-slider{margin:0;} #product h2{color:#fff;font-weight: 700;font-size: 30px;border-bottom: 1px solid rgb(255 255 255 / 20%);margin-bottom: 40px;} #product .slick-list { padding: 0 15%; } #product .pro-list .slick-slide { padding-bottom: 50px; } #product .pro-list .slick-slide a.photo {margin: 20px;border-radius: 50%;} #product .pro-list .slick-slide.slick-current a.photo { border: 25px solid #fff; } #product .pro-list .slick-slide.slick-current { padding-bottom: 0; } #product .pro-list .slick-slide .info { margin: 20px 40px; } #product .pro-list .slick-slide .info h3 a { height: 34px; line-height: 34px; font-size: 16px; color: #868686; -webkit-line-clamp: 1; } #product .pro-list .slick-slide.slick-current .info h3 a { font-size: 20px; color: #000; } #product .pro-list .slick-slide .info p.price { min-height: 30px; opacity: 0; } #product .pro-list .slick-slide.slick-current .info p.price { opacity: 1; } #product .pro-list .slick-slide .info p.price span { margin-right: 10px; display: inline-block; font-size: 16px; color: #ce0000; vertical-align: middle; } #product .pro-list .slick-slide .info p.price span.old { text-decoration: line-through; font-size: 12px; color: #c4c4c4; } #product .btn { width: 100%; text-align: center; } #product .btn a { position: absolute; width: 7vw; height: 7vw; background: #af6e52; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); display: inline-block; left: calc((100% / 3) - 50px); bottom: 150px; } #product .btn a:before , #product .btn a:after { position: absolute; width: 40%; height: 1px; background: #fff; bottom: 44%; right: 30%; transition: right .2s ease-in; content: ""; } #product .btn a:after { margin: 1px 0 0 1px; width: 1.3vw; bottom: 50%; left: 26%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #product .btn a#nextBtn { background: #242a46; left: auto; right: calc((100% / 3) - 50px); } #product .btn a#nextBtn:before , #product .btn a#nextBtn:after { background: #bf8b75; } #product .btn a#nextBtn:after { margin: 1px 1px 0 0; left: auto; right: 26%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* Extra-setting */ #Extra-setting{background: #1a1a1a;padding-left: 90px;} #Extra-setting .workframe{display: flex;flex-wrap: wrap;padding:160px 0px 110px;} #Extra-setting .item{overflow: hidden;} #Extra-setting .item .item-icon{padding: 0 15px;} #Extra-setting .item .item-icon img{width: 170px;height: 160px;} #Extra-setting .item .item-info{ float: left; width: calc((100%/4) - 100px); padding: 50px; box-shadow: 5px 5px 10px rgb(0 0 0 / 50%); } #Extra-setting .item .item-info .item-title{margin-bottom: 10px;color: #d9b310;font-size: 20px;font-weight: bold;letter-spacing: 2px;font-family: 'Noto Sans TC', sans serif;} #Extra-setting .item .item-info .item-descript{color: #888888;font-size: 14px;line-height: 170%;text-align: justify;overflow: hidden;height: 70px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} /* NewsBox */ #NewsBox ul{margin-left: 90px;} #NewsBox ul li >div {position: relative;margin: 20px;} #NewsBox ul li .newImg a.category { position: absolute; padding: 4px 40px; background: #ae591b; display: inline-block; color: #fff; bottom: 0; left: 0; } #NewsBox ul li .info {padding: 40px 30px 50px;background: #fff;box-shadow: 0 0 10px rgb(29 39 49 / 15%);} #NewsBox ul li:hover .info { box-shadow: 0 0 10px rgb(29 39 49 / 25%); } #NewsBox ul li .info h3 { height: 34px; font-size: 20px; -webkit-line-clamp: 1; } #NewsBox ul li .info article { margin: 5px 0 20px; height: 46px; -webkit-line-clamp: 2; } #NewsBox ul li .info p.time { font-size: 13px; color: #9f9f9f; } #NewsBox ul li .info p.more { position: absolute; right: 30px; bottom: 20px; } #NewsBox ul li .info p.more a { padding: 0; border: 0; } #NewsBox ul li .info p.more a:before { display: none; } #NewsBox h2{ font-weight: 700; font-size: 30px; margin-top: 50px; padding-bottom: 30px; } /* bookBox */ #bookBox { overflow: hidden; position: relative; margin: 4vw 0 1vw; background: linear-gradient(180deg,#fff 0,#fff 280px,#bd9672 0,#bd9672); } #bookBox ul li { position: relative; padding-bottom: 70px; } #bookBox ul li a.photo { margin: 0 50px; background-color: #fff; box-shadow: 10px 5px 20px 3px rgba(0,0,0,.1); } #bookBox ul li .info { position: absolute; margin-bottom: 20px; padding: 60px 40px 40px; width: 420px; min-height: 440px; background: #fff; border-top: 5px #bd9672 solid; box-sizing: border-box; box-shadow: 2px 3px 20px 3px rgba(0,0,0,.1); left: 10%; bottom: 0; z-index: 10; } #bookBox ul li .info h3 a { margin-bottom: 30px; height: 51px; font-weight: 400; font-size: 30px; color: #222224; -webkit-line-clamp: 1; } #bookBox ul li .info article { height: 120px; font-size: 18px; color: #000; -webkit-line-clamp: 4; } #bookmore { margin-bottom: 3vw; } @media screen and (max-width: 1600px) { #product .slick-list { padding: 0 10%; } #product .btn a#nextBtn { margin-left: calc((80% / 3) + 35px); } #aboutBox .aboutInfo .workframe{ width: 60%; } } @media screen and (min-width: 1281px) { #aboutBox{background-attachment: fixed;} #NewsBox ul li:hover .info p.more a span { margin: 0 0 0 20px; } #NewsBox ul li .info p.more a:hover font , #NewsBox ul li:hover .info p.more a font { color: #af6e52; } #NewsBox ul li .info p.more a:hover span:before , #NewsBox ul li .info p.more a:hover span:after , #NewsBox ul li:hover .info p.more a span:before , #NewsBox ul li:hover .info p.more a span:after { background: #af6e52; } } @media screen and (max-width: 1280px) { #bookBox ul li a.photo { margin: 0 25px; } #bookBox ul li a.photo img { max-width: inherit; } #Extra-setting, #NewsBox ul{padding-left: 0;margin-left: 0;} #Extra-setting .item .item-info { width: calc((100%/3) - 100px); } #product { padding: 50px 0 0; } } @media screen and (max-width: 1024px) { #aboutBox .aboutInfo .workframe { width: 70%; } #product .slick-list { padding: 0 5%; } #bookBox { padding-bottom: 30px; } #bookBox ul li a.photo img { height: 45vw; } #bookBox ul li .info { padding: 10px 20px; width: 70%; min-height: inherit; } } @media screen and (max-width: 980px) { #product .slick-list { padding: 0 35%; } #product .btn a { width: 10vw; height: 10vw; left: 20%; } #product .btn a:after { width: 1.7vw; } #product .btn a#nextBtn { left: auto; right: 20%; } } @media screen and (max-width: 640px) { #aboutBox .aboutInfo .workframe { width: 90%; text-align: left; } #aboutBox .aboutInfo article { text-align: left; } #product .slick-list { padding: 0 20%; } #product .btn a { left: 10%; } #product .btn a#nextBtn { left: auto; right: 10%; } #NewsBox .workframe { width: 100%; } #bookBox ul li a.photo img { height: 55vw; } #bookBox ul li .info h3 a { height: 40px; font-size: 24px; } #bookBox ul li .info article { height: 60px; font-size: 16px; -webkit-line-clamp: 2; } } @media screen and (max-width: 480px) { #product .pro-list .slick-slide { padding-bottom: 0; } #product .pro-list .slick-slide.slick-current a.photo {padding-bottom: 0;border: 15px solid #fff;} #bookBox ul li .info h3 a { padding-bottom: 5px; font-size: 22px; } #product .btn { display: none; } #NewsBox { margin: 15vw 0; } #Extra-setting .item .item-info { width: calc(100% - 100px); } }