.section-side{width:100px;height:100vh;position:fixed;top:0;left: 108px;z-index: 888;border-left: 1px solid rgba(255,255,255,0.2);transition:all 0.8s}
#pc-menu{position:absolute;top:50%;transform:translateY(-50%);right:96px}
#pc-menu ul li b{display:none}
#pc-menu ul li{position:relative;padding:0 20px}
#pc-menu ul li:hover{overflow:visible}
#pc-menu >ul >li >p a{padding:0 15px 23px 15px;color:#fff;display:flex;flex-direction:column;align-items:center}
#pc-menu >ul >li >p a span{color:#fff;font-weight:400}
header.scroll #pc-menu >ul >li >p a span{color:#2c2c2c}
#pc-menu >ul >li >p a{position:relative;display:block;padding:0;font-size:16px;font-weight:300;height:30px;text-align: right;overflow:hidden;margin-bottom:20px}
#pc-menu >ul >li >p a span{position:absolute;left:0;right:0px;margin:auto;overflow:hidden;-webkit-transition:top 0.4s ease-out;transition:top 0.4s ease-out;text-align:end}
#pc-menu >ul >li >p a span.en{font-family:'Quantico',sans-serif}
#pc-menu >ul >li >p a span.cn{top:16px}
#pc-menu >ul >li >p a:hover span.en,#pc-menu >ul >li >p a span.cn{top:-2px}
#pc-menu >ul >li >p a:hover span.cn{opacity:0;transition:top 0.4s ease-out}
#pc-menu >ul >li >p a span.cn{opacity:1;transition:all 0.4s ease;font-family:'Quantico',sans-serif}
#pc-menu >ul >li >p a span.en,#pc-menu >ul >li >p a:hover span.cn{top:30px}
#pc-menu >ul >li:hover >p a{color:#ffffff;text-shadow:1px 1px 5px #ffffff78}
#pc-menu li .menu_body,#pc-menu li .menu_body .subOption li ul{width:100px;left:calc(100% - 0px);z-index:1;opacity:0;top:-10px}
#pc-menu li .menu_body ul{text-align:left}
#pc-menu li .menu_body .subOption li ul{position:absolute;top:0;left:-170px}
#pc-menu li .menu_body .subOption li >div a{display:block;padding:10px 10px;font-size:14px;color:#ffffff;word-wrap:break-word}
#pc-menu li .menu_body .subOption li >div a:hover{color:#ffffff;background-color:#c20419}
#pc-menu li:hover .menu_body,#pc-menu li .menu_body .subOption li:hover >ul{z-index:10;opacity:1}
#pc-menu ul li::after{content:'';position:absolute;width:5px;height:5px;top:14px;right:0;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.3)}
#pc-menu ul li::before{content:"";position:absolute;width:14px;height:14px;border:1px solid rgb(255 255 255 / 47%);border-radius:50%;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-transform:scale(0);transform:scale(0);top:6px;right:-3px}
#pc-menu ul li:hover::before{-webkit-transition-delay:0.4s;transition-delay:0.4s;-webkit-transform:scale(1);transform:scale(1)}
#pc-menu ul li:hover::after{width:8px;height:8px;background:rgba(255,255,255,1);transition:all 0.8s;right:-3px}
#pc-menu li .menu_body .subOption li:after,#pc-menu li .menu_body .subOption li::before{display:none}
#pc-menu li .menu_body .subOption li{padding:0}
section {position: relative;padding: 5vw 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 .more { margin-top: 40px; text-align: center; }
section .more a { position: relative; padding: 15px 100px; border: 1px #1f1f1f solid; display: inline-block; color: #1f1f1f; }
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 { border-color: #fff; color: #fff; }
section .title_box font{font-weight: 700;font-size: 62px;color: #ffffff;position: relative;font-family: 'Quantico', sans-serif;text-transform: uppercase;line-height: 110%;margin-bottom: 20px;}
section .entitle{font-family:"Cormorant",'Noto Sans TC','Noto Sans SC',sans-serif;font-size:118px;color:#cbc9c9;text-align:center;line-height:100%}
section .title{font-size:30px;text-align:center;color:#343434;margin:10px 0}
header #navbox{display:none}
.more_btn{margin-top:0px}
.more_btn a{position:relative;overflow:hidden;width:130px;padding: 15px 30px 15px 15px;display:flex;align-items:center;justify-content:space-between}
.more_btn font{text-align:left;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:#ffffff}
.more_btn.white font{letter-spacing:1px;font-size:15px;position:relative;-webkit-writing-mode:inherit;-ms-writing-mode:inherit;writing-mode:inherit;color: #242020;font-weight:400}
.more_btn.white a:before{content:'';position:absolute;height:1px;width:20%;bottom:0px;left:0;background-color:#087883;z-index:0;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
.more_btn.white:hover a:before{width:100%}
.more_btn.white a::after{content:'';position:absolute;height: 1px;width:100%;bottom: 0;left:0;background-color: #e1e1e1;z-index:-1;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
.more_btn.white .arrow{position:relative;display:inline-block;vertical-align:middle;width:9px;height:9px;margin-right:-5px}
.more_btn.white .arrow:after,.more_btn.white .arrow:before{content:"";position:absolute;top:50%;left:0;z-index:1;width:100%;height:1px;margin-top:-0.5px;background-color: #242020;}
.more_btn.white .arrow:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.more_btn.white:hover .arrow:after{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
#productBox ul.slick-dots{position: relative;margin-top: -60px;}
#productBox ul.slick-dots li{padding:0;width: 30px;height: 1px;margin: 0;}
#productBox ul.slick-dots li button{width: 30px;height: 1px;padding: 0;}
#productBox ul.slick-dots li button:before{content:'';width: 30px;height: 1px;background: #000;}

/* newsBox */
#newsBox { margin: -85px auto 0; padding: 0; width: 1280px; z-index: 110; }
#newsBox .info { padding: 30px 60px; }
#newsBox .info .row { width: calc(100% - 150px); display: inline-block; vertical-align: text-bottom; }
#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; padding: 0 120px 0 0; font-size: 0; }
#newsBox .info ul li a { position: absolute; width: calc(100% - 120px); 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 p.txt { width: calc(100% - 155px); display: -webkit-inline-box; }
#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; }

/* productBox */
#productBox{background:rgb(211 211 211 / 30%);padding:6vw 0}
#productBox #service{margin:0 auto;width:min(80%,1440px)}
#productBox >.info{margin:0 100px}
#productBox ul{margin-top:2vw;position:relative}
#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}
#productBox ul li .img img{position:relative;width:80%;height:250px;object-fit:cover;z-index:1;margin:0 auto}
#productBox ul li .info{overflow:visible;position:relative;padding:25px 0;z-index:2;margin:0 auto;width:80%}
#productBox ul li .info .info_title{display:flex;justify-content:space-between;align-items:flex-start}
#productBox ul li .info .productIndex{font-family:"Nunito Sans",'Noto Sans TC','Noto Sans SC',sans-serif;font-size:46px;color:#808080;line-height:100%}
#productBox ul li .info .proCate{text-align:right;font-size:23px;color:#447065;font-family:'Cormorant';line-height:100%}
#productBox ul li .info .price{position:absolute;padding:5px 15px;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:0 10px;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:15px 0;height:37px;font-weight:400;font-size:22px;color:#1f1f1f}
#productBox ul li .info article{height:43px;font-weight:400;font-size:14px;color:#2c2c2c;-webkit-line-clamp:2}


/* aboutBox */
#about_area{overflow: hidden;padding: 7vw 0 3vw;position: relative;}
#about_area .aboutBG{content:'';position:absolute;height: 1px;width: 0;bottom:0;background: rgb(255 255 255 / 40%);opacity: 0.32;z-index: 3;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out;top: 270px;left: 50%;transform: translate(-50%, -50%);display: none;}
#about_area.tooolong .aboutBG{width: 100%;}
#about_area .nowrap_box{margin-right:auto;flex-direction:row-reverse;justify-content:flex-end;align-items:center;width: min(95%, 1650px);}
#about_area:after{position:absolute;content:'';width:170px;height:100%;left:6%;top:-5%;background-image:url(/images/37/aboutImg-01.png);background-repeat:no-repeat;background-position:100% 0;z-index:1;animation-name:newsbg;animation-duration:2s;animation-iteration-count:infinite;animation-direction:alternate;background-size:contain}
#about_area:before{position:absolute;display:block;left: 0;bottom: 0;content:"";background: #087883;z-index: 0;height: 186px;width: 640px;}
#about_area. .img_item img{width:100%}
#about_area .aboutArea{padding-right: 0;padding-left: 150px;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;flex-direction: row-reverse;justify-content: center;align-items: center;}
#about_area .aboutArea  .areaTxt{padding-left: 140px;width: 34%;}
#about_area .aboutArea .areaTitle .title{font-size: 20px;margin-left:0px;letter-spacing:0.3px;line-height:180%;font-weight: 400;padding-bottom: 60px;position: relative;text-align: left;}
#about_area .aboutArea .areaTitle article .Txt{position:relative;-webkit-transition-delay:300ms;transition-delay:300ms;padding-top: 10px;}
#about_area .aboutArea .text{font-size: 16px;color:#5a5a5a;line-height: 230%;}
#about_area .aboutArea .ImgCenter .Img{width:100%;margin-left: 90px;position:relative;overflow:hidden}
#about_area .aboutArea .ImgCenter .Img video{width:130%;height: 510px;}
#about_area .aboutArea .ImgCenter .ImgTop{position:absolute;top:10%;left:115%;width:64%;z-index:0}
#about_area .aboutArea .ImgCenter .ImgBottom{position:absolute;top:69%;left:-40%;width:56%;z-index:2}
#about_area .aboutArea .bottom{width:25%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-start;padding-left:100px;margin-bottom:-11px;position:relative;flex-direction:column;justify-content:flex-end}
#about_area .aboutArea .Txt{letter-spacing:0.6px;line-height:1.6}
#about_area .aboutArea .Txt h2{font-size:25px;margin-bottom:15px}
#about_area .aboutArea .Txt .text{color: #a5a5a5;font-size:16px;font-weight: 400;line-height:180%}
#about_area .aboutArea .right .more_btn{position:relative;margin-top:30px}
#about_area  .marqueeBox{overflow:hidden;z-index: -1;pointer-events:none;position:absolute;top: 80px;}
#about_area  .marqueeBox .Img{width: 150vw;-webkit-animation:marqueeAni 28s linear infinite;animation:marqueeAni 28s linear infinite}

@keyframes newsbg{0%{background-position:100% 5%}
100%{background-position:100% 0}}

@keyframes marqueeAni{0%{opacity:1;-webkit-transform:translateX(112vw);transform:translateX(112vw)}
98%{opacity:1;-webkit-transform:translateX(-172vw);transform:translateX(-172vw)}
99%{opacity:0;-webkit-transform:translateX(-172vw);transform:translateX(-172vw)}
100%{opacity:0;-webkit-transform:translateX(112vw);transform:translateX(112vw)}
}@-webkit-keyframes marqueePadAni{0%{opacity:1;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
98%{opacity:1;-webkit-transform:translateX(-260vw);transform:translateX(-260vw)}
99%{opacity:0;-webkit-transform:translateX(-260vw);transform:translateX(-260vw)}
100%{opacity:0;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
}@keyframes marqueePadAni{0%{opacity:1;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
98%{opacity:1;-webkit-transform:translateX(-260vw);transform:translateX(-260vw)}
99%{opacity:0;-webkit-transform:translateX(-260vw);transform:translateX(-260vw)}
100%{opacity:0;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
}@-webkit-keyframes marqueePhAni{0%{opacity:1;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
98%{opacity:1;-webkit-transform:translateX(-500vw);transform:translateX(-500vw)}
99%{opacity:0;-webkit-transform:translateX(-500vw);transform:translateX(-500vw)}
100%{opacity:0;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
}@keyframes marqueePhAni{0%{opacity:1;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
98%{opacity:1;-webkit-transform:translateX(-500vw);transform:translateX(-500vw)}
99%{opacity:0;-webkit-transform:translateX(-500vw);transform:translateX(-500vw)}
100%{opacity:0;-webkit-transform:translateX(100vw);transform:translateX(100vw)}
}

/* bookBox */
#bookBox{padding:2vw 0;overflow:hidden}
#bookBox .bg{width:50%;opacity:1;background-repeat:no-repeat;background-size:cover}
#bookBox .topBox{position:relative;margin:0 auto 0vw;width:80vw}
#bookBox .topBox .title{position:relative;text-align:center;top:-200px;right:-450px}
#bookBox .entitle{word-spacing:100vw;text-align:left;position:relative;left:55%;color:#e5e5e5}
#bookBox .list{width:950px;margin:0px 260px 0 auto}
#bookBox .list ul li{margin:15px;box-shadow:0 0 0.5em rgb(0 0 0 / 20%)}
#bookBox .list ul li .img{overflow:hidden;position:relative;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:18vw;object-fit:cover;z-index:1}
#bookBox .list ul li .info{position:relative;padding:7% 5%;background:#fff;z-index:2;display:flex;flex-direction:column;align-items:center}
#bookBox .list ul li .info span{font-size:15px;color:#a9a9a9;text-align:center}
#bookBox .list ul li .info h3{height:40px;font-weight:400;font-size:24px;color:#262626}
#bookBox .list ul li .info .more{text-align:left}
#bookBox:after{position:absolute;content:'';width:170px;height:100%;right:4%;top:-4%;background-image:url(/images/37/aboutImg-01.png);background-repeat:no-repeat;background-position:100% 0;z-index:5;animation-name:newsbg;animation-duration:2s;animation-iteration-count:infinite;animation-direction:alternate;overflow:hidden;background-size:contain}
#bookBox .slick-prev{left:unset;right:-190px;top:61%}
#bookBox .slick-next{right:-190px;top:80%}

@media screen and (max-width:1440px){
	#newsBox{width:calc(100% - 160px)}
	#productBox >.info{margin:0 5%}
	#productBox ul li >div{margin:0 10px}
	#productBox ul li .info{padding:25px 15px 40px;width:calc(85% - 30px)}
	#aboutBox .bg{width:50%}
	#aboutBox .info{width:55%}
	#about_area .aboutArea .areaTxt{width:60%}
	#productBox #service{margin-left:200px}
}
@media screen and (min-width:1281px){
	section .more a:hover{background:#1f1f1f}
	section .more a:hover font{color:#fff}
	section .more a:hover svg{fill:#fff}
	section .more.white a:hover{background:#fff}
	section .more.white a:hover font{color:#1f1f1f}
	section .more.white a:hover svg{fill:#1f1f1f}
	#productBox ul li:hover .img:before,#bookBox .list ul li:hover .img:before{opacity:1}
	#productBox ul li:hover .img img,#bookBox .list ul li:hover .img img{-webkit-transform:scale(1.1);transform:scale(1.1)}
	#productBox ul li{position:relative;margin-top:50px}
	#productBox ul li.slick-current{margin-top:0}
	#productBox .slick-prev{z-index:99;top:44%;left:26.5%;transform:translate(-50%,-50%)}
	#productBox .slick-next{z-index:99;top:44%;right:30%;transform:translate(-50%,-50%)}
	#productBox .slick-prev:before{content:url(/images/37/img-bearrow.png);opacity:1;position:relative}
	#productBox .slick-next:before{content:url(/images/37/img-nextarrow.png);opacity:1;position:relative}
	#bookBox .slick-prev:before{content:url(/images/37/img-bearrow.png);opacity:1;position:relative}
	#bookBox .slick-next:before{content:url(/images/37/img-nextarrow.png);opacity:1;position:relative}
}
@media screen and (max-width:1280px){
	#secabout #youtubeBox{width:90vw}
	#about_area .aboutArea{padding-left:0}
	#about_area .aboutArea .ImgCenter .Img{margin-left:0}
	#about_area .aboutArea .areaTxt{padding-left:60px}
	#productBox #service{margin-left:0;width:100%}
	#productBox .slick-prev:before,#productBox .slick-next:before{color:#ececec}
	#bookBox .slick-prev:before,#bookBox .slick-next:before{color:#f7f7f7}
	#bookBox:after{width:130px}
	#bookBox .topBox{width:90%}
	#bookBox .list{margin:0 auto;width:90%}
	#bookBox .bg{display:none}
	#bookBox .entitle{left:0}
	#bookBox .topBox .title{right:0%}
	#bookBox .list ul li .img img{height:25vw}
	#about_area .marqueeBox{top:640px}
	#about_area  .marqueeBox .Img{width:260vw;-webkit-animation:marqueePadAni 28s linear infinite;animation:marqueePadAni 28s linear infinite}
}
@media screen and (max-width:1024px){
	section .more a{padding:10px 80px 10px 20px}
	#newsBox{margin-top:-86px}
	#newsBox .info{padding:15px 30px}
	#newsBox .info .row{width:100%;display:block}
	#newsBox .info ul li{padding:0}
	#newsBox .info ul li a,#aboutBox .info{width:100%}
	#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}
	#aboutBox .info .txtBox{padding:7vw 10vw;background:none}
	#secabout:before{width:90vw}
	#secabout #customBox{width:70vw}
	#secabout #youtubeBox .left{position:relative;width:100%;height:400px}
	#about_area .aboutArea{display:flex;flex-direction:column-reverse}
	#about_area:before{bottom:40%;width:1024px}
	#about_area .aboutArea .ImgCenter .Img{width:90%;margin:0 auto;margin-bottom:100px}
	#about_area .aboutArea .areaTxt{padding-left:0;width:90%;margin:0 auto}
	#about_area .aboutArea .areaTitle .title{padding-bottom:10px}
	#bookBox .list ul li .img img{height:35vw}
	#about_area:after{left:80%}
}
@media screen and (max-width:980px){
	#secabout:before{width:0}
	#secabout #customBox{width:90vw}
	#secabout #youtubeBox .left{height:45vw}
	#bookBox{padding-top:10vw}
	#bookBox .info{padding-bottom:90px}
	#bookBox .topBox .more{position:absolute;width:100%;text-align:center;bottom:0;left:0}
}
@media screen and (max-width:840px){
	section .entitle{font-size:60px}
	section .title{font-size:26px}
	#bookBox .list ul li .img img{height:55vw}
	#about_area{padding:18vw 0 10vw}
	#productBox{padding:10vw 0 25vw}
	#productBox ul{padding-top:5vw}
	#bookBox .topBox .title{top:-88px}
	#bookBox .list{width:70%}
	#bookBox .list ul li{}
	#bookBox .entitle{top:20px}
}
@media screen and (max-width:640px){
	#bookBox .list{width:80%}
	#bookBox .list ul li .img img{height:80vw}
	#newsBox{margin-top:0;width:100%}
	#about_area:before{bottom:48%;height:120px}
	#about_area:after{width:90px;left:70%}
	#about_area .aboutArea .ImgCenter .Img{margin-bottom:50px}
	section .entitle{font-size:54px}
	#bookBox:after{width:80px}
}
@media screen and (max-width:550px){#about_area:before{bottom:58%}
	#about_area  .marqueeBox .Img{width:540vw;-webkit-animation:marqueePhAni 28s linear infinite;animation:marqueePhAni 28s linear infinite}
	#about_area .marqueeBox{top:300px}}
@media screen and (max-width:400px){#about_area:before{bottom:62%}}
@media screen and (max-width:350px){#about_area:before{bottom:68%}}