@charset "utf-8";
/*RESET*/

* { box-sizing: border-box;  border-radius: 2px;  margin:0;  padding:0;}
svg {border-radius:0;}

html, body, section, article, div, figure, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, aside, article, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, video, ins, kbd, q, s, samp, small, strike, strong, sub, sup, var, b, u, i, center, dl, dt, dd, form, fieldset, label, legend, table, caption, tbody, tfoot, thead,  button, figcaption {margin:0; padding:0; border:0; outline:0; } 

video {display:block; border: 0; outline: none; box-shadow: none; padding:0; margin:0; background:none; max-width:100%;}
video:focus{ourline:none;}

body, pre{ width:100%; font-family: Roboto, Tahoma, Helvetica, Arial,  Verdana, sans-serif;	color: #555; font-size: 17px; line-height: 1.7; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-x: hidden;}

section {clear:both; margin-top:32px;  padding: 0 4%; }

h1, h2, h3, h4, h5, h6 {color:#369;}

h1 {font-size: 140%;
	padding:8px 0;
	font-weight:550;
	line-height: 150%;
	clear: both;
		}

h2 {padding-left: 24px;
	text-indent: -24px;
	font-size: 130%;	
	font-weight:550;
	margin: 64px 0 16px 0}
h2 bdi {display: inline-block; width: 0px; margin-left: 24px; font-size: 80%; font-weight:400;}

h3 {font-size: 100%;
	padding-left:32px;
	text-indent:-32px;
	font-weight: 550;
	margin: 48px 0 0 0;}
h3 bdi {display: inline-block; width: 0px; margin-left: 32px; font-size: 90%; font-weight:400;}

h4 {font-size: 100%;
	font-weight: 500;
    border-bottom: 1px solid #ccc;
	margin: 24px 0;
}
h4::before {content:"\2756"; padding-right: 8px;}

h5 {font-size: 100%;
	color: #555;
   	font-size: 16px;
	font-weight: 300;
	padding: 16px 0px 0px 0px;
	}
h5::before {content:"\2662"; padding-right: 8px;}

h6 {
  position: relative;
}
h6::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0.5px;
  background-color: #369;
  bottom: 0;
  left: 0;
  transform-origin: left;
  transition: width 0.3s ease;
}
h6:hover::after {
  width: 100%;
}

div.line-mid{border-bottom:solid 1px #369; width:80%; height: 20px;margin:32px auto; text-align:center; font-size:16px }
div.line-mid span {position:relative; top:5px; padding: 0 10px;color:#369; background:#fff;}

p { margin: 32px 0; }
.p-head {font-size: 90%; color: #369; border: solid 1px #369; padding: 4px 8px 4px 8px; border-radius: 8px; background:#fcfcfc;}
.p-box {border: solid 1px #369; border-radius: 8px; padding: 8px 12px;} 
a { color:#036;  text-decoration:none; }
em {font-weight:520; color:#000;}
ul, ol{margin: 16px 0 32px 16px;}
li{ margin: 8px; padding:0; list-style-position: outside;}
li span {color: #aaa; padding-left: 16px;}
img {max-width: 100%; height:auto; border-radius:2px;}
a:hover  {color:#369;}
a:hover img {-webkit-filter: brightness(107%);}
figure {font-size: 80%; line-height:120%; text-align:center; color: #999; font-size: clamp(85%, 2vw, 90%) }
figure img {}
hr {clear:both; height:1px; border-width:0; background-color:#ccc}
table{border-collapse: collapse;border-spacing:0; margin:32px 0; width:100%; font-size: 90%; }
table td {border: 1px solid #369; padding: 10px 2px 10px 6px; font-size: clamp(85%, 2vw, 100%) }
table th {color:#fff; background:#369; border: 1px solid #fff; padding: 10px 4px 10px 8px; font-weight: normal; text-align:left;}
td:first-child {border-left: none; padding-left:2px;}
th:first-child {border-left: none; padding-left: 1%;}
td:last-child, th:last-child {border-right: none; padding-right:0;}
table li {margin: 0; padding:8px 0; line-height:125%;}
table p {margin: 16px 0; text-indent: 0px;}


header {
position: sticky;
	position: -webkit-sticky; 
	top: -48px;
	Width:100%;
	z-index: 99999; 
	box-shadow:0px 12px 8px -12px rgba(0,0,0,0.4);
	background-color: rgba(250,250,250,0.95);
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #ccc;
	transition: top 1s ease;
}

#top-nav {
	display:flex; 
	flex-wrap:nowrap; 
	max-width: 1200px;
	height:32px;
	margin: 8px auto;
	padding: 0 3%;
	overflow: hidden;
	}
#top-nav a {	
	display: inline-block;
	padding: 0 16px;
	text-decoration: none;
	line-height:1.8;
	color: #000;
	}
#slogan {flex-grow: 1; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; text-align: left; color:#999; font-size:75%; margin-right:32px; line-height:32px;}
#top-nav-menu {display:flex;  white-space:nowrap; box-sizing:border-box; overflow:visible; }
a#about2, a#shop2, a#benefit2 {display:none; border-bottom:solid 1px #ccc; border-radius:0; border-left:solid 1px #ccc;  }
a#guide { border-bottom:solid 1px #ccc; border-left:solid 1px #ccc; border-radius:0;  }
a#study { border-bottom:solid 1px #ccc; border-radius:0;   }
a#about2:hover, a#shop2:hover, a#benefit2:hover, a#guide:hover, a#forum:hover {background:#eee;}

nav {
	max-width: 1200px;
	margin: 16px auto 6px auto;
	padding: 8px 1.8%;
	white-space: nowrap;
	overflow:visible;
	text-align:right;
	}
nav a{
	display: inline-block;
	padding: 0 2%;
	text-decoration: none;
	color: #000;
	}
	
#logo {margin-top: -8px; margin-left: 16px; width:128px; height: 40px;}
nav a svg {margin-bottom: -4px; display:inline-block;}

@media only screen and (min-width: 1201px) {main {font-size: 130%; color:#666;}}

@media only screen and (max-width: 1200px) {
	main {font-size: 120%;}
	nav a {padding: 0 1.7%;}}

@media only screen and (max-width: 1110px) {
	nav a {padding: 0 1.5%;}	}
	
@media only screen and (max-width: 1050px) {
	nav a {padding: 0 1.2%;}	}

@media only screen and (max-width: 1000px) {
	logo {margin-left:8px;}
	nav a {padding: 0 1.7%;}
	a#shop {display:none;} a#shop2 {display:inline-block}	}	

@media only screen and (max-width: 960px) {
	main {color: #555;} 
	nav a {padding: 0 1.4%;}
	}

@media only screen and (max-width: 920px) {
	nav a {padding: 0 1%;}	}

@media only screen and (max-width: 870px) {
	#logo {margin-left: 0}
	a#benefit {display:none;} a#benefit2 {display: inline-block;}
	nav a {padding: 0 2%}	}
	
@media only screen and (max-width: 799px) {
	nav a {padding: 0 1.5%;}	}

@media only screen and (max-width: 749px) {
	main {font-size: 112%; line-height:1.65; } nav a, #top-nav a {font-size: 16px;}
	nav a {padding: 0 1.2%;}
			}

@media only screen and (max-width: 699px) {
	nav a {padding: 0 0.5%;}	}

@media only screen and (max-width: 659px) {
	nav a {padding: 0 1.3%;}
	a#about {display:none;} a#about2 {display:inline-block;}	#slogan span {display: none;}}
	
@media only screen and (max-width: 599px) {
	table {font-size:90%; }
	table td{ padding: 6px 2px 6px 6px;	vertical-align: middle;}
	nav a, #top-nav a {font-size: 15px;}
	nav a svg{ 	display:block; margin:auto;}
	nav a{text-align:center; padding: 0 3%; margin-top:-16px;}
	#logo {margin-top:4px; margin-left:0px;}
	nav {padding-bottom:0; margin-top: 24px;}
	a#warranty svg {padding-left:18px; overflow:visible; } 
	a#study {display:none;}	
	a#about2 {border-left:none; }
	}

@media only screen and (max-width: 539px) {	
    nav a {padding: 0 2%;}}

@media only screen and (max-width: 479px){
  main {font-size: 106%; color: #444;} nav a, #top-nav a {font-size: 14px;}
  nav a {padding: 0 1.7%;} 
     }

@media only screen and (max-width: 459px){
	nav a {padding: 0 1.5%;} 
	#slogan {margin:0; padding:0; width:1px;}}

@media only screen and (max-width: 431px){
	main {font-size: 100%; line-height:1.6;}
	nav a, #top-nav a {font-size: 13px;}
	nav a {padding: 0 1.3%;}}
@media only screen and (max-width: 392px){ 

	h2 {font-size: 26px; line-height:32px;}
    #top-nav a {padding: 0 10px;}
	nav a {padding: 0 0.7%;}
	}		
@media only screen and (max-width: 374px){
	    nav a, #top-nav a {font-size: 12px;}
	    nav a {padding: 0 0.3}
		#logo {width: 120px;}
}

@media only screen and (max-width: 339px){#logo {width: 100px;}}

@keyframes rotate-always {from{transform:rotate(0deg); transform-origin:15.625% 50% 0;} to {transform:rotate(719deg); }}
@keyframes rotate-hover {from {transform: rotate(0deg); transform-origin:15.625% 50% 0;} to {transform: rotate(1079deg); }}
.logorotate  {transform-origin: 15.625% 50% 0; animation: rotate-always 28s infinite linear;}
svg#logo:hover .logorotate  {transform-origin:15.625% 50% 0; animation: rotate-hover 2s ease;}

@keyframes move-box-right { 0% {transform: translateX(-100%);} 20%, 25% {transform: translateX(0%);} 55%, 65% {transform: translateX(38%);} 85% {transform: translateX(38%);} 100% {transform: translateX(100%);}}
@keyframes move-VT1-right {0%, 85% {transform: translateX(-100%);}85.01% {transform: translateX(38%);} 100% {transform: translateX(100%);}}
@keyframes move-hook-down {0%, 10% {transform: translateY(10%);} 10%, 20% {transform: translateY(0%);} 60%, 70% {transform: translateY(0%);} 70%, 75% {transform: translateY(25.5%);} 90% {transform: translateY(27%);} 90%, 100% {transform: translateY(0%);}}
@keyframes move-VT2-down {0%, 0.1% {transform: translateY(0%); opacity: 1;} 0.2%, 10% {transform: translateY(10%);} 10%, 20% {transform: translateY(0%);} 60%, 70% {transform: translateY(0%);} 70%, 75%{transform: translateY(25.5%); opacity: 1; } 84.88%{ transform: translateY(25.5%); opacity: 1; } 84.89% { transform: translateY(27%); opacity: 0;}  100% {transform: translateY(0%); opacity: 0;}}
.hook { animation: move-hook-down 6s linear infinite; transform-origin: center; fill-mode: forwards;}
.VT2 {animation: move-VT2-down 6s linear infinite;  transform-origin: center; fill-mode: forwards;}
.VT-box {animation: move-box-right 6s linear infinite; transform-origin: left center; animation-fill-mode: forwards; }
.VT1 { animation: move-VT1-right 6s linear infinite; transform-origin: left center; animation-fill-mode: forwards; animation-delay: -0.01s; }

#machine:hover svg path.rotate, #machine:hover svg circle.rotate  {transform:rotate(720deg); stroke: #930; transform-origin:50% 41.67% 0; transition: transform 2s ease }

@keyframes drawyj{ to {stroke-dashoffset:0; }}
#benefit:hover svg path.draw, #benefit2:hover svg path.draw {stroke: #930; animation: drawyj 1.2s forwards infinite linear; stroke-dasharray:100; stroke-dashoffset:100; animation-iteration-count:1;}

#FAQ:hover svg.rotate {transform:rotateY(360deg); transform-origin:50.1% 50.1% 0;  transition: transform 1.2s linear; }
#FAQ:hover svg path {stroke: #930;}

@keyframes expand {from {transform: scale(0);} to { transform: scale(1);}}
.ten-year {transform-origin: center; transform: scale(0); transition: transform 1s;}
#warranty:hover .shield {stroke-width: 0.1px;}
#warranty:hover .ten-year {animation: expand 1s forwards;}

@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px); } 60% {transform: translateY(-10px);}}
#sitemap:hover svg.yjbounce {animation: bounce 2s infinite;}
#sitemap:hover svg path {stroke: #930;}

@keyframes cart-move{to {padding-left:28px}}
#shop:hover svg, #shop2:hover svg {animation: cart-move 1.5s ease; animation-iteration-count: 1;} 
#shop:hover svg path, #shop2:hover svg path {stroke: #930;}
#guide:hover svg polygon {stroke: #930;}
#study:hover svg circle {fill:#FF0; stroke:#999;}

/******Other Animation **********/
@keyframes rotate-gear {from{transform:rotate(0deg);} to {transform:rotate(719deg);}}
.gear-part {animation:rotate-gear 20s infinite linear;}
a:hover .gear-part {animation:rotate-gear 2s infinite linear;}

#flexContainer {display: block; max-width:900px; margin:0 auto; }
/*************** main ******/
main {width: 100%; margin-top:16px; }


#rightColumn {width: 100%; margin-top: 64px; padding: 0 6% 0 3%; font-size: 17px; line-height:140%;}
#rightColumn a {color: #666;}
#rightColumn dl {margin: 0; }
#rightColumn dt {white-space: nowrap; text-overflow: ellipsis;overflow: hidden; line-height: 42px; #color:#333; text-align:center; background: #eee;}
#rightColumn dd {position: relative;}
#rightColumn dd span {position: absolute; text-align:center; width:100%; bottom: 20%;  z-index:99; font-size: 20px; color: #fff; padding: 6px 0; background-color: rgba(50,50,50,0.5);}
#right-content-grid {display:grid; grid-template-columns: 50% 50%;	grid-column-gap: 3%; grid-row-gap: 32px;}

#right-content-sticky {position:static; }
#right-content-sticky aside a {display: block; margin:20px 0 20px 28px; padding:8px 4px; font-size:17px; }
#right-content-sticky aside a::before {content:'\2610'; margin-right: -16px; position: relative; left:-28px;}
#right-content-sticky aside a:hover{background:#f7f7f7;}


@media only screen and (min-width: 1000px){
	#flexContainer {display: flex; max-width:1200px;}
	main{width:70%;}
	#rightColumn {width:29.9%; padding: 0 2% 0 2%; margin-top: 16px; border-left:solid 1px #ddd;}
	#rightColumn dl {  width: 100%; margin: 32px 0 64px 0; }
	#right-content-grid {display:block;}
	#right-content-sticky {position: sticky; position: -webkit-sticky; top: 120px;}}

.breadcrumb {padding: 8px 0 8px 4%; font-size: 77%; background:#fff; white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;}

.right-link {margin: 32px 0; text-align:right; font-size: 90%; }
.right-link a {display:block; padding:8px 3vw 8px 6vw; font-size: 90%; line-height: 110%; background-image: linear-gradient(to right, #fff 40%, #f7f7f7 70%, #eee 90%, #ddd 100%); white-space:nowrap; text-overflow: ellipsis; overflow:hidden; clip-path: polygon(0% 0%, 97% 0%, 100% 50%, 97% 100%, 0% 100%, 0% 0%); } 
.right-link a:hover{background-image: linear-gradient(to right, #fff 50%, #e9f2fb 90%, #c1dffd 97%, #9cf 100%); transform: translateX(20px); transition:ease 0.5s;}


.content-index {display:flex; flex-direction: column; margin:0;  }
.content-index li {list-style-type: none; padding: 8px 4px 8px 32px; margin:0; border-bottom:solid 1px #ccc;}
.content-index li:before {content: "\2610"; margin-left: -32px; padding-right: 16px;}

.alignLeft-responsive {
	text-align:center;
	float:left;
	max-width: 40%;
	margin:8px 16px 4px 0px;
	}
.alignRight-responsive {
	text-align:center;
	float:right;
	max-width: 40%;
	margin:8px 0px 4px 8px;
	}
.alignLeft-responsive img, .alignRight-responsive img {display: block; margin:0 auto; width:100%;}

@media only screen and (max-width: 720px) {.alignLeft-responsive, .alignRight-responsive {float:none; max-width: 100%; margin: 0;}}

.alignRight-flex-reverse, .alignLeft-flex-reverse {display:block; }
.alignLeft-flex-reverse figure {
	display: block;
	text-align:center;
	float:left;
	max-width: 40%;
	margin: 12px 16px 0 0;
	}	
.alignRight-flex-reverse figure {
	display: block;
	text-align:center;
	float:right;
	max-width: 40%;
	margin:12px 0 0 8px;
	}
.alignLeft-flex-reverse img, .alignRight-flex-reverse img {display: block; margin:0 auto;}

@media only screen and (max-width: 640px){ .alignRight-flex-reverse, .alignLeft-flex-reverse {display: flex; flex-direction: column-reverse; margin-top: -20px; } .alignRight-flex-reverse figure, .alignLeft-flex-reverse figure  {max-width:100%; } }

.yj-border-text {position: relative;background:#fcfcfc;  border: solid 1px #369; border-radius: 8px; padding: 16px 12px 12px 16px; margin-top: 48px; margin-bottom: 48px;}
.yj-border-text .up {position: absolute;	top: -20px;	left: 20px;	display: block;	background: #fff; border: solid 1px #369;	border-radius: 18px; padding: 4px 18px;}
.yj-border-text .down {font-size:88%; color:#999; position: absolute; bottom: -17px; right: 22px; display: block; background: #fff;	border: dotted 2px #369; border-radius: 16px; padding:1px 16px 3px 16px;}

/*****Accordian ************/
.Accordion .right-link {margin-right: 20px;}
.Accordion p{margin: 16px 0;}
.Accordion {margin:16px 0; border-top: 1px solid #ccc;}
.Accordion dl { border-bottom: 1px solid #ccc; }
.Accordion dt {
  position: relative;
  font-decoration: none;
  cursor: pointer;
  padding:12px 36px 12px 8px;
}
.Accordion dt:hover { background-color:#e9f2fb;}
.Accordion dt::after {
  content: url('images/svg/icon-plus.svg');
  position: absolute;
  top: 35%;
  right: 8px;
  transform: translateY(0%);
  transition: transform 0.3s ease;
  transform-origin: 50% 75%;
  }
.Accordion dd {max-height: 0; padding-left:8px;  overflow: hidden;  transition: max-height 0.7s ease; background-image: linear-gradient(to bottom, #fff 95%, #e9f2fb 100%); } 
.Accordion dd img {mix-blend-mode: multiply;}
.Accordion dl.active dd { max-height: 2000px;}
.Accordion dl.active dt {background: linear-gradient(to bottom, #e9f2fb, #fff); color:#369;}
.Accordion dl.active dt::after { 
  content: url('images/svg/icon-minus.svg');
  transform: translateY(-50%) scaleY(-1);}
/*
.Accordion dl.active {border-bottom:1px solid #ccc; }
*/

/********** According Container Right Align DT *********/
.Accordion-Container-Right .Accordion {border-top:none; }
.Accordion-Container-Right .Accordion dl{font-size:90%; }
.Accordion-Container-Right .Accordion dl:hover {box-shadow: 3px 5px 10px #bbb;}
.Accordion-Container-Right .Accordion dl.active {box-shadow: 3px 5px 10px #bbb; border-bottom:none;);
}
.Accordion-Container-Right .Accordion dl.active dt{background: linear-gradient(to bottom, #999, #888, #999); color:#fff; font-weight:400;}
.Accordion-Container-Right .Accordion dl.active dt::after { content: url('images/svg/icon-minus-white.svg'); transform: translateY(-50%) scaleY(-1);}

.Accordion-Container-Right .Accordion dt{text-align: right; padding: 8px 42px 8px 8px; line-height:120%;white-space:nowrap; text-overflow: ellipsis; overflow:hidden; background-image: linear-gradient(to right, #fff, #f3f3f3);  transition:ease;}
.Accordion-Container-Right .Accordion dt::after{top: 27%;}

.Accordion-Container-Right .Accordion dd{padding: 0 3%; background-image: linear-gradient(to bottom, #fff 90%, #f3f3f3 100%);}
.Accordion-Container-Right .Accordion dd img {mix-blend-mode:multiply;}

/********** Accordion Container Round32 *********/
.Accordion-Container-Round32 .Accordion {border-top:none; }
.Accordion-Container-Round32 .Accordion dl{border:none; padding: 0 16px; background-color:#dfccac; border-radius:32px;}
.Accordion-Container-Round32 .Accordion dd {background: none;}
.Accordion-Container-Round32 .Accordion dd p {margin: 16px 0}
.Accordion-Container-Round32 .Accordion dt {background:none!important; }
.Accordion-Container-Round32 .Accordion dl.active {background: linear-gradient(to bottom, #963 0px, #dfccac 80px)!important;}
.Accordion-Container-Round32 .Accordion dl.active dt {color:#fff;}
.Accordion-Container-Round32 .Accordion dl.active dt::after {content: url('images/svg/icon-minus-white.svg');}
.Accordion-Container-Round32 .Accordion dt:hover {background:none!important;}

/********** Accordion Container No-Border *********/
.Accordion-Container-No-Border .Accordion {border-top:none; }
.Accordion-Container-No-Border  .Accordion dl{border-bottom:dashed  1px #ccc;}
.Accordion-Container-No-Border .Accordion dd { padding: 0; }
.Accordion-Container-No-Border .Accordion dd p {}
.Accordion-Container-No-Border .Accordion dt {background:none!important; padding:8px 32px 0 0; }
.Accordion-Container-No-Border .Accordion dl.active {background: none!important;}
.Accordion-Container-No-Border .Accordion dt:hover {background:none!important;}
.Accordion-Container-No-Border .Accordion dl.active dt {background: none; color:inherit;}
.Accordion-Container-No-Border .Accordion dt::after {top: 50%;}
 
/********** Tab *********/
.Tab {border:solid 1px #ddd; border-top:solid 5px #eee; border-radius: 2px; background:#eee; }
.Tab dt {border: solid 1px #ddd; border-right:solid 1px #999; text-align:center; vertical-align:middle; line-height:200%; }
.Tab dt:hover {cursor:pointer; }
dt.TabLink {display:inline-block; color:#369;  border-radius:2px 16px 0px 0px;  background:#f5f5f5;}
dt.active-Tab{background:#fff; border-bottom: solid 1px #fff;}
.Tab dd {font-size: 100%; padding: 2px 16px;  background: #fff; border-top: solid 1px #ccc; margin-top:-1px; }	 
@media only screen and (max-width: 480px){.Tab dt {font-size: 90%; padding: 0 2.5%;}} 
	 
.sub-menu {display:grid; grid-template-columns:26% 24% 23.7% 26%; font-size: 16px; border-top:solid 1px #aaa; border-bottom: solid 1px #aaa; }
.sub-menu a{text-align: center; border-right:solid 1px #aaa; border-radius:0; font-decoration:none; background-image: linear-gradient(#ddd, #ccc, #ddd); color:#369; line-height:24px; padding: 4px}
.sub-menu a:hover {background-image: linear-gradient(#fff, #fff, #fff);}
@media only screen and (max-width: 480px){.sub-menu {font-size:14px;}}

footer {width:100%; background:#eee; border-bottom:solid 1px #ccc; margin-top: 48px;}
footer article {max-width: 960px; margin:0 auto; padding: 0 16px;}
footer a {display:inline-block; line-height: 48px; padding:0 1.5%; font-decoration:none; font-size: 14px;}
#bottom article {max-width: 960px; margin:0 auto; background:#fff; clear:both;; font-size: 12px; text-align:right; padding-right:16px; padding-bottom:48px; }
#contact-form iframe{width: 100%; height:720px; border:none;}


.slide-in{opacity: 0; transform: translateX(-100%);  transition: all 1s ease; visibility: hidden;}
.slide-in.visible {opacity: 1; transform: translateX(0); transition-delay: 0.5s; visibility: visible;}


#toggleX {display: none;}
.button-box {position: fixed; bottom: 60px; right: 0; width: 32px; height: 36px; z-index:99999; border-top:solid 1px #ccc; border-bottom:solid 1px #ccc; border-left:solid 1px #ccc;  border-radius:24px 0 0 24px; background-color: rgba(250,250,250,0.5); padding:4px 1px 3px 4px; box-shadow:0px 12px 8px -12px rgba(0,0,0,0.3);
   -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  }
.button-box label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
#showX, #aside-pop {display: none;}
#toggleX:checked ~ .button-box svg #showX {display: block;}
#toggleX:checked ~ #aside-pop {display: block;}
#aside-pop {position: fixed; bottom: 50px; right: 0; width: 80%; max-width: 600px; background: #777; color:#fff;  padding: 0 24px; border: 1px solid #ccc; border-radius:24px 0 0 24px; box-shadow:0px 12px 8px -12px rgba(0,0,0,0.3); z-index: 99997;}