div.maskwhite{position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; z-index: 1000; animation: bodyfin 0.7s ease-in-out; animation-fill-mode: forwards; pointer-events: none;}
@keyframes bodyfin {
  from {opacity:1;}
  to {opacity:0;}
}


@charset "utf-8";
/* CSS Document */
.nav .lang{padding-top:.3em;}
.nav .lang > a{border-left:1px solid #666; border-right:1px solid #666; padding:0 1em;}
.nav .lang ul{width:100%;}
.nav .lang ul li{padding:0 5px;}
.navside{position:fixed; top:0; right:0; width:360px; height:100vh; background:rgba(0,42,94,1); z-index: 500; box-shadow:0 -5px 5px rgba(0,0,0,0.5); transition:.3s; opacity:1;}
.navside.hide{right:-370px; opacity:0; z-index: -1;}
.navside ul{color:#fff; padding-left:6em;}
.navside ul li a{line-height:200%; font-size:15px; letter-spacing:4px; margin-top:5px; margin-bottom:5px; position:relative; color:#fff; transition:.3s;}
.navside ul li a::after{content:""; display:block; width:0; height:1px; background:#37bab4; position:absolute; left:100%; bottom:5px; transition:.3s; }
.navside ul li a:hover::after{width:4em;}
.navside ul li a:hover{padding-left:10px;}
.navside .close{width:40px; height:40px; display:block; position:absolute; top:50%; right:1em; transform:translateY(-50%);}
.navside .close::before{content:""; width:40px; height:1px; display:block; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(45deg); background:#fff; }
.navside .close:after{content:""; width:40px; height:1px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-45deg); background:#fff;}
@media screen and (max-width:767px){/*phone*/
.navside{width:100%;}
}
/*default page set*/
.trilight2024d0 video {width:100%; height:auto;}
.trilight2024d0 *{line-height:0;}
.trilight2024d0{position:relative;}
.trilight2024d0 h2{position:absolute; bottom:35%; color:#fff; text-align:center; line-height:140%; font-size:48px; z-index: 3; width:100%; letter-spacing: 2px; text-shadow: 0 0 10px rgba(0,0,0,1);}
.trilight2024d1{position:relative; margin-top:-20%;}
.trilight2024d0::after{content:""; width:100%; height:60%; background:linear-gradient(rgba(1,39,101,0) 0%,rgba(1,39,101,1) 40%); position:absolute; display:block; bottom:0;}
.trilight2024d1 .page{z-index:3; position:relative;}
.trilight2024d1 .list{margin-left:5%;}
.trilight2024d1 .list.rr{margin-left:-5%;}
.trilight2024d2{margin-top:-50%; line-height:0; position:relative;}
.trilight2024d2::after{content:""; width:100%; height:50%; background:linear-gradient(rgba(1,39,101,1) 10%,rgba(1,39,101,0) 50%); position:absolute; display:block; top:0;}
.trilight2024d3 table span{position:relative;}
#footer{z-index:5; }
#footer .fosocialbtn p{border:1px solid #ccc; text-align:center; display:block; line-height:180%; padding:20px 5px;}
@media screen and (max-width:1286px){/*desktop*/
.trilight2024d0 h2{font-size:40px;}
.trilight2024d1{overflow:hidden;}
.trilight2024d1 .list{margin-left:3%;}
.trilight2024d1 .list.rr{margin-left:-3%;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
.trilight2024d0 h2{font-size:30px;}
}
@media screen and (max-width:767px){/*phone*/
.trilight2024d0 h2{font-size:20px;}
.trilight2024d0::after{content:""; width:100%; height:50%;}
.trilight2024d0 h2{bottom:10%;}
.trilight2024d1{position:relative; margin-top:-10%;}
}
/*=====================default page set end=====================*/
.prolist .main{display:flex; flex-wrap:wrap;}
.prolist .main .ptit{order:0; width:100%;}
.prolist .main .list .frm{position:relative;}
.prolist .main .list .hints{display:flex; justify-content: center; align-items: center; text-align: center; position:absolute; width:80%; height:3em; left:50%; top:60%; transform:translateX(-50%); background:rgba(255,255,255,0.8); border-radius:1em; border:1px solid #ccc; color:#333; z-index: 5; font-size:13px;}
.prolist .main .list .hints::after{content:""; width:16px; height:16px; background:linear-gradient(135deg,rgba(255,255,255,0) 50%,#666 50%); position:absolute; left:50%; bottom:-8px; transform:translateX(-50%) rotate(45deg);}
.prolist .main .innerhtml{width:100%;}
.prolist .main .list h3.subject{text-align:center; font-weight:500; font-size:15px;}
@media screen and (max-width:960px){/*desktop-small pad*/
.proclass .main .list{width:25%;}
}
@media screen and (max-width:767px){/*phone*/
.proclass .main .list{width:50%;}
}
/*prodetail*/
.prodetail .main h1.syis{width:50%; float:right;}
.prodetail .main .sum{width:50% !important; float:right;}
.prodetail .main figure{padding-right:3em; width:50%;}
.prodetail .main .cnt::before{content:""; font-size:16px; color:#999; display:block; width:100%; border-bottom:1px solid #ccc; font-weight:700; letter-spacing: 1px; margin:2em 0 1em 0;}
@media screen and (max-width:767px){/*phone*/
.prodetail .main figure{padding-right:0em; width:100%;}
.prodetail .main h1.syis{width:100%; font-size: 24px; text-align: center;}
.prodetail .main .sum{width:100% !important; float:right;}
}