
.content{ padding:0; overflow:hidden; background: #0055bc url("../images/products/zi/2026/bg_tabs.jpg") center center repeat-y; background-size: 100% auto;}

.pc{ display:block; }
.mb{ display:none; }
.text-shadow{ 
    text-shadow: 
      -1px -1px 0 #0048bc,
       1px -1px 0 #0048bc,
      -1px  1px 0 #0048bc,
       1px  1px 0 #0048bc,0 1px 6px rgba(0,0,0,0.7), 0 1px 6px #0c38a5}



.section-zi-kv{ }
.section-zi-kv .container{ width:100%; max-width:1920px; margin: 0 auto;}
.section-zi-kv .kv{ margin: 0 auto; }

.section-zi-tabs{ background: url("../images/products/zi/2026/bg_tabs.jpg") center top no-repeat; padding: 50px 0;}
.section-zi-tabs .container{ width:95%; max-width:1000px; margin: 0 auto;}
.section-zi-tabs .list{ display: flex; justify-content: center;}
.section-zi-tabs .list .item{ width: 46%; margin: 0 2%; cursor: pointer;}
.section-zi-tabs .list .item img{ position: relative; top: 0; transition: all ease-out 0.4s; }
.desktop .section-zi-tabs .list .item img:hover{ top: -15px; transition: all ease-out 0.4s;}

#product-1{ background: url("../images/products/zi/2026/bg_product_1_pc.jpg") center bottom no-repeat; background-size: cover;}
#product-2{ background: url("../images/products/zi/2026/bg_product_2_pc.jpg") center bottom no-repeat; background-size: cover;}
.section-zi-product{ overflow: hidden; width: 100%; max-width: 1920px; margin: 0 auto;}
.section-zi-product .container{ width:100%; max-width: 1920px; margin: 0 auto;}
.section-zi-product .title{ width:100%; max-width:1200px; margin: 0 auto; top: 30px; position: relative;}
.section-zi-product .title img{}
.section-zi-product .inner{ display: flex; position: relative; top: -40px;}
.section-zi-product .inner .box{ }
.section-zi-product .inner .box.pic{ width: 45%;}
.section-zi-product .inner .box.pic .pd-box{ width: 100%; max-width: 600px; margin: 0 0 0 auto; }
.section-zi-product .inner .box.pic .pd{ margin: 0 0 0 auto;}
.section-zi-product .inner .box.pic .bar{ width:80%; max-width:330px; margin: -70px 9% 20px auto;}
.section-zi-product .inner .box.pic .btn-instructions{ display: block; width: 120px; margin: 0 calc(15% + 60px) 0 auto; }
.section-zi-product .inner .box.info{ width: 55%; text-align: left; padding: 65px 1% 0 2%; color: #fff; }
.section-zi-product .inner .box.info .product-name{ color: #fff; border-bottom: #fff solid 2px; padding-bottom: 5px; margin-bottom: 50px; transform: scale(1.2); transform-origin: left top; letter-spacing: 2px; position: relative;}
.section-zi-product .inner .box.info .product-name::before{ content: ''; width: 100%; height: 1px; bottom: -1px; left: 0; position: absolute; box-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 1px 6px #0c38a5;}
.section-zi-product .inner .box.info h2{ font-size: 34px; font-weight: 600;}
.section-zi-product .inner .box.info h2 sup{ font-size: 60%; position: relative; top: -10px;}
.section-zi-product .inner .box.info li,
.section-zi-product .inner .box.info p{ font-size: 24px; font-weight: 500; }
.section-zi-product .inner .box.info p.note{ font-size: 15px; font-weight: 400; }
.section-zi-product .inner .box.info .star>li{ background: url("../images/products/zi/2026/ic_star.png") 2px 13px no-repeat; padding-left: 35px;}
.section-zi-product .inner .box.info .round li{ margin-top: 7px;}
.section-zi-product .inner .box.info .round .note{ margin-top: 15px;}
.section-zi-product .inner .box.info .round .note .bigger{ font-size: 30px; line-height: 18px; position: relative; top: 13px;}
.section-zi-product .inner .box.info .round>li{ position: relative; padding-left: 22px;}
.section-zi-product .inner .box.info .round>li::before{ content:''; width: 10px; height: 10px; border-radius: 10px; background-color: #ffe439; top: 13px; left: 4px; position: absolute; box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 1px 6px #0c38a5;}

#product-1 .inner .box.info .star .highlight{ color: #fae141;}
#product-2 .inner .box.info .star .highlight { position: relative; z-index: 1; display: inline-block; -webkit-text-stroke: 1px #0048bc; text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 1px 6px #0c38a5; color: #0048bc; font-weight: 600;}
#product-2 .inner .box.info .star .highlight::after {
  content: attr(data-stroke);
  position: absolute; z-index: 2; left: 0; top: 0; width: 100%;  
  background: linear-gradient(to top, #c58f3f, #ffee92, #faaa03);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  pointer-events: none; 
}

.section-zi-cards{ background:#efefef url("../images/products/zi/2026/bg_cards.png") top center no-repeat; width: 100%; max-width: 1920px; margin: 0 auto;}
.section-zi-cards .container{ width:95%; max-width:1080px; position:relative; padding: 20px 0 30px;}
.section-zi-cards .title{ width: 80%; max-width: 540px; margin:0 auto 30px 0; }
.section-zi-cards .cards{ width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto;}
.section-zi-cards .cards .c{ width:30%; margin:0 0 40px 0; position:relative; }
.desktop .section-zi-cards .cards .c .tip{ position:absolute; left:10px; top:10px; width:25%; height:100%; background:url("../images/products/zi/2026/card_mouse.png") top center no-repeat; background-size:100% auto; }
.section-zi-cards .cards .c .tip{ position:absolute; left:10px; top:10px; width:25%; height:100%; background:url("../images/products/zi/2026/card_touch.png") top center no-repeat; background-size:100% auto; }
.section-zi-cards .cards .c .front{ opacity:1; cursor:pointer;}
.section-zi-cards .cards .c .back{ position:absolute; left:0; top:0; opacity:0;}
.desktop .section-zi-cards .cards .c:hover .tip{ opacity:0; transition: all 0.2s ease-out;}
.desktop .section-zi-cards .cards .c:hover .front{ opacity:0; transition: all 0.2s ease-out;}
.desktop .section-zi-cards .cards .c:hover .back{ opacity:1; transition: all 0.2s ease-out;}
.section-zi-cards .cards .c.hover .tip{ top:-10px; opacity:0; transition: all 0.2s ease-out;}
.section-zi-cards .cards .c.hover .front{ opacity:0; transition: all 0.2s ease-out;}
.section-zi-cards .cards .c.hover .back{ opacity:1;  transition: all 0.2s ease-out;}


.section-zi-easy{ background: url("../images/products/zi/2026/bg_easy.jpg") center top no-repeat; padding: 20px 0 1px; }
.section-zi-easy .container{ width: 90%; max-width:1080px;}
.section-zi-easy .title{ width: 70%; max-width: 440px; margin: 0 auto 30px 0;}
.section-zi-easy .inner{ width: 100%; max-width: 1000px; display: flex; justify-content: center; align-items: center; margin: 0 auto 30px;}
.section-zi-easy .inner .item{ width: 100%; max-width: 280px;}
.section-zi-easy .inner .item + .item{ margin-left: 5%;}
.section-zi-easy .text{ font-size: 28px; font-weight: 500; color: #FFF; text-align: center; margin-bottom: 50px;}
.section-zi-easy .note{ font-size: 14px; color: #FFF; text-align: center;}



/*	RESPONSIVE:  */
@media only screen and (max-width:1279px) {
	
.section-zi-product .title{ max-width: 1000px;}
.section-zi-product .title img{ max-width: 700px; }
.section-zi-product .inner{ top: -30px;}
.section-zi-product .inner .box{ }
.section-zi-product .inner .box.pic{ width: 45%;}
.section-zi-product .inner .box.pic .pd-box{ }
.section-zi-product .inner .box.pic .pd{ }
.section-zi-product .inner .box.pic .bar{ margin: -50px 9% 20px auto;}
.section-zi-product .inner .box.pic .btn-instructions{ }
.section-zi-product .inner .box.info{ padding: 50px 1% 0 2%; }
.section-zi-product .inner .box.info .product-name{ margin-bottom: 30px; transform: scale(1); letter-spacing: 1px;}
.section-zi-product .inner .box.info h2{ font-size: 26px; }
.section-zi-product .inner .box.info h2 sup{ }
.section-zi-product .inner .box.info li,
.section-zi-product .inner .box.info p{ font-size: 20px;  }
.section-zi-product .inner .box.info p.note{ }
.section-zi-product .inner .box.info .star>li{ background: url("../images/products/zi/2026/ic_star.png") -3px 11px no-repeat; background-size: 25px auto; padding-left: 25px;}
.section-zi-product .inner .box.info .round li{ margin-top: 3px;}
.section-zi-product .inner .box.info .round .note{ margin-top: 10px;}
.section-zi-product .inner .box.info .round .note .bigger{ }
.section-zi-product .inner .box.info .round>li{ padding-left: 15px;}
.section-zi-product .inner .box.info .round>li::before{ width: 8px; height: 8px; border-radius: 8px; top: 12px; left: 0;}
    
}

/*	RESPONSIVE:  */
@media only screen and (max-width:1000px) {
    
#product-1{ background: url("../images/products/zi/2026/bg_product_1_mb.jpg") center top no-repeat; background-size: cover; border-bottom: #0056bc solid 1px;}
#product-2{ background: url("../images/products/zi/2026/bg_product_2_mb.jpg") center top no-repeat; background-size: cover; border-bottom: #0056bc solid 1px;}
.section-zi-product{ padding: 4vw 0 5vw; }
.section-zi-product .container{ width: 90%; margin: 0 auto;}
.section-zi-product .title{ max-width: 600px; top: 0; margin: 0 auto;}
#product-1 .title img{ max-width: 90%; margin: 0 auto;}
#product-2 .title img{ max-width: 100%; margin: 0 auto;}
.section-zi-product .inner{ display: block; top: -6vw;}
.section-zi-product .inner .box{}
.section-zi-product .inner .box.pic{ width: 100%;}
.section-zi-product .inner .box.pic .pd-box{ margin: 0 auto; }
.section-zi-product .inner .box.pic .pd{ width: 75%; margin: 0 21% 0 auto;}
.section-zi-product .inner .box.pic .bar{ width: 75%; margin: -5.5vw auto 3vw;}
.section-zi-product .inner .box.pic .btn-instructions{ margin: 0 auto; }
.section-zi-product .inner .box.info{ width: 100%; max-width: 600px; padding: 7vw 0 0; margin: 0 auto;}
.section-zi-product .inner .box.info .product-name{ width: 80%; transform: scale(1.25); transform-origin: center bottom; letter-spacing: 0; margin: 0 auto 3vw; }
.section-zi-product .inner .box.info h2{ font-size: 24px; }
.section-zi-product .inner .box.info h2 sup{ }
.section-zi-product .inner .box.info li{ font-size: 18px; margin-bottom: 0;}
.section-zi-product .inner .box.info p{ font-size: 18px; margin-bottom: 10px;}
.section-zi-product .inner .box.info p.note{  }
.section-zi-product .inner .box.info .star>li{ background: url("../images/products/zi/2026/ic_star.png") -3px 9px no-repeat; background-size: 25px auto; padding-left: 25px; }
.section-zi-product .inner .box.info .round li{ margin-top: 0;}
.section-zi-product .inner .box.info .round .note{ margin-top: 10px; font-size: 13px;}
.section-zi-product .inner .box.info .round .note .bigger{ }
.section-zi-product .inner .box.info .round>li{ padding-left: 15px;}
.section-zi-product .inner .box.info .round>li::before{ width: 8px; height: 8px; border-radius: 8px; top: 11px; left: 0; }

}


/*	RESPONSIVE:  */
@media only screen and (max-width:767px){
	
.pc{ display:none;}
.mb{ display:block;}
.text-shadow{ 
    text-shadow: 
      -1px -1px 0 #0048bc,
       1px -1px 0 #0048bc,
      -1px  1px 0 #0048bc,
       1px  1px 0 #0048bc, 0 1px 6px rgba(0,0,0,0.3), 0 1px 4px #0c38a5}

.section-zi-product{ }
.section-zi-product .container{ }
	
#product-2 .inner .box.info .star .highlight { text-shadow: 0 1px 6px rgba(0,0,0,0.3), 0 1px 4px #0c38a5;}
	
.section-zi-cards{ background-size: 100% auto; }
.section-zi-cards .container{ padding: 30px 0;}
.section-zi-cards .title{ margin: 0 auto 20px; top: -5px; position: relative;}
.section-zi-cards .cards{ } 
.section-zi-cards .cards .c{ width:45%; margin:0 2.5%; }
.section-zi-cards .cards .c .front{ margin-bottom: 5vw;}

.section-zi-easy{ background-size: 1000px auto; padding: 0 0 1px;}
.section-zi-easy .title{ margin: 0 auto 10px; top: -10px; position: relative;}
.section-zi-easy .inner{ margin: 0 auto 20px;}
.section-zi-easy .inner .item{ }
.section-zi-easy .inner .item + .item{ margin-left: 3%;}
.section-zi-easy .text{ font-size: 22px;}
    
}



/*	RESPONSIVE:  */
@media only screen and (max-width:480px) {



}
