section {position: relative;padding: 80px 0;}
section >.bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: .3; }
section >.info { position: relative; font-size: 0; z-index: 2; }
section .title , #secabout #youtubeBox .right .tit {line-height: 120%;letter-spacing: 4px;font-size: 32px;color: #fff;font-weight: 600;margin-bottom: 40px;}
section .more {margin-top: 40px;text-align: center;}
section .more a {position: relative;padding: 15px 70px;display: inline-block;color: #1f1f1f;background: #ffff30;}
section .more font { text-align: center; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; color: #1f1f1f; }
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }
section .more.white a , section .more.white font {}

/* wrap */
#wrap {background-image: url(../../images/37/container_bg01.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}

/* newsBox */
#newsBox {padding-top: 0;width: 1300px;z-index: 110;margin: 0 auto;}
#newsBox ul {display:flex;flex-wrap: wrap;justify-content: space-between;}
#newsBox .info .row {}
#newsBox .info .tit.row { margin-right: 50px; width: 100px; }
#newsBox .info .tit a { display: inline-block; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: 3px; color: #1f1f1f; }
#newsBox .info .btn { position: absolute; width: 120px; text-align: center; top: calc((100% - 24px) / 2); right: 60px; }
#newsBox .info .btn a { line-height: 23px; }
#newsBox .info .btn a:first-child { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
#newsBox .info .btn font { margin: 0 15px; font-size: 0; display: inline-block; }
#newsBox .info .btn font span { margin-left: 10px; display: inline-block; font-weight: 400; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 13px; }
#newsBox .info .btn font span:first-child { padding-left: 18.03px; }
#newsBox .info ul li {position: relative;width: calc((100%/3) - 30px);margin: 20px 0;background: rgba(58, 61, 63, 0.3);}
#newsBox .info ul li .photo img{width:100%;}
#newsBox .info ul li .info{padding: 30px;}
#newsBox .info ul li a {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
#newsBox .info ul li p.time { margin-right: 20px; width: 85px; display: inline-block; line-height: 27px; font-weight: 300; font-family: 'Montserrat', sans-serif; }
#newsBox .info ul li .noBox { position: absolute; font-weight: 400; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 13px; top: calc(100% - 22px); right: 67px; }
#newsBox .info ul li p {height: auto;-webkit-line-clamp: 3;color: rgb(255 255 255 / 30%);font-size: 14px;margin-top: 20px;border-top: 1px solid rgb(255 255 255 / 30%);padding-top: 20px;}
#newsBox .info ul li .info h3{color:#fff;height: 53px;-webkit-line-clamp: 2;font-size: 18px;font-weight: 500;line-height: 150%;}

/* productBox */
#productBox >.info{width:1300px;margin: 0 auto;}
#productBox ul li {position: relative;margin-bottom: 20px;background: rgba(58, 61, 63, 0.3);display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding: 30px;}
#productBox ul li >a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox ul li >div {overflow: hidden;position: relative;width: 10%;}
#productBox ul li .right{width:20%;}
#productBox ul li .img img {position: relative;width: 100%;height: 80px;object-fit: cover;z-index: 1;}
#productBox ul li .info {overflow: visible;position: relative;width: 60%;z-index: 2;}
#productBox ul li .info .price { position: absolute; background: rgb(0 0 0 / .6); top: -39px; left: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#productBox ul li .info .price font { margin: 6px 15px; display: inline-block; font-weight: 300; color: #fff; }
#productBox ul li .info .price font.old { color: rgb(255 255 255 / .4); }
#productBox ul li .info h3 {margin-bottom: 5px;height: auto;font-weight: bold;font-size: 20px;color: #fff;text-transform: uppercase;}
#productBox ul li .info article {height: auto;font-weight: 400;font-size: 14px;color: #fff;-webkit-line-clamp: 1;}
#productBox ul li >div p{font-style: italic;font-size: 12px;color: #fff;text-align: center;margin: 0;}
#productBox ul li >div p a{background: #ffff30;padding: 10px 20px;display: block;text-align: center;font-style: initial;color: #370367;font-size: 15px;margin-bottom: 12px;position: relative;z-index: 4;}

/* aboutBox */
#aboutBox {background: none;z-index: 5;padding-bottom: 0;}
#aboutBox .info {width: 1300px;margin: 0 auto;}
#aboutBox .info .title {margin: 0 0 20px;text-align: left;}
#aboutBox .info .txtBox {position: relative;padding: 80px;background: rgba(58, 61, 63, 0.3);}
#aboutBox .info .txtBox >div { position: relative; z-index: 2; }
#aboutBox .info .txtBox h3 { margin-bottom: 20px; font-size: 36px; color: #fff; }
#aboutBox .info .txtBox article {line-height: 230%;font-size: 16px;color: #fff;}
#aboutBox .info .txtBox .more {margin-top: 70px;text-align: left;}
#aboutBox #SeoStarRating font { vertical-align: middle; }
#aboutBox #SeoStarRating font:last-child { color: #fff; }
#aboutBox #SeoStarRating .fa { vertical-align: initial; }

/* secabout */
#secabout {background: rgba(58, 61, 63, 0.3);z-index: 1;}
#secabout >div {position: relative;margin: 0 auto;width: 50vw;z-index: 2;}
#secabout #customBox ul li article { margin: 3vw 0 5vw; text-align: center; line-height: 190%; color: #1f1f1f; }
#secabout #youtubeBox { width: 85vw; background: rgba(31, 31, 31, .9); }
#secabout #youtubeBox a { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; }
#secabout #youtubeBox .left { position: absolute; width: calc(100% - 400px); height: 100%; top: 0; left: 0; z-index: 3; }
#secabout #youtubeBox .left iframe { width: 100%; height: 100%; }
#secabout #youtubeBox .right { position: relative; margin: 0 0 0 auto; padding: 150px 50px; width: 300px; text-align: center; z-index: 1; }
#secabout #youtubeBox .right .tit { font-size: 24px; color: #fff; }
#secabout #youtubeBox .right .more { padding: 0 3px 5px; border-bottom: 1px #fff solid; display: inline-block; color: #fff; }
#secabout #youtubeBox .right .more font { margin-right: 20px; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 13px; }

/* list_faq */
.list_faq ul li { margin-bottom: 25px; }
.list_faq ul li .title {position: relative;padding: 20px 65px 20px 25px;background: rgb(46 47 47);display: block;margin: 0;}
.list_faq ul li .title font {font-size: 18px;color: #fff;letter-spacing: 0;font-weight: 300;}
.list_faq ul li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
.list_faq ul li .title span:before , .list_faq ul li .title span:after {width: 16px;height: 1px;background: #fff;display: block;content: "";-webkit-transform: translateY(9px);transform: translateY(9px);}
.list_faq ul li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
.list_faq ul li .info {padding: 15px 25px;background: #fff;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}
.list_faq ul li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* bookBox */
#bookBox .topBox { position: relative; margin: 0 auto 5vw; width: 80vw; }
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list ul li .img { overflow: hidden; position: relative; margin: 0 40px 0 60px; z-index: 1; }
#bookBox .list ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgb(240 244 247 / .6); display: block; top: 0; left: 0; opacity: 0; z-index: 2; content: ""; }
#bookBox .list ul li .img img { position: relative; width: 100%; height: 30vw; object-fit: cover; z-index: 1; }
#bookBox .list ul li .info { position: relative; margin-top: -14%; padding: 7% 5%; width: 350px; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2; }
#bookBox .list ul li .info h3 { height: 40px; font-weight: 400; font-size: 24px; color: #fff; }
#bookBox .list ul li .info .more { text-align: left; }
#bookBox .list ul li:nth-child(2n) .img { margin: 0 0 0 100px; }
#bookBox .list ul li:nth-child(2n) .info { margin-left: 40px; }

@media screen and (max-width:1440px) {
	#newsBox { width: calc(100% - 160px); }
	#aboutBox .bg { width: 50%; }
	#secabout >div{width:70%;}
}
@media screen and (max-width:1400px) {
	#aboutBox .info, #productBox >.info, #newsBox, #secabout >div{width:90%;}
}
@media screen and (min-width:1281px) {
	section .more a:hover {background: #fff;}
	section .more a:hover svg {fill: #282828;}
	section .more.white a:hover { background: #fff; }
	section .more.white a:hover font { color: #1f1f1f; }
	section .more.white a:hover svg { fill: #1f1f1f; }
}
@media screen and (max-width:1280px) {
	#secabout #youtubeBox { width: 90vw; }
	#bookBox .list ul li .img { margin: 0 20px 0 60px; }
}
@media screen and (max-width:1024px) {
	#productBox ul li >div{width:15%;}
	#aboutBox .info .txtBox{padding: 35px;}
	section .more a { padding: 10px 80px 10px 20px; }
	#newsBox .info { padding: 15px 30px; }
	#newsBox .info .row { width: 100%; display: block; }
	#newsBox .info ul li { padding: 0; }
	#newsBox .info ul li .noBox , #newsBox .info .btn , #secabout #youtubeBox .right { display: none; }
	#aboutBox .bg { width: 100%; height: calc(100% - (12vw + 54px)); top: calc(7vw + 54px); z-index: 1; }
	#secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
}
@media screen and (max-width:980px) {
	section{padding:50px 0;}
	#newsBox .info ul li{width: calc((100%/2) - 20px);}
	#productBox ul li >div{width:20%;}
	#productBox ul li .info{width: 50%;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#bookBox { padding-bottom: 5vw; }
	#bookBox .info { padding-bottom: 90px; }
	#bookBox .topBox , #bookBox .topBox .title { position: initial; }
	#bookBox .topBox .more { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; }
}
@media screen and (max-width:768px) {
	#bookBox .list ul li .img { margin: 0 0 0 100px; }
	#bookBox .list ul li .img img { height: 55vw; }
}
@media screen and (max-width:640px) {
	#newsBox .info ul li{width: 100%;}
	#productBox ul li >div, #productBox ul li .info, #productBox ul li .right{width:100%;}
	#productBox ul li .info{margin:15px 0;}
	#productBox ul li .info h3, #productBox ul li .info article{text-align: center;}
	#productBox ul li .img img{height:auto;}
	#aboutBox .info .txtBox{padding: 20px;}
	section .title, #secabout #youtubeBox .right .tit{font-size: 24px;}
	#newsBox { margin-top: 0; width: 100%; }
	#bookBox .list ul li .img , #bookBox .list ul li:nth-child(2n) .img { margin: 0 5vw; }
	#bookBox .list ul li .info , #bookBox .list ul li:nth-child(2n) .info { margin: -10% auto 0; width: 70%; }
	#productBox ul li{padding:20px;display: flex;flex-direction: column;align-items: center;}
}