#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0 2vw; }
section >* { z-index: 3; }
section .title_box { padding-bottom: 3vw;font-size: 38px; }
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
section .more_btn a  {background: linear-gradient(90deg, #881a1f, #172448);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);}
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.bg_box{background:no-repeat 50% / cover;background-attachment:fixed;background-image:url(/images/44/img-v-bg.png);padding:2vw 0;}

/* about_area */
section .track{position:absolute;bottom:-30px;left:-40px;z-index:1}
section .track p{font-weight:700;font-size:100px;margin:0;text-transform:uppercase;letter-spacing:6px;line-height:1;will-change:transform;color:#ededed;font-family:'Montserrat',sans-serif}
#slognBox .leftBox{width:460px}
#slognBox{position:relative;padding:5vw 0 10vw}
#slognBox .title_box{position:relative}
#slognBox .workframe{display:flex;justify-content:flex-end;width:min(90%,1560px)}
#slognBox .title_box h2{font-size:28px;text-align:left;line-height:120%;margin-bottom:10px;font-weight:600;color:#172448;position:relative;letter-spacing:2px;font-family:'Noto Sans TC'}
#slognBox .title_box font{line-height:120%;letter-spacing:2.4px;font-size:28px;font-weight:600;color:var(--primary)}
#slognBox .deck03{position:absolute;z-index:0}
#slognBox .deck03 img{width:100%}
#slognBox .deck03{bottom:-80px;right:0;z-index:3}
#slognBox .info_item{text-align:left;width:100%}
#slognBox .img_item{margin-bottom:10px;order:1;position:absolute;left: 270px;bottom:0;width: 800px;z-index:-1}
#slognBox .img_item img{width:100%}
#slognBox .info_item article{margin-bottom:30px;line-height:180%;letter-spacing:0.5px;font-weight:300;color:#000;width:100%}
#slognBox .info_item article .info h3{padding:0px 0 30px 0;font-size:20px;color:var(--black);font-weight:500;letter-spacing:0.5px;line-height:160%}
#slognBox .info_item article .info h3 span{}
#slognBox .info_item article .info p{width:100%;line-height:170%;letter-spacing:0.5px;font-weight:300;font-size:16px;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:13;height:360px;overflow:hidden}
#slognBox .rightBox{max-width:600px;height:590px;width:calc(100% - 600px);position:relative;left:0px;top:0;position:absolute;z-index:0}
#slognBox .processList .ImgBox{position:absolute;top:0px;right:230px;z-index:5;width:120px;-webkit-transform-origin:bottom center;transform-origin:bottom center;pointer-events:none}
#slognBox .processList .listItem .Img{display:flex;flex-direction:row;align-items:center}
#slognBox .processList .listItem .Img .title{position:absolute;bottom:35px;right:75%;-webkit-transform:translateY(-50%);transform:translateY(0%);letter-spacing:0.5px;font-weight:400;width:300px;display:flex;flex-direction:column;height:70px;align-items:flex-start;z-index:-1}
#slognBox .processList .listItem .Img .title:before{position:absolute;width:100%;height:1px;background:#8d8d8d;display:block;bottom:0px;left:0;content:""}
#slognBox .processList .listItem .Img .title .titleEn{letter-spacing:0.5px;font-size:26px;font-weight:600;color:var(--secondary);line-height:100%}
#slognBox .processList .listItem .Img .title .titleEn b{letter-spacing:0.5px;font-size:30px;font-weight:500;color:#c39a75;font-family:"Poppins",system-ui;vertical-align:baseline;line-height:100%}
#slognBox .processList .listItem .Img .title .titleTw{font-size:17px;color:#2c2c2c;font-weight:500;letter-spacing:0.5px}
#slognBox .processList .listItem:nth-child(2) .ImgBox{top:28%}
#slognBox .processList .listItem:nth-child(3) .ImgBox{top:56%}
#slognBox .processList .listItem .Img img{object-fit:cover;width:130px;aspect-ratio:1 / 1;height:100%;border-radius:50%;-webkit-box-shadow:0 4px 10px rgb(0 0 0 / 8%);box-shadow:0 6px 10px rgb(0 0 0 / 8%);border:10px solid rgb(255 255 255);-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
#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}
#slognBox .info_item .more_btn{right:0}
@-webkit-keyframes dotAni{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
80%{opacity:0.1;-webkit-transform:scale(1.3);transform:scale(1.3)}
100%{opacity:0;-webkit-transform:scale(1.4);transform:scale(1.4)}
}
@keyframes dotAni{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
80%{opacity:0.1;-webkit-transform:scale(1.3);transform:scale(1.3)}
100%{opacity:0;-webkit-transform:scale(1.4);transform:scale(1.4)}
}


/* news_area */
#news_area {padding: 0 0 5vw;display: grid;grid-template-columns: 45% 50%;justify-content: space-between;align-items: end;}
#news_area .fly-out{position:absolute;z-index: 9;bottom: 30px;right: 0px;}
#news_area .newBg{position:absolute;width: 60vw;height: 130%;background: #f6f6f6;right: 0;bottom: 0;z-index: -1;overflow: hidden;}
#news_area .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);}}
#news_area .ttBox .title_box {margin-left: 9vw;position: relative;}
#news_area .ttBox .bg {width:100%;height: 30vw;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;border-radius: 0 50px 50px 0;}
#news_area .info{position: relative;z-index: 0;}
#news_area .info::before{content: '';position: absolute;width: 1100px;height: 700px;background-color: #f5f5f5;right: 0;top: -60px;z-index: -1;border-radius: 50px 0 0 50px;}
#news_area .info .tit { width: 5em; }
#news_area .info .tit a { color: #000; }
#news_area .info .news_list {width: 70%;margin-bottom: 1vw;}
#news_area .info .news_list .slick-list { overflow: visible; }
#news_area .info .news_list li {position: relative;border-bottom: 1px solid #ddd;padding: 35px 0;}
#news_area .info .news_list li:last-child{border:0;}
#news_area .info .news_list .news_txt {position: relative;display: flex;gap: .5em 1em;flex-direction: column;}
#news_area .info .news_list .news_txt .time {color: #787777;font-family: "Nunito Sans", system-ui;font-size: 17px;font-weight: 600;}
#news_area .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;}
#news_area .info .news_list .news_txt .txt {height: auto;font-size: 19px;width: 90%;height: 30px;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
#news_area .info .news_list .news_txt span{position:absolute;right: 0px;bottom: 0;transform: rotate(-45deg);}
#news_area .info .news_list li:hover .news_txt span{    transform: rotate(0deg);}
#news_area .info .news_list .news_txt a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* custom_area */
#custom_area{padding:0 0 6vw}
#custom_area .workframe{width:min(90%,1560px)}
#custom_area .title_box h2{text-align:center}
#custom_area .title_box p{text-align:center}
#custom_area  .title_box .text{text-align:center}
#custom_area ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 40px}
#custom_area ul li{border-bottom:1px solid #e4e4e4;padding:20px 0px 20px}
#custom_area ul li .Img{text-align:center}
#custom_area ul li .Img img{width:60px;aspect-ratio:1 /1;object-fit:contain}
#custom_area ul li >div{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:20px}
#custom_area ul li .textBox{position:relative;display:grid;grid-template-columns:1fr 10px;align-items:center}
#custom_area ul li .textBox .stxt{position:absolute;top:-22px;opacity:.5;color:var(--complement);font-family:"Poppins",system-ui}
#custom_area ul li .clip{width:130px;aspect-ratio:1/1;border:2px solid var(--complement);display:flex;align-items:center;justify-content:center;border-radius:90px;margin-top:-15px;outline:1px solid rgb(255 255 255 / 30%);outline-offset:-8px;position:relative}
#custom_area ul li .clip:after{content:'';position:absolute;width:calc(100% + 15px);height:calc(100% + 15px);border:1px var(--complement) dashed;border-radius:80px;-webkit-animation-name:circle;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-duration:20s;opacity:.5}
#custom_area ul li .clip img{width:60px;height:60px}
#custom_area ul li .stepTitle{display:flex;align-items:flex-start;flex-direction:column}
#custom_area ul li .stepTitle h3{font-size:17px;color:var(--info);font-weight:400;letter-spacing:1px;position:relative}
#custom_area ul li .stepTitle .stepText{font-size:12px;text-transform:uppercase;color:#848484}
#custom_area ul li:hover .stepTitle h3,#custom_area ul li:hover .stepTitle .stepText{color:#c39a75}

/* product_area */
#product_area {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 4%;padding: 4vw 0 5vw 0;}
#product_area .title_box {padding-left: 5%;width: 300px;display: flex;flex-direction: column;gap: .5em;}
#product_area .title_box h2{font-size:50px;word-spacing:100vw}
#product_area .title_box .sub_title { position: relative; }
#product_area .title_box .sub_title:before { position: absolute; width: 6px; height: 6px; border-radius: 50%; background-color: var(--complement); top: -15px; content: ""; }
#product_area .title_box .bookbtn { margin-top: 1em; display: flex; align-items: center; gap: 3%; }
#product_area .title_box .bookbtn button {width: 66px;height: 35px;background: linear-gradient(90deg, #881a1f, #172448);border-radius: 35px;}
#product_area .title_box .bookbtn button img { width: 45%; height: 80%; object-fit: contain; filter: brightness(100); }
#product_area .title_box .bookbtn button:nth-child(1) { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
#product_area .boxx { width: 1%; flex: 1 1 auto; }
#product_area .boxx li {display: flex;flex-direction: column;gap: .5em;}
#product_area .boxx li >* { margin-right: 10%; max-width: 90%; }
#product_area .boxx li .img_box { border-radius: 1em; }
#product_area .boxx li .img_box img{    aspect-ratio: 4 / 3;}
#product_area .boxx li h3 {font-size: 18px;font-weight: 500;text-align: center;letter-spacing: 1px;height: 60px;margin-top: 10px;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
#product_area .boxx li p {height: 58px;-webkit-line-clamp: 2;font-size: 16px;margin-top: 10px;}

@media screen and (max-width:1460px){
	#slognBox .img_item{width:650px;left:15%}
	#about_area .about_sub_1,#about_area .about_sub_2,#about_area .about_sub_3{width:20vw}
	#product_list{width:500px;margin-left:30px}
	#product_list li .clip{height:590px}
	#about_area .about_sub_2{top:-20vw;right:6vw}
}
@media screen and (max-width:1280px){
	#slognBox{padding-bottom:8vw}
	#slognBox .workframe{display:flex;flex-direction:column-reverse}
	#slognBox .img_item{position:relative;left:0;top:0;width:100%;margin:0;transform:unset}
	#slognBox .leftBox{width:100%;padding-left:0;display:flex;flex-direction:column;margin-bottom:50px}
	#slognBox .rightBox{width:100%;max-width:100%;left:0;top:0;position:relative;height:auto}
	#slognBox .rightBox ul{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-content:center}
	#slognBox .info_item article .info p{height:auto}
	#slognBox .info_item .more_btn{position:relative;margin-bottom:50px;padding-left:0}
	#slognBox .processList .listItem .Img{position:relative}
	#slognBox .processList .ImgBox{left:0;position:relative}
	#slognBox .processList .listItem:nth-child(2) .ImgBox,#slognBox .processList .listItem:nth-child(3) .ImgBox{top:0}
	#slognBox .processList .listItem{margin-bottom:20px}
	#slognBox .processList .listItem .Img .title{position:unset;margin-left:20px}
	#slognBox .processList .listItem .Img .title:before{display:none}
	#slognBox .processList .listItem .Img .title .titleEn{width:300px;font-size:23px}
	#slognBox .deck03{bottom:340px;width:240px;right:-70px}
	#news_area .info::before{width:760px}
	#product_list{margin:auto}
	#news_area li h3{height:30px;-webkit-line-clamp:1}
}
@media screen and (max-width:1024px){
	section{padding-top:10vw}
	#custom_area ul{grid-template-columns:repeat(2,1fr)}
	#news_area .ttBox .bg{height: 350px;width: 90%;}
	#news_area .newBg{width:100vw}
	#news_area .fly-out{display:none}
	#news_area{display:block}
	#news_area >.info{width:90%;margin:30px auto 0}
	#news_area .info .news_list{width:100%}
	#news_area .info::before{display:none}
	#product_area{display:flex;flex-direction:column;align-items:flex-start;width:90%;padding:4vw 2vw 13vw}
	#product_area .title_box .bookbtn{display:flex;justify-content:flex-start;margin-top:0}
	#product_area .title_box{padding-bottom:5%}
	#product_area .boxx{width:100%;flex:none}
	#product_area .boxx li >*{margin:0 5%;max-width:90%}
	#about_area #about_info{margin-bottom:8vw}
	#about_area .about_sub_2{top:auto;bottom:35vw;width:35vw}
	#about_area .about_sub_3{width:29vw;left:10vw}
}
@media screen and (max-width:768px){
	section{padding:8vw 0 2vw}
	#slognBox .rightBox ul{grid-template-columns:repeat(1,1fr)}
	#custom_area ul{grid-template-columns:repeat(1,1fr)}
	section .title_box font{font-size:20px}
	section .title_box h2,section .title_box h2 b{font-size:50px}
}
@media screen and (max-width:550px){
	#product_area .title_box h2{font-size:40px}
	#product_area .title_box{gap:0}
	#product_area .title_box font{}
	#about_area #about_img{width:80vw}
	#about_area .about_sub_2{bottom:60vw}
	#news_area li .row{margin:auto;width:280px}
}