@font-face {
  font-family:'o-r';
  src:url('../fonts/o-r.woff') format('woff');
}

@font-face {
  font-family:'s-r';
  src:url('../fonts/s-r.woff') format('woff');
}

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,div,img,button{margin:0;padding:0;font-family:o-r;letter-spacing:0.8px}
button,select,img{border:none}
button{cursor:pointer;padding:8px 18px;margin:5px 0;border:1px solid #888}
button a{color:black;text-decoration:none}
i{font-style:normal}

span{display:none}
video{margin:0 auto;padding:0;border:none;outline:none}
video:focus{outline:none}
li{list-style:none}

.show{display:inline}
.margin0{margin:0 !important}
.align-center{text-align:center}
.color-white{color:white !important}
.color-green{color:#7cbc18}
.color-red{color:#d00}
.color-gray{color:#888}
.float-left{float:left}
.float-right{float:right}
.clean-float{clear:both;float:none;width:100%;height:0;font-size:0;line-height:0;content:""}
.button-inquiry{padding:10px 25px;font-weight:bold;transition:color 0.5s ease}
.button-inquiry:hover{color:#777}
button:hover{border:1px solid #e00}

.header{width:90%;margin:68px auto 111px}
.header .logo{float:left;width:23%}
.header .nav{float:right;width:77%;margin-top:13px}
.header .nav ul li{float:right;padding-left:46px;font-size:17px}
.header .nav ul li.nav-tiktok img{margin-top:-4px}
.header a{color:black;text-decoration:none}
.header-mobile{display:none;position:fixed;width:100%;background:#fff;z-index:8}
.header-mobile .logo-mobile{width:100%;text-align:center}
.header-mobile .logo-mobile img{width:39vw;margin:4vw 0 2vw}
.header-mobile .nav-switch{position:absolute;right:4vw;top:4.3vw;z-index:0;font-size:3.9vw}
.header-mobile .nav-opened{padding:3% 0;animation:NavOpenedExpandLeft 0.39s forwards;background:white;position:absolute;top:10vwh;right:0;z-index:1;box-shadow:0 6px 5px rgba(0, 0, 0, 0.2);display:none}
.header-mobile .nav-opened ul li{margin:3.3vw 0;text-indent:5%}
.header-mobile .nav-opened ul li a{color:black;text-decoration:none;display:block}
@keyframes NavOpenedExpandLeft{
      from {
        width:0;
      }
      to {
        width:100%;
      }
    }
#pc-l{position:relative}
#pc-l-menu-box{display:none;position:absolute;right:3px;top:33px;z-index:1;width:133px;background:white;border-left:1px solid #ccc;box-shadow:0 3px 3px rgba(0, 0, 0, 0.05)}
#pc-l-menu-box a{display:block;padding:3% 6%}
#pc-l-menu-box a:hover{background:#dfdfdf}

.indexH2{margin:16vh 0;font-size:4.5vh}
.indexH2especial{margin:8vh 0}

.index-4{margin:auto}
.index-4-ul{float:left;width:420px;margin:0 6px 15vh;padding-bottom:33px;text-align:center;background:#dee0e1;border-radius:9px;position:relative}
.index-4-ul h3{font-size:4vh}
.index-4-ul .lc{position:absolute;top:-10vh;left:41.5%;z-index:1}
.index-4-ul .lc-bg{border-radius:9px;width:100%}
.index-4 video{border-radius:9px}

#auto-width-1 h3{margin-top:-74px;padding:0 0 43px 23px;text-shadow:1px 1px 6px rgba(0, 0, 0, 0.6);text-align:left;color:#fff;position:relative;z-index:1}
#auto-width-1 h4{font-size:14px;padding:1vh 10px 0}
#auto-width-1 button{margin-top:23px;width:80%;padding:1vh 0;background:#fff;border-radius:5px;cursor:pointer;font-size:1.5vh;font-weight:bold}

.lc-mask{position:relative;display:inline-block;width:100%}
.lc-mask:after{content:"";position:absolute;border-radius:9px;left:0;bottom:3px;width:100%;height:40%;background:linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);pointer-events:none}

.index-5, .index-6{margin:auto;margin-top:-3.8vh}
.index-7{margin:auto}
.index-5-ul, .index-6-ul, .index-7-ul{float:left;margin:0 6px 1.2vh;padding:5vh 0;text-align:center;background:#fff;border-radius:9px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}
.index-6-ul{padding:19vh 0}
.index-7-ul{padding:0}
.index-5-ul h3{font-size:3.5vh;margin:1.7vh 0 1.3vh}
.index-6-ul h2{font-size:1.7vh;margin:0 0.5vh;font-weight:normal;color:#333}
.index-7-ul h2{font-size:2vh;margin:0 0.5vh 10vh;padding:0;font-weight:normal;color:#333}
.index-5-ul h4, .index-6-ul h4{font-size:2vh;padding:0 2vh}
.index-5-ul h5, .index-6-ul h5{width:90%;margin:1vh auto;font-weight:normal}
.index-5 button, .index-6 button{padding:1vh 1.8vh;margin:1.5vh 0;font-size:1.5vh;font-weight:bold;border-radius:5px}
.index-7 img{width:100%;border-radius:9px}
.index-7 a{text-decoration:none}
.index-certifications{margin:auto;position:relative;text-align:center;margin-top:18vh}
.index-certifications video{position:absolute;left:0;top:0;z-index:-1}
.index-certifications .certificate-logo{position:relative;z-index:0;top:15vh;min-height:85vh}
.index-certifications h2{padding-top:25vh;color:#555}
.index-certifications .white-mask{width:100%;height:10px;position:absolute;left:0;bottom:103px;z-index:0;background:white}
.index-6-ul .lc6{width:100%}
.hpm{display:none;position:relative;z-index:-1}
#jv1, #joinsun-logo-video, #asdv, #basf-joinsun, #bas, #shansh, #eart, .white-mask{display:block}
#jv1m{display:none}
#bas{position:absolute;left:0;top:0;z-index:-1;border-radius:9px;height:100%;opacity:0.6}
#shansh{position:absolute;left:0;top:0;z-index:-1;border-radius:9px;height:100%}
#i-cert{color:#555}

.about-top-video{width:100%;position:absolute;left:0;top:0px;z-index:-2}
.about-top-pic1{width:100%;position:relative;top:-300px;z-index:-1}
.about-top-pic2{width:100%;width:100%;position:relative;top:-304px;z-index:-1}
.about-main-text-box{text-align:center;margin-top:-133px}
.info-box{width:70%;margin:auto;padding:10px 15px;line-height:170%;text-align:left;font-size:18px}
.info-box a{color:#e00}
.info-box a:hover{color:black}

.tech-top{margin-top:-66px}
.tech-top h1{float:left;width:30%;padding-left:15%;font-size:60px;color:#e00}
.tech-top h1 i{display:block;padding-left:233px}
.tech-top div{float:left;width:55%}
.tech-top div img{width:100%;margin-top:-15px}

.tech-videos-box{width:1627px;margin:auto}
.tech-videos-box ul{float:left;width:242px;height:407px;margin-right:35px}
.tech-videos-box ul video{width:242px}
.tm-pic{width:90%}
.tech-video-mobile{display:none}

.material-pic-box{width:1627px;margin:auto}
.material-pic-box ul{float:left;width:242px;height:407px;margin-right:35px;background:#f8f8f8}
.material-pic-box ul:nth-child(1){background:black}
.material-pic-box ul img{width:100%;mix-blend-mode:multiply;margin-top:17vh}
.material-pic-box ul:nth-child(1) img{mix-blend-mode:normal}

.crumbs{display:flex;gap:0;position:relative}
.crumbs ul{padding:12px 115px;margin-left:-16px;background:#eee;color:#333;clip-path:polygon(0% 0%, calc(100% - 27px) 0%, 100% 100%, 27px 100%)}
.crumbs ul:first-child{padding-left:20vh;clip-path:polygon(0% 0%, calc(100% - 27px) 0%, 100% 100%, 0% 100%)}
.crumbs ul.crumbs-last-ul{padding:12px 23px;margin-left:-4px;background:#f9f9f9}
.crumbs-mask{height:100%;width:100%;background:white;position:absolute;right:0;top:0;animation:shrinkLeftToRight 1s forwards}
@keyframes shrinkLeftToRight{
    from {
      width:100%;
    }
    to {
      width:0;
    }
  }
.crumbs ul a{color:black;text-decoration:none}

.p-21700-18650{width:38%;float:left;margin-right:1%;border:1px solid #aaa;padding:5%}
.p-21700-18650 > :nth-child(2){margin-right:0;margin-left:1%}
.p-21700-18650 h2{font-size:5vw}

.product-detail{width:100%;margin:auto}
.product-data{width:43%;padding:0 3% 0 9%}
.product-data h1{font-size:53px;font-weight:bold;margin:10vh 0 3vh}
.product-data h1 sup{font-size:33px;font-weight:bold}
.product-data h2{font-size:15px;font-weight:normal;margin:0 0 8vh}
.product-data h3{font-size:21px;font-weight:bold;padding:5px 15px;margin:5vh 0 2vh;background:linear-gradient(to right, 
  #ddd 0%, 
  #f1f1f1 50%, 
  #eee 100%)}
.product-data table{width:100%;font-family:s-r}
.product-data table tr:nth-child(odd){background:linear-gradient(to right, 
  #ddd 0%, 
  #f1f1f1 50%, 
  #eee 100%)}
.product-data table td{padding:3px 15px}
.product-data table tr td:first-child{font-weight:normal}
.product-data table tr:nth-child(odd) td:first-child{border-left:2px solid #a2a2a2}
.product-data table tr:hover{background:#ddd}
.product-data table tr td button{padding:5px 8px;margin:5px 0;border:1px solid #888}
.product-data table tr td button:hover{border:1px solid #e00}
.product-picture{width:45%;cursor:pointer}
.product-picture img{width:100%}
.product-logos{margin:0 0 3vh}
.product-logos img{margin:0 8px 5px 0;/*box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)*/}

.products-list{padding:3% 9%}
.products-list table{width:100%;border-collapse:collapse;text-align:center;border-left:1px solid #f3f3f3}
.products-list table thead{background:linear-gradient(to right, 
  #a00 0%, 
  #e00 50%, 
  #ddd 100%)}
.products-list table thead th{color:#fff}
.products-list table tbody td{border-right:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3}
.products-list a{color:#d00;text-decoration:none}
.products-list a:hover{color:#000}

.footer{width:100%;padding:8vh 0 53px;margin-top:3.9vh;background:linear-gradient(to right, #f2f2f2, #fcfcfc)}
.footer .footer-column-box{width:90%;margin:auto}
.footer .footer-column-box .footer-column{float:left;width:17.5%}
.footer .footer-column-box .footer-column h3{margin:0 0 13px;color:#222}
.footer .footer-column-box .footer-column a{display:inline;line-height:200%;color:black;text-decoration:none;color:#555}
.footer .footer-column-box .footer-column a:hover{color:#c00}
.footer .footer-column-box .footer-column span{line-height:200%}
.footer .footer-column-box .footer-column:first-child{width:25%;padding-right:5%;text-align:center}
.footer .footer-column-box .footer-column:first-child img{width:75%;margin-top:63px}
.footer h2{font-size:16px;font-weight:normal;color:#333}

.footer-bottom-bar{margin:33px auto 0;padding:0 15px;text-align:center;font-size:13px}
.footer-bottom-bar a{color:black}
.footer-bottom-bar a:hover{color:#e00}

.statement{width:80%;margin:50px auto}
.statement h1{margin:2vh 0}
.statement h2{margin:1.5vh 0}
.statement p, .statement li{line-height:190%}

.blogs{line-height:175%;color:#232323}
.blogs h1, .blogs h2, .blogs-data{font-family:s-r}
.blogs h1{font-size:35px}
.blogs h1, .blogs h2{color:#000}
.blogs h2{padding-top:6.3vh}
.blogs-data{color:#7a7a7a}
.blogs a{color:#d00}
.blogs a:hover{color:#000}
.blogs table{min-width:65%;line-height:133%}
.blogs table thead{background:linear-gradient(to right, 
  #e00 0%, 
  #111 1%, 
  #333 10%, 
  #666 99%)}
.blogs table thead th{color:#fff}
.blogs table td{border-right:1px solid #777;border-bottom:1px solid #777}
.blogs table tbody td:nth-child(1){border-left:1px solid #777}
.blogs table tbody td{font-size:15px}
.blogs-table-box{width:100%;overflow:hidden;overflow-x:auto}

#cookie-banner{position:fixed;bottom:0;/*left:0;*/right:0;background:#f3f3f3;width:23%;padding:20px 15px;text-align:center;font-size:14px;z-index:999999;box-shadow:0 -2px 5px rgba(0,0,0,0.1)}
#cookie-banner button{margin-top:13px; padding:6px 12px;border:1px solid #aaa}
#cookie-banner button:hover{border:1px solid #e00}
#cookie-banner a{color:black}
#cookie-banner a:hover{color:#e00}

@media (max-width:1600px) {
	.header .nav ul li{float:right;padding-left:26px;font-size:13px}
	.header .nav ul li.nav-tiktok img{margin-top:-8px}
	#pc-l{position:relative;width:auto}
	.tech-videos-box, .material-pic-box{width:1073px}
	.tech-videos-box ul:nth-child(4), .material-pic-box ul:nth-child(4){margin-right:0}
	.tech-videos-box ul:nth-child(5), .tech-videos-box ul:nth-child(6), .material-pic-box ul:nth-child(5), .material-pic-box ul:nth-child(6){display:none}
	.tech-top{margin-top:-39px;background:url(../images/bg-technology.png?v=1) no-repeat left top / cover}
	.tech-top h1{font-size:3.3vw}
	.tech-top h1 i{padding-left:153px}
	.tech-top div img{margin-top:-33px}
}

@media (max-width:1279px) {
	.header{display:none}
	.header-mobile{display:inline;left:0;top:0}
	#pc-l{position:relative;width:auto}
	h2{font-size:23px}
	h3{font-size:21px}
	#joinsun-cells-applications{margin-top:13vh}
	.indexH2{margin:7vh 0 14vh;font-size:3vh}
	.indexH2especial{font-size:2.3vh;margin-top:-12.3vh}
	.indexH2especial strong{font-size:39px}
	.index-4-ul, index-5-ul{width:155px}
	.index-4-ul .lc{width:10vw}
	.index-4-ul h3{font-size:20px}
	#auto-width-1 h3{margin-top:-45px;padding:0 0 21px 0;text-align:center}
	#auto-width-1 button{margin-top:23px;font-size:12px}
	.index-5, .index-6{margin-top:-5.2vh}
	.index-5-ul, .index-6-ul{background:#fdfdfd}
	.index-5-ul h3{font-size:20px}
	.index-6-ul h2{font-size:11px}
	.index-5-ul h4, .index-6-ul h4{font-size:1.7vh}
	.index-5-ul .lc5{width:10vw}
	.index-6-ul{padding:8vh 0}
	.index-6-ul .lc6{width:30vw}
	.index-certifications{margin-top:6vh}
	.index-certifications .certificate-logo{top:5vh;min-height:35vh}
	.index-certifications h2{padding-top:10vh}
	.index-7-ul h2{font-size:1.2vh}
	.hpm{display:block;width:100%}
	#jv1, #joinsun-logo-video, #asdv, #basf-joinsun, #bas, #shansh, #eart, .white-mask{display:none}
	#jv1m{display:block}
	#i-cert{color:#000}
	.about-top-video{width:100%;position:absolute;left:0;top:57px;z-index:-2}
	.about-top-pic1{width:100%;position:relative;top:87px;z-index:-1}
	.about-top-pic2{width:100%;width:100%;position:relative;top:82px;z-index:-1}
	.about-main-text-box{text-align:center;margin-top:113px}
	.about-main-text-box h1{font-size:19px}
	.about-main-text-box h2{font-size:19px}
	.info-box{width:88%;font-size:17px}
	.tech-top{margin:0;background:none;height:500px;padding-top:13.5vh;position:relative;z-index:1}
	.tech-top h1{font-size:8vw;width:69%;padding-left:10%;color:#fff;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5)}
	.tech-top h1 i{padding:0;display:inline}
	.tech-top div{display:none}
	.tech-videos-box, .material-pic-box{display:none}
	.tech-video-mobile{display:block;position:absolute;left:0;top:0;z-index:0;width:100%}
	.crumbs{display:none}
	.p-21700-18650{width:90%;float:none;margin-right:0;margin-bottom:15px;border:1px solid #aaa;padding:15% 5%}
	.p-21700-18650 h2{margin:0 !important;font-size:10vw}
	.p-21700-18650 > :nth-child(2){margin-right:0;margin-left:0}
	.product-data h1{font-size:3.3vh;margin-top:13vh}
	.product-data h1 sup{font-size:2.3vh;display:block}
	.product-data{float:none;width:88%;padding:0 6%}
	.product-picture{width:100%;text-align:right;margin-top:10vh}
	.product-picture img{width:90%}
	.product-data h2{margin:0}
	.product-logos img{margin-right:5px}
	#mobile-product-picture{margin:0 0 3vh}
	#mobile-product-picture img{width:100%}
	.products-list h1{margin-top:10vh}
	.products-list h2{margin-bottom:-21px}
	.products-list table{border:none}
	.products-list th, .products-list table tbody td, .products-list th span{display:none;border:none}
	.products-list th.m-s, .products-list td.m-s{display:inline}
	.blogs table{min-width:100%}
	.blogs img{width:100%}
	.blogs h1{font-size:26px;line-height:133%}
	.footer .footer-column-box .footer-column{width:100%}
	.footer .footer-column-box .footer-column:first-child{width:100%}
	.footer .footer-column-box .footer-column:first-child img{width:60%;margin:39px 0 23px}
	.footer .footer-column-box .footer-column h3{margin:39px 0 10px}
	.statement{width:80%;margin:93px auto 39px}
	#cookie-banner{width:auto;padding:12px 10px 13px}
}
@media (width:1024px) { /*for Hub & iPad Pro*/
	.index-4-ul .lc{width:7vw}
	.index-5-ul .lc5{width:7vw}
	#auto-width-1 h3{margin-top:-56px;font-size:3vw}
	.index-6-ul .lc6{width:20vw}
	.tech-top{padding-top:33vh}
}