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 .title_box{margin-bottom:20px}
section .title_box font{text-transform:uppercase;line-height:120%;letter-spacing: 5.4px;font-size: 30px;font-weight: 500;color: var(--info);margin-bottom:15px;padding-bottom:15px}
section .title_box h2{font-size: 75px;text-align:left;line-height:120%;margin-bottom:10px;font-weight: 600;color: var(--info);position:relative;text-transform:uppercase;font-family: "Poppins", system-ui;letter-spacing: 2px;}
section .title_box h2 b{font-size: 75px;text-align: left;line-height: 120%;margin-bottom: 10px;font-weight: 600;color: var(--primary);position: relative;text-transform: uppercase;font-family: "Poppins", system-ui;letter-spacing: 2px;margin-left: 20px;vertical-align: baseline;}
section .more_btn a  {background: linear-gradient(90deg, var(--secondary), var(--primary));display: inline-flex;align-items: center;padding: 20px 35px;border-radius: 50px;color: var(--white);}
section .more_btn span  {margin-left: 50px;}
section .more_btn span img  {transform: rotate(-45deg);}
section .more_btn:hover span img{transform: rotate(0deg);}

#slognBox{position:relative;padding:5vw 0 14vw}
#slognBox .title_box{position:relative}
#slognBox  {padding: 110px 0 470px;}
#slognBox  .workframe{width: min(90%, 1620px);}
#slognBox .deck02,#slognBox .deck03{position:absolute;z-index:0}
#slognBox .deck02{left: 23%;bottom: 110px;z-index:30}
#slognBox .deck03{bottom: 7px;left: -35%;z-index:0}
#slognBox .info_item{text-align:left;width: 35%;display: block;margin: 0;}
#wrap .aboutAreaBG{position:absolute;height:2300px;width:0;top:0px;right:-800px;background:var(--secondary);z-index:0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out;-webkit-transform:skew(-30deg);transform:skew(-30deg)}
#wrap.tooolong .aboutAreaBG{width:1400px}
#slognBox .img_item{margin-bottom:10px;order:1;position:absolute;left: 380px;top:90px;width:55%}
#slognBox .img_item img{width:100%}
#slognBox .info_item article{margin-bottom:50px;margin-top: 60px;line-height: 2.2;letter-spacing:0.5px;font-weight: 400;color:#000;width: 90%;}
#slognBox .info_item article .info h3{padding:0px 0 20px 0;font-size:21px;color:var(--info);font-weight:600;letter-spacing:0.5px;line-height:160%}
#slognBox .info_item article .info p{width:100%;margin-top:20px;line-height:200%;letter-spacing:0.5px;font-weight:400;font-size:16px}
#slognBox .info_item article .textEditor h2{font-size:20px;padding-bottom:20px}
#slognBox .info_item article .textEditor p{line-height:180%;font-weight:400}
#slognBox::after{content:url(/images/37/blurred-glass-buildings.png);position: absolute;bottom: 0;right: 0;z-index: 0;}
#slognBox.tooolong:after{height:430px}
#slognBox:before{content:url(/images/37/shadow.png);position: absolute;top: -130px;left: -150px;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes fish{0%{transform-origin:left top;transform:rotate(-3deg);}100%{transform-origin:left top;transform:rotate(3deg);}}
@keyframes bgWhirligig-2{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}#services_area{background-color:#f9f9f9;background-image:url(/images/43/img-sbg.jpg);background-position:50% -30%;background-repeat:no-repeat;margin:0;padding:70px 0;overflow:hidden}
#slognBox .rightBox{max-width: 650px;height: 650px;margin-left:auto;margin-right:auto;width:calc(100% - 600px);padding:60px;right: 12%;top: 100px;position:absolute;}
#slognBox .processList .ImgBox{position:absolute;top: 0px;left:calc(50% - 80px);z-index:5;width:120px;height:45%;-webkit-transform-origin:bottom center;transform-origin:bottom center;pointer-events:none}
#slognBox .processList .slick-current .ImgBox .Img{border-color: var(--primary);}
#slognBox .processList .listItem .Txt{opacity:0;display:none;visibility:visible;-webkit-transition:transform 1s ease-out 0.3s,opacity 1s ease-out 1.7s;transition:transform 1s ease-out 0.3s,opacity 1s ease-out 1.7s;right:0;text-align:center}
#slognBox .processList .listItem:nth-child(1) .Txt{opacity:1;display:none}
#slognBox .processList .listItem .Img{display:flex;-webkit-box-pack:center;-webkit-box-align:center;width:110px;border-radius:50%;-webkit-box-shadow:0 4px 10px rgb(0 0 0 / 8%);box-shadow:0 6px 10px rgb(0 0 0 / 8%);pointer-events:auto;flex-direction:column;align-items:center;border: 13px solid rgb(255 255 255);-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;aspect-ratio: 1 / 1;}
#slognBox .processList .listItem:nth-child(1) .ImgBox{-webkit-transform:rotate(36deg);transform:rotate(36deg)}
#slognBox .processList .listItem:nth-child(1) .Img{-webkit-transform:rotate(-36deg);transform:rotate(-36deg)}
#slognBox .processList .listItem:nth-child(2) .ImgBox{-webkit-transform:rotate(72deg);transform:rotate(72deg)}
#slognBox .processList .listItem:nth-child(2) .Img{-webkit-transform:rotate(-72deg);transform:rotate(-72deg)}
#slognBox .processList .listItem:nth-child(3) .ImgBox{-webkit-transform:rotate(108deg);transform:rotate(108deg)}
#slognBox .processList .listItem:nth-child(3) .Img{-webkit-transform:rotate(-108deg);transform:rotate(-108deg)}
#slognBox .processList .listItem:nth-child(4) .ImgBox{-webkit-transform:rotate(144deg);transform:rotate(144deg)}
#slognBox .processList .listItem:nth-child(4) .Img{-webkit-transform:rotate(-144deg);transform:rotate(-144deg)}
#slognBox .processList .focus .Img{border-radius:50%;position:relative;border:10px solid #003ca6;cursor:pointer}
#slognBox .processList .listItem .Img .title{position:absolute;bottom:10px;left: 160px;letter-spacing:0.5px;font-weight:400;width:180%;display:flex;flex-direction:column;border-bottom: 1px solid #9d9c9c;padding-bottom: 11px;}

#slognBox .processList .listItem .Img .title .titleEn{letter-spacing:0.5px;font-size:22px;font-weight: 500;color:var(--primary);font-family: "Poppins", system-ui;}
#slognBox .processList .listItem .Img .title .titleEn b{letter-spacing:0.5px;font-size:22px;font-weight: 500;color:var(--primary);font-family: "Poppins", system-ui;vertical-align: baseline;}
#slognBox .processList .listItem .Img .title .titleTw{font-size: 19px;color:var(--info);font-weight:500;letter-spacing:0.5px}
#slognBox .processList .focus .Txt,#slognBox .processList .listItem:nth-child(1) .Txt{opacity:1;width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);display:none;position:absolute;z-index:5;border-radius:50%;background-color:#fff;padding:20px}
#slognBox .processList .listItem .Txt .text{background:-webkit-gradient(linear,left top,right top,from(var(--secondary)),to(var(--complement)));background:linear-gradient(to right,var(--secondary),var(--complement));background-clip:text;-webkit-background-clip:text;color:transparent;font-size:50px;font-weight:900;line-height:120%;margin-top:20px;background-size:20%;font-family:'Josefin Sans'}
#slognBox .processList .listItem .Txt .text,#slognBox .processList .listItem .Txt .text-clamp,#slognBox .processList .listItem .Txt .boxtext{text-align:center}
#slognBox .processList .listItem .Txt .titleSub{font-style:initial;color:var(--triadic2)}
#slognBox .processList .listItem .Txt .text-clamp{font-size:30px}

#slognBox .processList .listItem .Txt .boxtext{font-weight:400;font-size:16px}
#slognBox .processList .listItem .Txt .more{margin-top:10px}
#slognBox .processList .listItem .Img img{border-radius:50%;width:120px;object-fit:cover;aspect-ratio: 1 / 1;}
#slognBox .processList .focus .Img img:first-child{opacity:1}
#slognBox .processList .listItem.active .Img img:nth-child(2),#slognBox .processList .listItem:hover .Img img:nth-child(2){opacity:1;visibility:visible}
#slognBox .processList .listItem.active .Img::before,#slognBox .processList .listItem:hover .Img::before{opacity:1}
#title_boxwow01{margin-bottom:30px;width:100%}
#slognBox .leftBox .slognBtnItem{display:flex}
#slognBox .leftBox .slognBtnItem .slognBtn{opacity:1;padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#slognBox .leftBox .slognBtnItem .slognBtn> a:hover{color:var(--secondary)}
#slognBox .leftBox .slognBtnItem .slognBtn .btn{width:100px;height:110px;border-radius:50%;position:relative;background:-webkit-gradient(linear,left top,right top,from(var(--secondary)),to(var(--complement)));background:linear-gradient(to right,var(--secondary),var(--complement));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#slognBox .leftBox .slognBtnItem .slognBtn .btn:hover{background-color:var(--secondary)}
#slognBox .leftBox .slognBtnItem .slognBtn .btn span{color:#000304;border:4px solid #fff;width:100px;height:90px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background-color:#fff;font-size:18px}
#slognBox .leftBox .slognBtnItem .slognBtn .btn::before{content:"";position:absolute;background-image:url("/images/39/arrowLink.png");background-repeat:no-repeat;background-position:center;background-size:contain;z-index:1;width:20px;height:17px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:50%;left:50%}
#slognBox .leftBox .slognBtnItem .slognBtn .btn::after{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;z-index:-1;background-color:#bdbdbd;-webkit-animation:dotAni 1.2s infinite ease-out forwards;animation:dotAni 1.2s infinite ease-out forwards}

/* newsBox */
#newsBox {padding: 0 0 5vw;display: grid;grid-template-columns: 45% 50%;justify-content: space-between;align-items: end;}
#newsBox .fly-out{position:absolute;z-index: 9;bottom: 30px;right: 0px;}
#newsBox .newBg{position:absolute;width: 60vw;height: 130%;background: #f6f6f6;right: 0;bottom: 0;z-index: -1;overflow: hidden;}
#newsBox .newBg:before{content:url(/images/37/shadow2.png);position: absolute;top: -50px;right: -310px;animation-name: shadow;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 5s;}
@keyframes shadow{0%{transform-origin:right top;transform:rotate(-3deg);}100%{transform-origin:right top;transform:rotate(3deg);}}
#newsBox .ttBox .title_box {margin-left: 13vw;border-bottom: 1px solid #ddd;padding-bottom: 40px;width: 40%;position: relative;margin-bottom: 4vw;}
#newsBox .ttBox .bg {width:100%;height: 30vw;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#newsBox .ttBox .title_box:after{content:'';position: absolute;width: 80px;height: 1px;background: var(--complement);bottom: -1px;}
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list {width: 70%;margin-bottom: 1vw;}
#newsBox .info .news_list .slick-list { overflow: visible; }
#newsBox .info .news_list li {position: relative;border-bottom: 1px solid #ddd;padding: 35px 0;}
#newsBox .info .news_list li:last-child{border:0;}
#newsBox .info .news_list .news_txt {position: relative;display: flex;gap: .5em 1em;flex-direction: column;}
#newsBox .info .news_list .news_txt .time {color: #787777;font-family: "Nunito Sans", system-ui;font-size: 17px;font-weight: 600;}
#newsBox .info .news_list .news_txt .time b{color: #787777;font-family: "Nunito Sans", system-ui;font-size: 17px;vertical-align: baseline;margin-right: 15px;border-right: 2px solid #cbcbcb;padding-right: 15px;font-weight: 600;}
#newsBox .info .news_list .news_txt .txt {height: auto;font-size: 19px;width: 90%;}
#newsBox .info .news_list .news_txt span{position:absolute;right: 0px;bottom: 0;transform: rotate(-45deg);}
#newsBox .info .news_list li:hover .news_txt span{    transform: rotate(0deg);}
#newsBox .info .news_list .news_txt a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* productBox */
#productBox:before{content:'';position:absolute;height:40px;width:75%;top: -40px;left:-130px;background:var(--primary);z-index:20}
#productBox  .fly-out{position:absolute;z-index: 9;top: 0;right: -80px;}
#productBox  .title_box {position:absolute;top: -90px;right: 10vw;margin: 0;}
#productBox ul {margin-top: 3vw;}
#productBox ul li {position: relative;margin: 0 20px;}
#productBox ul li >a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox ul li .img {overflow: hidden;position: relative;border-radius: 500px;}
#productBox ul li .img:before {position: absolute;width: 100%;height: 100%;background: #030303;display: block;top: 0;left: 0;opacity: .1;z-index: 2;content: "";}
#productBox ul li:hover .img:before{opacity:.4}
#productBox ul li .img img {position: relative;width: 100%;object-fit: cover;z-index: 1;aspect-ratio: 2 / 4;}
#productBox ul li .info {position: absolute;z-index: 2;margin: 0;border-radius: 0;height: calc(100% - 240px);padding: 120px 0;top: 0;display: flex;flex-direction: column;align-items: center;overflow: hidden;}
#productBox ul li .info h3 {margin: 10px 0;height: auto;font-weight: 400;font-size: 22px;color: var(--white);text-shadow: 0 0 10px rgb(0 0 0 / 80%);text-align: center;padding: 0px 65px;display: block;}
#productBox ul li .info article {height: auto;font-weight: 400;font-size: 14px;color: var(--white);-webkit-line-clamp: 1;font-family: "Poppins", system-ui;text-transform: uppercase;letter-spacing: .75px;text-shadow: 0 0 10px rgb(0 0 0 / 80%);}
#productBox ul li .info .more_btn{text-align:center;position: absolute;bottom: -70px;}
#productBox ul li:hover .info .more_btn{bottom:60px}
#productBox ul li .info .more_btn a{background:none}
#productBox ul li .info .more_btn span {margin-left:25px;}
#productBox .slick-prev{left:-110px;}
#productBox .slick-prev:before {content:url(/images/37/arrow-left.png)}
#productBox .slick-next{right:-110px;}
#productBox .slick-next:before {content:url(/images/37/arrow-right.png)}

/* aboutBox */
#aboutBox { background: none; z-index: 5; }
#aboutBox:before { position: absolute; width: 83%; height: 100%; background: #f1f4f6; display: block; top: 0; right: 0; z-index: 1; content: ""; }
#aboutBox .bg { width: 61%; height: 70%; background-attachment: fixed; top: 10%; right: 0; left: auto; opacity: 1; z-index: 3; }
#aboutBox .info { width: 45%; }
#aboutBox .info .title { margin: 0 5vw 2vw; text-align: left; }
#aboutBox .info .txtBox { position: relative; padding: 7vw 10vw 7vw 5vw; background: url(/userfiles/images/20200525120633201.jpg) no-repeat 50% / cover; }
#aboutBox .info .txtBox:before { position: absolute; width: 100%; height: 100%; background: rgb(68 68 68 / .7); top: 0; left: 0; content: ""; z-index: 1; }
#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: 17px; color: #fff; }
#aboutBox .info .txtBox .more { margin-top: 80px; text-align: left; }
#aboutBox #SeoStarRating font { vertical-align: middle; }
#aboutBox #SeoStarRating font:last-child { color: #fff; }
#aboutBox #SeoStarRating .fa { vertical-align: initial; }

/* secabout */
#secabout { margin-top: -5vw; padding: 20vw 0 10vw; background: url(/images/37/img-secaboutBg.jpg) no-repeat 50% / cover; z-index: 1; }
#secabout:before { position: absolute; width: 87vw; height: calc(100% - 20vw); background: #fff; display: block; top: 15vw; left: 0; content: ""; z-index: 1; }
#secabout >div { position: relative; margin: 0 auto 50px; 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; }

/* bookBox */
#bookBox{padding-top: 3vw;}
#bookBox .workframe{width:min(90%, 1550px)}
#bookBox .fly-out{position:absolute;z-index: 9;top: 30px;left: 270px;}
#bookBox .title_box *{text-align:center;}
#bookBox .topBox { position: relative; margin: 0 auto 5vw; width: 80vw; }
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list {margin-top:3vw}
#bookBox .list ul li{position:relative;margin: 0 25px;}
#bookBox .list ul li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#bookBox .list ul li .img {overflow: hidden;position: relative;z-index: 1;}
#bookBox .list ul li .img img {position: relative;width: 100%;object-fit: cover;z-index: 1;aspect-ratio: 4 / 3;}
#bookBox .list ul li .info {position: relative;margin-top: 15px;}
#bookBox .list ul li .info h3 {height: auto;font-weight: 400;font-size: 20px;text-align: center;}
#bookBox .list ul li .info .more { text-align: left; }

@media screen and (max-width:1700px) {
	#slognBox .rightBox {right: 9%;}
	#productBox .workframe{width: min(85%, 1400px);}
	#productBox .slick-prev{left:-80px;}
	#productBox .slick-next{right:-60px;}
	#newsBox .ttBox .bg{height: 40vw;}
}
@media screen and (max-width:1440px) {
	#newsBox .newBg:before{width: 90%;right: -130px;}
	#slognBox .deck03{left: -50%;}
	section .title_box h2, section .title_box h2 b{font-size:65px;}
	section .title_box font{font-size:27px}
	#slognBox .img_item{left:300px}
	#aboutBox .bg { width: 50%; }
	#aboutBox .info { width: 55%; }
}
@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; }
}
@media screen and (max-width:1280px) {
	#bookBox .fly-out{left: 40px;}
	#secabout #youtubeBox { width: 90vw; }
	#bookBox .list ul li{margin:0 20px}
}
@media screen and (max-width:1024px) {
	#newsBox .newBg{width:100vw}
	#newsBox .fly-out{display:none;}
	#newsBox{display:block;}
	#newsBox >.info{width:90%;margin: 30px auto 0;}
	#newsBox .info .news_list{width:100%;}
	#productBox:before{width: 70%;}
	#slognBox{padding-bottom:200px}
	#slognBox .deck03{display:none;}
	#slognBox .rightBox{width: calc(100% - 400px);max-width: 500px;height: 600px;top: 33vw;right: 19%;}
	#slognBox .img_item{position:relative;left: 0;width: 70%;top: 0;}
	#slognBox .leftBox{display:flex;flex-direction: column;}
	#slognBox .info_item{width:100%}
	section .more a { padding: 10px 80px 10px 20px; }
	#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; }
}
@media screen and (max-width:980px) {
	#productBox:before{width: 60%;}
	#slognBox .processList .listItem .Img .title{width: 50%;bottom: -50px;}
	#slognBox .processList {display:grid;grid-template-columns: repeat(2, 1fr);gap: 25px;}
	#slognBox .processList .ImgBox *{transform: none !important;}
	#slognBox .processList .ImgBox{position:relative;transform: none !important;!i;!;transform-origin: unset;left: 0;width: 100%;}
	#slognBox .img_item{width: 90%;margin: 0 auto;}
	#slognBox .rightBox{position:relative;width: 100%;max-width: 100%;height: auto;top: 0;right: 0;padding: 0;margin-top: 50px;}
	#slognBox .deck02{display:none;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#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{margin-top:8vw}
	#bookBox {padding: 7vw 0;}
	section{padding:13vw 0}
	#bookBox .fly-out{display:none;}
}
@media screen and (max-width:640px) {
	#newsBox .newBg:before{zoom: 40%;right: -340px;}
	#newsBox .ttBox .title_box{margin: 0 auto;width: 90%;}
	#newsBox .ttBox .bg{display:none;}
	#newsBox{padding-top: 10vw;}
	#newsBox .newBg{height:100%;}
	#productBox .fly-out{right: -110px;}
	#productBox .fly-out img{width:80%;}
	#slognBox{padding-bottom: 150px;}
	#slognBox .processList{grid-template-columns: repeat(1, 1fr);}
	#slognBox .info_item article{width:100%;}
	section .title_box font{font-size: 23px;}
	section .title_box h2, section .title_box h2 b{font-size: 50px;}
}