/*ginbox*/
#ginbox{position:relative;display:flex;flex-direction:column;align-items:center;background:white;padding:50px 0 35px}
#ginbox .titleJP{display:flex}
#ginbox .titleJP h2{font-size:34px;color:#494949}
#ginbox .bawan{display:flex;width:100%;align-items:center;justify-content:center;margin-top:20px}
#ginbox .bitem{display:flex;flex-direction:column;align-items:center;width:10.3%;padding:20px 2%;margin:0 0}
#ginbox .badot{width:6px;height:6px;background:#494949;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;margin:0 4px}
#ginbox .badot.shaw{background:#f4b362}
#ginbox .bitem p{font-size:21px;font-weight:500;color:#ffa93d;margin-bottom: 5px;}
#ginbox .bitem span{font-size:16px;color:#494949;font-weight:400}
#ginbox .bitem svg{width:50px;border:#bdbdbd 1px solid;border-radius:50%;padding: 15px;margin:10px 0;fill:#636363;transition:all linear 0.3s}
#ginbox .bitem.Jboom svg{width:50px;border:#f4b362 1px solid;fill:#f4b362}

/* industry */
#industry{position:relative;background:white;padding:80px 0 60px}
#industry:before{content:"";position:absolute;width:100%;height:500px;bottom:-74px;background-position:50% 118%;background-repeat:no-repeat;-webkit-filter:drop-shadow(0px 18px 7px #7d7d7d54);filter:drop-shadow(0px 18px 7px #7d7d7d2b);z-index:-1}
#industry .sence{position:relative;padding:60px 50px 80px;border:#e6e6e6 1px solid;border-radius:0px 0px 20px 20px;max-width:calc(95% - 100px);margin-top:0;flex-direction:column}
#industry .matime{display:flex;align-items:center;position:relative;width:1366px;padding:8px 50px 8px;max-width:calc(95% - 100px);margin:0 auto;background:#f5f5f5;border:#e9e9e9a6 1px solid}
#industry .matime .lemt{display:flex;align-items:center}
#industry .matime .remt{display:flex;flex:1;justify-content:flex-end}
#industry .matime span{font-size:25px;font-weight:500;color:#494949}
#industry .matime img{width:55px}
#industry .dembox{display:flex}
.jumbo::after{content:"";position:absolute;inset:0;background-image:var(--stripes),var(--rainbow);background-size:200%,100%;-webkit-animation:jumbo 60s linear infinite;animation:jumbo 50s linear infinite;background-attachment:fixed;mix-blend-mode:difference;z-index:-9999}
@-webkit-keyframes jumbo{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
@keyframes jumbo{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
.jumbo{position:absolute;width:100%;height:100%;left:0;top:0;--stripes:repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);--stripesDark:repeating-linear-gradient(100deg,#000 0%,#000 7%,transparent 10%,transparent 12%,#000 16%);--rainbow:repeating-linear-gradient(  100deg,#fffbfc 10%,#f7e9eb 15%,#fff4f8 20%,#f4e8e9 25%,#fffbfb 30% );background-image:var(--stripes),var(--rainbow);background-size:300%,200%;background-position:50% 50%,50% 50%;filter:blur(10px) invert(100%);-webkit-mask-image:radial-gradient(ellipse at 100% 0%,#00000063 40%,#0000003b 70%);mask-image:radial-gradient(ellipse at 100% 0%,black 40%,transparent 70%);pointer-events:none}
#industry .titletm, #mshareBox .titletm{position:relative;display:flex;flex-direction:column;align-items:center}
#industry #sub-industry .pass{display:none}
#industry #sub-industry .pass{flex-wrap:wrap;width:100%;display:none}
#industry #sub-industry .pass >div{display:flex;width: calc(25% - 40px);flex-direction:column;margin: 20px;}
#industry #sub-industry .pass >div a{display:flex;flex-direction:column;align-items:center}
#industry #sub-industry .pass >div img{border-radius: 20px;outline:1px solid #ffffff61;outline-offset:-14px}
#industry #sub-industry .pass >div:hover img{-moz-transform:translateY(-0.25em);-webkit-transform:translateY(-0.25em);-o-transform:translateY(-0.25em);-ms-transform:translateY(-0.25em);transform:translateY(-0.25em)}
#industry #sub-industry .pass >div span{font-size:19px;line-height:180%;margin-left:3px;margin-top:15px}

/* main-industry */
#main-industry{display:flex;flex-direction:column;width:110px;margin-right:10px;padding-right:10px;border-right:#dedede 1px solid;padding-left: 20px;}
.topimgJy{display:flex;margin-left:-8px;margin-top:-11px;margin-bottom:10px}
.topimgJy img{width:83px;padding:2px;border-radius:67px}
#main-industry a{position:relative;padding:4px 0;font-size:18px;color:#494949}
#main-industry a.atvava{color:#f4b362}
#main-industry a:hover{color:#f4b362}
#main-industry a:before{content:"";position:absolute;width:6px;height:6px;background:#ffbf6f;left:-17px;top:14px}
#sub-industry{position:relative;display:flex;width:calc(100% - 130px);}
#industry #sub-industry .show{display:flex;}
.dumore{display:flex;justify-content:center}
.dumore a{padding: 9px 10px 9px 20px;border-radius:80px;margin:8px 0;color:#494949;display:flex;border:#49494959 1px solid;font-size: 16px;font-weight:400;align-items: center;}
.dumore a b{font-weight:400;font-size:15px;width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;background: #f4b362;margin-left: 10px;border-radius: 50px;}
.dumore a:hover b{order:-1}
.dumore a:hover{background:#f4b362;color:white;border: #f4b362 1px solid;padding: 9px 20px 9px 10px;}
.dumore a svg{width: 17px;fill: #fff;transition:all linear 0.2s}
.titletm-JJ{position:relative;z-index:98;display:flex;flex-direction:column;align-items:center}
.titletm-JJ:before{content:"";position: absolute;width: 86%;aspect-ratio: 1/1;background: #ffffff;z-index: -1;border-radius: 555px;bottom: 0;margin-left: -5px;}
/* mshareBox */
#mshareBox{position:relative;padding: 0;display: flex;flex-direction: column;align-items: center;width: 100%;}

#shareBox{border-radius: 20px;filter: drop-shadow(0px 11px 8px rgba(18, 18, 18, 0.05));display: flex;width: 100%;flex-direction: column;}
#shareBox:after{content:"";position: absolute;background: url(/images/37/Shape-star.png);width: 4vw;background-repeat: no-repeat;background-size: cover;aspect-ratio: 1/1;top: -10vw;right: -7vw;animation: spin 6s linear infinite;}
#shareBox:before{content:"";position: absolute;background: url(/images/37/Shape-star.png);width: 4vw;background-repeat: no-repeat;background-size: cover;aspect-ratio: 1/1;top: -3vw;left: -8vw;animation: spin 6s linear infinite;}

#shareBox li{background: #f6f6f6;border-radius: 20px;outline: 1px solid rgb(0 0 0 / 15%);outline-offset: -15px;margin: 20px;position: relative;}
#shareBox li .text{padding:50px;position: relative;}
#shareBox li .dudutitle{color: #302521;font-size: max(1.2*(1vw + 1vh) / 2, 20px);margin-bottom: 10px;font-weight: 600;}
#shareBox .mocate{
    position: absolute;
    background: #a47d49;
    padding: 11px 25px;
    border-radius: 0 0 20px 20px;
    color: #ffffff;
    right: 10%;
    font-weight: 300;
}
#shareBox li p{color: var(--secondary);font-size: 14px;font-family:"Noto Sans TC","Montserrat","Arial","Arial Narrow";}
#shareBox li .articleJt{overflow: hidden;height: 78px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;font-size: 15px;margin-top: 20px;color: #302521;letter-spacing: 0.1em;font-weight: 300;}
#shareBox .slick-dots li button{width: 10px;height: 2px;padding:6px}
#shareBox .slick-dots li button:before{content:'';width: 10px;height: 1px;line-height:0px;background: #000;}
#shareBox .slick-dots{position:relative;margin-top: 15px;bottom:0}
#shareBox .slick-dots li{width: 10px;height: 1px;display:inline-flex;background: none;border-radius: unset;margin: 0 5px;outline-offset: unset;outline: unset;}
#mshareBox .btnBox{display:flex;flex-direction:column;align-items:center;margin-top:55px}
#mshareBox .indownindo{padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#mshareBox .indownindo:before{content:"";position: absolute;width: 30vw;height: 1px;background: #ababab;left: -20vw;}
#mshareBox .indownindo:after{content:"";position: absolute;width: 30vw;height: 1px;background: #ababab;right: -20vw;}
#mshareBox .indownindo .indotitle{font-size: max(2 * (1vw + 1vh) / 2, 29px);margin: 30px 0 20px;line-height: 180%;}
#mshareBox .indownindo p{text-align: center;}
@media screen and (max-width:1680px){
	#ginbox{padding-top:0;}
}
@media screen and (max-width:1470px){
	#ginbox .bitem img{width:70px}
	#ginbox{padding:0 0 5px}
	#mshareBox .workframe{width: min(1200px, 90%);}
	#shareBox{padding: 77px 10px 15px;background: unset;}
	.titletm-JJ img{width: 145px;}
	#shareBox li{outline-offset: -13px;margin: 6px;}
	#shareBox:before{left: 1vw;top: -9vw;}
	#shareBox:after{right: 2vw;top: -12vw;}
	#shareBox li .text{
    padding: 30px;
}
}
@media screen and (max-width:1300px){
	#mshareBox .workframe{width:90%;}
}
@media screen and (max-width:1160px){
	#ginbox .bitem{width:27.3%}
	#industry #sub-industry .pass >div{width: calc(50% - 40px);}
}
@media screen and (max-width:980px){
	#industry .matime{max-width:calc(100% - 40px);padding:5px}
	#industry .matime img{width:52px}
	.dumore a{font-size:14px;padding:8px 20px}
	.dumore a:hover svg{margin-left:30px}
	#industry .sence{display:flex;flex-direction:column;padding: 5px 0;width: calc(100% - 30px);max-width: calc(100% - 30px);margin: 0 auto;border-radius: 0;border-top: 0;}
	#industry .dembox{flex-direction:column}
	#main-industry{width:95%;margin-left:5%;display:flex;flex-wrap:wrap;flex-direction:row;margin-bottom:10px;padding-bottom:10px;border-bottom:#dedede 1px solid;border-right:none;padding:20px 0}
	#sub-industry{width:calc(100% - 0px)}
	#industry #sub-industry .pass >div span{font-size:17px}
	.topimgJy{margin-left:0;margin-top:0;margin-bottom:0;width:100%;display:none}
	#main-industry a{width:25%;display:flex}
	#main-industry a:before{left:-10px}
	#industry #sub-industry .pass >div{width: calc(50% - 40px);}
	#mshareBox .indownindo:after, #mshareBox .indownindo:before{display: none;}
}
@media screen and (max-width:780px){
	#main-industry a{width:33.3%;}
}
@media screen and (max-width:640px){
	#industry #sub-industry .pass >div{width: calc(50% - 20px);margin: 10px;}
	#ginbox .badot{width:4px;height:4px;margin:0 1px}
	#ginbox .bitem svg{width:40px;height:40px}
	#ginbox .bitem.Jboom svg{width:40px;height:40px}
	.titletm-JJ:before{display:none;}
	#shareBox{padding-top: 0;}
}
@media screen and (max-width:480px){
	.jumbo{display:none;}
	#main-industry{padding-left: 12px;width: calc(95% - 22px);}
	#industry .matime{flex-direction: column;align-items: center;padding: 15px 0;}
	#industry{padding:25px 0 20px}
	.dumore a{margin-top:6px}
	.dumore a:hover svg{margin-left:0px}
	#ginbox .bitem img{width:55px}
	#ginbox .bitem p{font-size:18px}
	#ginbox .bitem span{font-size:15px}
	#ginbox .bitem{padding:20px 1%;width:31.3%}
	#ginbox{padding:45px 0 20px}
	#ginbox .badot{display:none}
	#industry .matime span{font-size:23px}
	#industry .sence{padding:0 0 20px;width: calc(100% - 40px);max-width: calc(100% - 40px);}
	#ginbox .titleJP h2{font-size:30px}
	#shareBox{padding: 0;margin-top: 40px;}
	#mshareBox:before{background-image: unset;}
}