@charset "UTF-8";

/*@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap");*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { width:100%; height:100%; image-rendering:smooth; -ms-interpolation-mode: bicubic; }
body { width:100%; height:100%; text-align:center; background-color:#f4f6f1; font-size:16px; line-height:1.5; position:relative; font-weight:300; font-family:'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica;}
img{ max-width:100%; display:block;}
ul{list-style:none;}
a {text-decoration: none; outline: none; }
h1{ font-size:30px; font-weight:normal; line-height:1.5;}
h2{ font-size:26px; font-weight:normal; line-height:1.5;}
h3{ font-size:22px; font-weight:normal; line-height:1.5;}
h4{ font-size:18px; font-weight:normal; line-height:1.5;}
p{ font-size:16px; line-height:1.75; margin-bottom:20px;}


h1.product-name{ font-size: 54px; font-weight: 700; letter-spacing: 1px;}
h1.product-name sup{ font-size: 50%; font-weight: 400; vertical-align: text-top;}
h1.product-name .smaller{ font-size: 70%; vertical-align:text-bottom;}
h2.product-feature{ font-size: 30px; font-weight: 500;}

.btn-instructions{ display: block; font-size: 18px; color: #00a596; font-weight: 400; margin-bottom: 20px;  }
.btn-instructions.white{ color: #FFF; }
.btn-instructions span{ text-decoration: underline; background: url("../images/ic_description.png") left center no-repeat; background-size: 25px auto; padding-left: 28px;}
.btn-instructions.white span{ background: url("../images/ic_description_white.png") left center no-repeat; background-size: 25px auto; padding-left: 28px;}
.btn-instructions:hover span{ text-decoration: none; }

.highlight{ color:#139ea1;}

.btn{ display:inline-block; border-radius:20px; padding:5px 10px 5px 15px; font-size:0; transition: all 200ms ease-out;}
.desktop .btn:hover{ transition: all 200ms ease-out; opacity: 0.7;}
.btn span{ font-size:16px; line-height:1; }

.nowrap{ word-break:keep-all; white-space:nowrap;}
.seo{ display: none;}
.btn-grey{ background-color:#139ea1; color:#FFF; border:#139ea1 solid 1px; }
.btn-grey span{ background:url(../images/ic_arr-white.png) 100% 50% no-repeat; background-size:auto 10px; padding-right:14px;}
.btn-white{ background-color:#FFF; color:#139ea1; border:#139ea1 solid 1px; }
.btn-white span{ background:url(../images/ic_arr-grey.png) 100% 50% no-repeat; background-size:auto 10px; padding-right:14px;}
.desktop .btn-white:hover{ background-color:#139ea1; color:#FFF; }
.desktop .btn-white:hover span{ background:url(../images/ic_arr-white.png) 100% 50% no-repeat; background-size:auto 10px; }


#loader{ width:100%; height:100%; top:0; left:0; bottom:0; right:0; position:fixed; z-index:99999; display:table; overflow:hidden; pointer-events:none; background:#FFF; }
#loader.loaded{ opacity:0; transition:opacity 1s cubic-bezier(0.7,0,0.3,1);}

.wrapper{ }
.container { margin:0 auto; width:100%; max-width:1000px; position:relative; border:#000 solid 0px; }



#header{ height:100px; width:100%; background-color:rgba(255,255,255,0.95); border-bottom:#e6e6e6 solid 1px; position:fixed; top:0; left:0; z-index:9999;  }
#header .logo{ display:block; position:absolute; top:20px; left:10px; }
#header .logo img{ width:130px; }

#header .nav{ position:absolute; display: flex; align-items: center; top:0; right:10px; z-index:999;}
#header .nav .menu{ display: flex; height: 100px;}
#header .nav .menu li{ height: 100%; }
#header .nav .menu li a{ display:flex; align-items: center; height: 100%; padding: 0 15px; color:#000; font-size:23px; font-weight: 400; position:relative; transition: color ease .3s; }
.desktop #header .nav .menu li:hover>a{ color:#139ea1; transition: color ease .3s; }
.desktop #header .nav .menu li>a span{ border-bottom:rgba(255,255,255,0) solid 2px;}
.desktop #header .nav .menu li:hover>a span{ border-bottom:#139ea1 solid 2px;}
.desktop #header .nav .menu li:hover .submenu{ height: 100px; opacity: 1; transition: all ease-out .3s;}

.page-index #header .nav .menu>li:first-child{ display:none;}

#header .nav .submenu{ position: fixed; top: 100px; left: 0; width: 100%; height:0; overflow: hidden; background-color: rgba(19,158,161,0.9); display: flex; justify-content: center; opacity: 0; transition: all ease-in .3s; }
#header .nav .submenu li{}
#header .nav .submenu li a{ color: #FFF; font-size:20px; font-weight: 300; position: relative; transition: all ease-out .3s;}
.desktop #header .nav .submenu li a span{ border: 0; position: relative;}
.desktop #header .nav .submenu li a:hover{ color: #FFFFFF; top: -5px; transition: all ease-out .3s;}
.desktop #header .nav .submenu li a:hover span{ border: 0; }
.desktop #header .nav .submenu li a:hover span::after{ content: ''; width: 100%; height: 100%; top: 100%; left: 0; background: url("../images/ic_arr_up.png") 50% 0% no-repeat; background-size: 10px auto; position: absolute; }
#header .nav .submenu-faq{ padding-left: 200px; }

#header .nav .links{ display:flex; }
#header .nav .links li{}
#header .nav .links li .btn-fanpage{ background-color:#139ea1; color:#FFF; padding:6px 15px; margin:0 10px;}
#header .nav .links li .btn-fanpage span{ }
#header .nav .links li .btn-share{ background-color:#3b5999; color:#FFF; padding:6px 20px; margin:0px;}
#header .nav .links li .btn-share span{ background:url(../images/ic_facebook.png) left center no-repeat; background-size:18px auto; padding-left:22px;}


#header .mobile-menu-toggle{ top:15px; right:13px; position:absolute; cursor:pointer; 
	width: 30px;
	display:none;
	z-index:999;
	border:#000 solid 0px;
}

span.bar-1, span.bar-2, span.bar-3 {
	display: block;
	width: 30px;
	height: 3px;
	border-radius:0px;
	margin: 0 auto;
	background-color: #139ea1;
	margin-bottom: 7px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
	transform: rotate(0deg) translate3d(0px, 0px, 0px);
}

.mobile-menu-toggle.active {
	border:#FFF solid 0px;
}
.mobile-menu-toggle.active span.bar-1 {
	-webkit-transform: rotate(45deg) translate3d(5px, 8px, 0px);
	transform: rotate(45deg) translate3d(5px, 8px, 0px);
	background-color: #139ea1; width: 30px;
}
.mobile-menu-toggle.active span.bar-2 {
	width: 20px;
	opacity: 0;
}
.mobile-menu-toggle.active span.bar-3 {
	-webkit-transform: rotate(-45deg) translate3d(5px, -9px, 0px);
	transform: rotate(-45deg) translate3d(5px, -9px, 0px);
	background-color: #139ea1; width: 30px;
}



.content{ margin-top:100px; padding:20px 0 0 0;}
.content h2.title{ font-size: 32px; font-weight: 500; color:#139ea1; margin-bottom:30px;}

.page-products .content{ padding: 0; }


.section-arena { padding:0 20px; }
.section-arena .arena{ width: 100%; max-width:960px; margin:0 auto; overflow:hidden; }



.section-category{ padding:20px 0;}
.section-category .category-list{ text-align:center; display: flex; flex-wrap: wrap; justify-content:center;}
.section-category .category-list li{ background-color:#FFF; border:#139ea1 solid 1px; border-radius:10px; width:30.33%; margin:0 1.5% 30px; padding:15px 10px; cursor:pointer; transition: all 200ms ease-out;}
.section-category .category-list li.on,
.desktop .section-category .category-list li:hover{ border:#139ea1 solid 1px;}
.desktop .section-category .category-list li:hover .btn{ opacity: 0.7; }
.section-category .category-list li a{ display:block;}
.section-category .category-list li h3{ color:#000;}
.section-category .category-list li .pic{ width: 100%; max-width: 218px; margin:0 auto 10px auto;}
.section-category .category-list li .btn{ }

.section-category .category-list li.category-contact{  background:#fff url(../images/bg-contact-lens-area.jpg) top center no-repeat; background-size:100% auto;}
.section-category .category-list li.category-faq{background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #cce5e1 100%);
background: -webkit-linear-gradient(top,  #ffffff 0%,#cce5e1 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#cce5e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cce5e1',GradientType=0 );}
.section-category .category-list li.category-faq h3{ color: #239b95; font-size: 30px; position: relative; bottom: -50px;}


.section-list{ background-color:#FFF;}
.section-list .container{ max-width:100%; padding:0; border:#000 solid 0px;}
.section-list h2{ color:#139ea1;}
.section-list .list{ padding: 30px 0; border: #634040 solid 0px;}
.section-list .list:nth-child(odd){ background-color: #f4f6f1;}

.section-list .list .combo-box{width: 100%; max-width: 1000px; margin: 0 auto;}
.section-list .list .box{ display:inline-block; vertical-align:top; width:48%; margin:0 0.5% 10px 0.5%; background-color: #FFF; border:#e6e6e6 solid 1px; border-radius:10px; padding-top:15px;}
.section-list .list .box h2{ color:#139ea1;}
.section-list .list .box .p-list li{ float:none; display:inline-block; border:0; width:48%; margin:0 0.5%;}

.section-list .list .p-list{ width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center;}
.section-list .list .p-list li{ background-color: #FFF; border:#e6e6e6 solid 1px; border-radius:10px; width:24%; margin:0 0.5% 15px 0.5%; padding:15px 0px 20px 0px; cursor:pointer;
   -webkit-transition: all 200ms ease-out;
           transition: all 200ms ease-out;}
.desktop .section-list .list .p-list li:hover{ border:#139ea1 solid 1px;}
.desktop .section-list .list .box .p-list li:hover{ border:0;}
.section-list .list .p-list li a{ display:block;}
.section-list .list .p-list li h3{ color:#000; font-weight: 500; }
.section-list .list .p-list li .pic{ margin:0px auto 10px auto;}

.section-list .list .p-list li p.features{ color:#000; font-size: 18px; font-weight: 500; line-height: 1.5; margin-bottom: 15px;  text-align: center;}

.section-list .list .p-list li .btn{}

.desktop .section-list .list .p-list li:hover .btn{ background-color:#139ea1; color:#FFF; }
.desktop .section-list .list .p-list li:hover .btn span{ background:url(../images/ic_arr-white.png) 100% 50% no-repeat; background-size:auto 10px; }

.section-list .list1 .p-list{ max-width: 740px; justify-content: flex-start; }
.section-list .list1 .p-list li{ width:32.33%; }


.section-product{}
.section-product .container{ width:90%; padding:20px 0 40px 0;}
.section-product .product{ }
.section-product .product .pic-box{ float:left; width:50%;}
.section-product .product .pic-box .pic{ width:80%; margin:0 auto; }
.section-product .product .pic-box .note{ /*margin-top:-30px;*/ margin-top:0px; margin-bottom: 20px;}
.section-product .product .pic-box .note .highlight{ border:#139ea1 solid 1px; border-radius:5px; padding:3px 20px; display:inline-block; }
.section-product .product .txt-box{ float:left; width:48%; text-align:left;}
.section-product .product .txt-box .name{ max-height:50px; margin:20px auto 10px 0;}
.section-product .product .txt-box .type{ max-height:29px; margin:10px auto 10px 0;}
.section-product .product .txt-box h2{ margin-bottom:20px; word-break:break-all;}
.section-product .product .txt-box ul.features{ margin-bottom:20px; }
.section-product .product .txt-box ul.features li{ background:url(../images/ic_dot.png) 0px 15px no-repeat; background-size:6px auto; padding-left:13px; margin-bottom:5px; word-break:break-all;}
.section-product .product .txt-box ul.features li h2,
.section-product .product .txt-box ul.features li span.highlight{ display: block; margin-bottom:0; font-size: 20px; }

.section-product .product .txt-box .table{ display:table;}
.section-product .product .txt-box .table .row{ display:table-row;}
.section-product .product .txt-box .table .row:last-child .cell{ border:0;}
.section-product .product .txt-box .table .cell{ display:table-cell; padding-bottom:5px; padding-top:5px; }
.section-product .product .txt-box .table .cell-1{ white-space:nowrap; padding-right:5px; }
.section-product .product .txt-box .table .cell-1 span{ padding:0 15px; display:inline-block; background-color:#6dc1c1; border-radius:20px; color:#FFF; }
.section-product .product .txt-box .table .cell-2{ border-bottom:#CfCfCF solid 1px;}

.section-product .product .btn-buy{ display:inline-block; width:95%; max-width:360px; border:#139ea1 solid 1px; border-radius:7px; overflow:hidden; box-shadow:rgba(0,0,0,0.1) 0 0 5px;}
.desktop .section-product .product .btn-buy:hover{ /*border:#139ea1 solid 1px; box-shadow:rgba(0,0,0,0.3) 0 0 5px;*/}
.section-product .product .watsons{ height:27px; display:inline-block; margin:0 5px;}



.section-use{ background-color:#139ea1;}
.section-use .container{ width:100%; padding:30px 0;}
.section-use h2.title{ background-color: #fff100; color: #139ea1; font-size: 24px; font-weight: 500; letter-spacing: 1px;  padding: 10px 20px; margin:0 auto 30px; display: inline-block; }
.section-use .step-box { overflow:hidden; width:100%; max-width:860px; margin: 0 auto;}
.section-use .step-box .step{ margin-bottom:15px;}
.section-use .step-box .step li{ font-family:Arial; display:inline-block;  border:#FFF solid 2px; border-radius:100%; color:#FFF; cursor:pointer; width:90px; height:90px; line-height:90px; margin:0 5px;
   -webkit-transition: all 200ms ease-out;
           transition: all 200ms ease-out;}
.desktop .section-use .step-box .step li:hover,
.section-use .step-box .step li.on{ background-color:#FFF; color:#eeb600; font-weight:bold;}
.section-use .step-box .step li.on .txt{ color:#139ea1;}
.section-use .step-box .step li .txt{ padding-right:5px;}
.section-use .step-box .step li.sp .txt{ padding-right:0px;}
.section-use .step-box .step li.sp{ }

.section-use .step-content{ width:100%; max-width:860px; background-color:#FFF; border-radius:20px; margin:10px auto; overflow:hidden;}
.section-use .step-content li{ padding:10px; display:table; }
.section-use .step-content li .pic-box{ width:35%; display:table-cell;}
.section-use .step-content li .pic-box .pic{ max-width:240px; margin:0 0 0 auto;}
.page-cl-solution .section-use .step-content li .pic-box .pic{ padding:15px;}
.section-use .step-content li .txt-box{ width:60%; text-align:left; display:table-cell; vertical-align:middle; border:#000 solid 0px;}
.section-use .step-content li .txt-box h3{ color:#f4a026; margin:0; font-size: 26px; font-weight: 700; }
.section-use .step-content li .txt-box h3 span{ font-size:180%; margin: 0 5px 0 2px; font-family:Arial; font-style:italic;}
.section-use .step-content li .txt-box .text{ color:#139ea1; font-size: 18px; font-weight: 400; }


.section-use .list{ display: flex; flex-wrap: wrap; width:90%; max-width:980px; margin: 0 auto;}
.section-use .list li{ background-color: #fff; border-radius: 10px; width: 31.33%; margin: 0 1% 20px; overflow: hidden;}
.section-use .list li figure{ padding: 10px 0; }
.section-use .list li figure img{ width: 150px; margin: 0 auto;}
.section-use .list li figcaption{ }
.section-use .list li figcaption h3{ color: #434343; font-size: 20px; font-weight: 700; margin-bottom: 3px;}
.section-use .list li figcaption h3 span{ background-color: #139ea1; border-radius: 50px; color: #fff; display: block; font-size: 18px; font-style: italic; font-family: Arial; width: 120px; margin: 0 auto 10px; padding: 5px 15px 4px; letter-spacing: 2px;}
.section-use .list li figcaption p{ color:#139ea1; padding: 0 20px; }


.section-use .note{ font-size:13px; color:#FFF; text-align:left; width:90%; margin:0px auto;}

.section-wash{}
.section-wash .container{ max-width:100%;}
.section-wash .container h2{ color:#139ea1; margin-bottom:5px;}
.section-wash .intro{ display:table; }
.section-wash .intro .box{ display:table-cell; vertical-align:middle; width:50%;}
.section-wash .intro .left{ background-color:#bde5e6;}
.section-wash .intro .right{ background-color:#FFF;}
.section-wash .intro .box .inner{ width:100%; max-width:500px; padding:50px 0; }
.section-wash .intro .left .inner{ margin:0 0 0 auto;}
.section-wash .intro .right .inner{ margin:0 auto 0 0;}
.section-wash .intro p{ margin-bottom:15px; line-height:1.5;}


.section-wash-demo{ }
.section-wash-demo h3{ margin-bottom:15px;}
.section-wash-demo h3 br{ display:none;}
.section-wash-demo ul{ width:100%; max-width:380px; margin:0 auto;}
.section-wash-demo ul li{ display:inline-block; background:url(../images/ic_dot.png) 3px 9px no-repeat; background-size:8px auto; padding-left:17px; margin-bottom:15px;}
.section-wash-demo ul li .pic{ margin:5px auto 15px auto;}
.section-wash-demo ul li .pic1{ max-width:250px;}
.section-wash-demo ul li .pic2{ max-width:200px; margin:10px auto 15px auto; }

.section-wash-introduce{ }
.section-wash-introduce .top-box{}
.section-wash-introduce .top-box .left-box{ float:left; width:38%; margin-left:7%; text-align:left;}
.section-wash-introduce .top-box .right-box{ float:right; width:38%; margin-right:5%; text-align:left;}
.section-wash-introduce .bottom-box{ width:80%; margin:0 auto; }
.section-wash-introduce .bottom-box p{ }









.section-cl{}
.section-cl .container{ max-width:100%;}
.section-cl .intro{ display:table; }
.section-cl .intro .box{ display:table-cell; vertical-align:middle; width:50%;}
.section-cl .intro .left{ background-color:#bde5e6;}
.section-cl .intro .right{ background-color:#FFF;}
.section-cl .intro .box .inner{ width:100%; max-width:500px; padding:50px 0; }
.section-cl .intro .left .inner{ margin:0 0 0 auto;}
.section-cl .intro .right .inner{ margin:0 auto 0 0;}
.section-cl .intro h2{ color:#139ea1;}
.section-cl .intro p{ margin-bottom:15px; line-height:1.5;}
.section-cl .intro .point{ margin:20px auto 5px auto; max-width:80px;}
.section-cl .intro .pic{ margin:0 auto;}
.section-cl .intro .pic1{ max-width:250px;}
.section-cl .intro .pic2{ max-width:250px;}



.section-stores{ background-color: #FFF; padding: 50px 0; }
.section-stores .container{ }
.section-stores .list{ width: 100%; max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center;}
.section-stores .list li{ width: 31.33%; margin:0 1% 30px 1%;}
.section-stores .list li a{ display: block; transition: all ease 0.3s;}
.desktop .section-stores .list li a:hover{ opacity: 1; transition: all ease 0.3s;}
.section-stores .list li img{}

.section-stores .buy{ position:fixed; right:0; top:50%; width:54px; height:213px; margin-top:-110px; z-index:99; cursor:pointer; transition:all ease .5s; }
.desktop .section-stores .buy:hover{ opacity:0.8; transition:all ease .5s;}

.page-cl-solution .section-stores .list{ max-width: 500px;}
.page-cl-solution .section-stores .list li{ width: 48%;}

.section-faq{}
.section-faq .container{ width:94%; max-width:860px; margin:0 auto 30px auto; }
.section-faq .faq-list{ text-align:left; margin-bottom:15px; }
.section-faq .faq-list li{ }
.section-faq .faq-list li .quiz{ background-color:#139ea1; border-radius:7px; padding:5px 5%; margin-bottom:7px; cursor:pointer;}
.section-faq .faq-list li .quiz h4{ color:#FFF;}
.section-faq .faq-list li .quiz h4 span{ color:#fff100; width:40px; display:inline-block;}
.section-faq .faq-list li.on .quiz h4,
.section-faq .faq-list li:hover .quiz h4{ color:#fff100;}
.section-faq .faq-list li .ans{ background-color:#fff; border:#139ea1 solid 1px; border-radius:7px; padding:15px 5%; margin-bottom:7px; display:none; }
.section-faq .faq-list li .ans .txt-table{ display:table;}
.section-faq .faq-list li .ans .fulltxt-box{ }
.section-faq .faq-list li .ans .txt-box{ display:table-cell; vertical-align:middle; /*float:left;*/ width:65%;}
.section-faq .faq-list li .ans .fulltxt-box p,
.section-faq .faq-list li .ans .txt-box p{ margin-bottom:0; line-height:1.75;}
.section-faq .faq-list li .ans .pic-box{ display:table-cell; vertical-align:middle; /*float:right;*/ width:30%;}
.section-faq .faq-list li .ans .pic-box .pic{ width:100%; max-width:180px; margin:0 auto;}



.section-video{ }
.section-video .container{ width:94%; max-width:860px; margin:0 auto 30px auto; border:#cae6e4 solid 1px; background-color:#FFF; border-radius:7px; padding:15px 5%;}
.section-video .video-info{ text-align:center; border-bottom-left-radius:7px; border-bottom-right-radius:7px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f9f9f9 0%, #f9f9f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f9f9f9 0%,#f9f9f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f9f9f9 0%,#f9f9f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}

.section-video .video-info .pic-box{ display:inline-block; width:40%;}
.section-video .video-info .pic-box .pic{ max-width:200px; margin:0 auto;}
.section-video .video-info .txt-box{ display:inline-block; width:55%; vertical-align:top; text-align:left; }
.section-video .video-info .txt-box h3{ color:#139ea1; margin:7px 0;}
.section-video .video-info .txt-box h4{}
.section-video .video-info .txt-box .btn-go{ margin:15px 0;}

.video-container { position: relative; /*padding-top: 30px;*/ height: 0; overflow: hidden; padding-bottom: 56.25%;} 
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



.section-privacy{ text-align:left; }
.section-privacy .container{ width:94%; max-width:860px; padding:20px 0 50px 0;}
.section-privacy h3{ line-height:2;}
.section-privacy p{ font-size:15px; line-height:1.75; margin-bottom:30px; }
					

/*-----------------------------------  cookie-box  -----------------------------------*/

#cookie-box{ position:fixed; bottom:10px; left:5%; right:5%; background-color:#FFF; border:#e9e9e9 solid 1px; text-align:left; padding:10px 40px 10px 10px; box-shadow:rgba(102,102,102,0.5) 0 0 10px; font-size:12px; line-height:1.3; display:none; z-index:99999; }
#cookie-box.fadeOut{ display:none; z-index: -1; opacity: 0; pointer-events: none;}
#cookie-box h3{color:#999; font-size:14px; line-height:1.75; letter-spacing:1px;}
#cookie-box .btn-close{ background-color:#999; color:#FFF; font-size:24px; line-height:30px; height:30px; width:30px; text-align:center; cursor:pointer; position:absolute; top:5px; right:5px;}
#cookie-box a{color:#999; text-decoration:none;}
#cookie-box a:hover{ color:#000; text-decoration:underline;}





#footer{ background-color:#FFF; padding:30px 0 0 0; border-top: #139ea1 solid 1px;}
#footer .container{ width:90%; margin-bottom: 20px;}
#footer .logo-box{ width: 100%; margin: 0 auto 30px;}
#footer .logo-box .logo{ width: 100px; margin:0 auto; }
#footer .numbers-box{ text-align:center; color:#707070;}
#footer .numbers-box p{ font-size:12px; line-height:1.5; margin-bottom:5px; }
#footer .numbers-box p a{ color:#707070;}
#footer .numbers-box .copyright{ margin-bottom: 15px; }
#footer .numbers-box .copyright br{ display:none; }
#footer .numbers-box .service{ margin-bottom: 15px; }
#footer .numbers-box .service br{ display: none;}
#footer .numbers-box .numbers{ }
#footer .numbers-box .note{}
#footer .sns { border-top: #dddddd solid 1px; padding: 20px 0;}
#footer .sns ul{ display: flex; justify-content: center;}
#footer .sns ul li{ padding: 0 20px; border-right: #dddddd solid 1px;}
#footer .sns ul li:last-child{ border-right: 0;}
#footer .sns ul li a{ display: block; width: 40px; transition: all ease-out 0.2s;}
#footer .sns ul li a:hover{ opacity: 0.6; transition: all ease-out 0.2s;}
#footer .sns ul li a img{ }
#footer .links { background-color:#139ea1; padding:10px 0;}
#footer .links .list{ text-align:center; font-size:0; }
#footer .links .list li{ display:inline-block; line-height:1; border-right:#FFF solid 1px; padding:0 5px;}
#footer .links .list li:last-child{ border:0; padding:0 0 0 5px;}
#footer .links .list li a{ font-size:15px; color:#FFF; display:block; margin:0 5px;}


.none{ display:none !important;}


#gotop {
    display: none;
    position: fixed; right: 10px; bottom:50px; z-index:99;
	width:50px; height:50px; padding-top:22px;
    font-size: 14px; text-align:center;
    background:rgba(19,158,161,0.6) url(../images/ic_gotop.png) top center no-repeat; background-size:35px 35px; border-radius:25px;
    color:#FFF; border:rgba(255,255,255,0.35) solid 1px;
    cursor: pointer;
}

.desktop #gotop:hover { background-color:#45c3de;}



/*-----------------------------------          -----------------------------------*/

/* Clear Fix */   
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }   
.clearfix { display:inline-block; }   
/* Hide from IE Mac */   
.clearfix {display:block;}   
/* End hide from IE Mac */   
/* end of clearfix */    



/*	RESPONSIVE:  */
@media only screen and (max-width:1080px) {
h1{ font-size:28px;}
h4{ font-size:18px;}

#header{ height:55px;}
#header .logo{ top:10px; left:10px; }
#header .logo img{ width:85px; }
	

.has-active-menu{ overflow: hidden;}
.has-active-menu #header .nav{ right:0; transition:all ease 0.5s;}
#header .nav{ position:fixed; display: block; top:55px; left: auto; right:-100%; padding: 20px 0; width:100%; height: calc(100vh - 55px); background-color:#139ea1; overflow-y: auto; transition:all ease 0.5s;}
#header .nav .menu{ display: block; width:90%; max-width: 400px; height: auto; margin: 0 auto;}
#header .nav .menu li{ height:auto; }
#header .nav .menu li a{ color: #FFF; display: block; text-align: left; font-size:28px; line-height:45px; font-weight: 500;}
#header .nav .menu>li>a>span{ background: url("../images/ic_arr-white.png") 0% 60% no-repeat; background-size: 15px auto; padding-left: 20px;}
#header .nav .submenu{ position:relative; top:auto; left:auto; height:auto; background-color: transparent; display:block; opacity:1; }
#header .nav .submenu li{ margin-left: 40px;}
#header .nav .submenu li a{ color: #affaff; font-size:22px; font-weight: 400; position: relative;}
#header .nav .submenu li a::before{ content: ''; width: 8px; height: 8px; top: 50%; left: 0; margin-top: -4px; border-radius: 10px; background-color:#affaff; position: absolute; }
#header .nav .submenu-faq{ padding-left:0; }
	
#header .nav .links{ width: 100%; margin: 20px auto 100px; justify-content: center;}
#header .nav .links li { margin: 0 5px;}
#header .nav .links li .btn-fanpage{ background-color: #FFF; color: #3b5999;}
#header .nav .links li .btn-fanpage,
#header .nav .links li .btn-share{ padding:10px 0px; width:150px; margin:15px auto;}
#header .nav .links li .btn-fanpage span,
#header .nav .links li .btn-share span{ font-size:20px;}

#header .mobile-menu-toggle{ display:block; }

.content{ margin-top:55px; padding:0px 0 0 0;}
.content h1.title{ margin-bottom:10px;}

.section-arena { padding:0 10px;}

#section-stores .buy{ width:40px; height:auto; }	
}

/*	RESPONSIVE:  */
@media only screen and (max-width:1000px){
	
.section-stores .list{ width: 94%; max-width: 500px; margin: 0 auto;}
.section-stores .list li{ width: 47%; margin: 0 1.5% 20px; }
}
/*	RESPONSIVE:  */
@media only screen and (max-width:768px){
	

h3{ font-size:22px;}
h4{ font-size:20px;}
p{ font-size:18px; }
li{ font-size:18px;}

#header .nav .menu li .item{ font-size:26px; font-weight:bold;}


.page-index .content{ padding: 0;}
	
.section-arena { padding:0px;}

.section-category .container{ width:94%; max-width:500px; }
.section-category .category-list li{ width:49%; margin:0 2% 15px 0%; padding:10px; display:block; }
.section-category .category-list li:nth-child(2n){ margin:0 0% 15px 0%;}

.section-list .container{ /*width:94%; max-width:500px;*/ }
.section-list .list .p-list{ width:94%; max-width: 500px;}
.section-list .list .p-list li{ width:49%; margin:0 2% 15px 0%; padding:10px 0;}
.section-list .list .p-list li:nth-child(2n){ margin:0 0% 15px 0%;}
.section-list .list .p-list li p.features{ font-size: 16px;}	
.section-list .list .combo-box{width: 94%; max-width: 500px; }
.section-list .list .box{ display:inline-block; width:100%; margin:0 auto 10px auto;}
.section-list .list .box .p-list li{ }

.section-product .container{ width:94%; max-width:500px; padding:0px 0 40px 0;}
.section-product .product{ }
.section-product .product .pic-box{ float:none; width:100%;}
.section-product .product .pic-box .pic{ width:75%; max-width:330px; }
.section-product .product .pic-box .note{}
.section-product .product .txt-box{ float:none; width:90%; margin:50px auto 0 auto; }

.section-use .step-box .step{ margin-bottom:15px;}
.section-use .step-box .step li{ width:55px; height:55px; line-height:55px; font-size:13px;}


.section-use .list{ max-width:500px; }
.section-use .list li{ width: 98%; margin: 0 1% 20px; }
.section-use .list li figure img{ }
	
	
.section-wash .intro{ display:block; }
.section-wash .intro .box{ display:block; width:100%;}
.section-wash .intro .box .inner{ max-width:90%; margin:0 auto; padding:30px 0;}

.section-cl .intro{ display:block; }
.section-cl .intro .box{ display:block; width:100%;}
.section-cl .intro .box .inner{ margin:0 auto; padding:30px 0;}


	

.section-faq .faq-list li .quiz h4 span{ display:block; float:left; border:#139ea1 solid 1px;}


.section-video{ margin:0 auto 20px auto; }
.section-video .container{ padding:10px;}
.section-video .video-info{/* margin-top:15px;*/}
.section-video .video-info .pic-box{ display:block; width:100%;}
.section-video .video-info .pic-box .pic{ }
.section-video .video-info .txt-box{ display:block; width:100%; text-align:center;}
.section-video .video-info .txt-box h4{ font-size:18px;}


#footer .numbers-box .copyright br{ display: block; }
#footer .numbers-box .service br{ display: block;}
	
}



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

h1.product-name{ font-size: 32px; letter-spacing: 0; text-align: center;}
h2.product-feature{ font-size: 22px; text-align: center;}	
	
.section-category h3,
.section-list h3{ font-size:18px;}
.section-category .category-list li.category-faq h3{ bottom: -30px;}

.section-product .product .pic-box .pic{ max-width:300px; }
.section-product .product .txt-box .table{ display:block;}
.section-product .product .txt-box .table .row{ display:block; margin-bottom:15px; }
.section-product .product .txt-box .table .cell{ display:block; padding-bottom:0px; padding-top:0px; border-bottom:0px; margin-top:5px;}
.section-product .product .txt-box .table .cell-1{ padding:0px; }
.section-product .product .txt-box .table .cell-1 span{}
.section-product .product .txt-box .table .cell-2{ }

.section-use .step-box .step{ margin-bottom:10px;}
.section-use .step-box .step li{ width:35px; height:35px; line-height:32px; margin:0 3px; font-size:20px;}
.section-use .step-box .step li span{ display:none;}
.section-use .step-box .step li.sp{ width:auto; border-radius:35px; padding:0 10px;}
.section-use .step-box .step li.sp span{ display:block; line-height:29px;}

.section-use .step-content{ width:90%; margin:10px auto; }
.section-use .step-content li{ padding:15px 0; display:block; }
.section-use .step-content li .pic-box{ width:100%; display:block; }
.section-use .step-content li .pic-box .pic{ margin:0 auto; max-width:150px;}
.page-cl-solution .section-use .step-content li .pic-box .pic{ margin:0 auto; max-width:240px; }
.section-use .step-content li .txt-box{ width:80%; margin:0 auto; text-align:center; display:block; }
.section-use .step-content li .txt-box h2{ line-height:1.3;}
.section-use .step-content li .txt-box h2.text{ font-size:18px; margin-bottom:10px; text-align:left; }
.section-use .step-content li .txt-box h2.text br{ display:none;}

.section-wash-demo h3 br{ display:block;}
.section-wash-demo ul{ text-align:left;}
.section-wash-demo ul li{ display:block; }
.section-wash-demo ul li .pic{ max-width:150px;}

.section-wash-introduce .top-box .left-box,
.section-wash-introduce .top-box .right-box{ float:none; width:80%; margin:0 auto; text-align:center;}
.section-wash-introduce .top-box .left-box p,
.section-wash-introduce .top-box .right-box p,
.section-wash-introduce .bottom-box p{ text-align:left;}

	
.section-faq .faq-list li .ans{ padding:10px 5%;}
.section-faq .faq-list li .ans .txt-table{ display:block;}
.section-faq .faq-list li .ans .txt-box{ display:block; width:100%;}
.section-faq .faq-list li .ans .pic-box{ display:block; width:100%;}
.section-faq .faq-list li .ans .pic-box .pic{ max-width:160px;}

.section-video .video-info .txt-box h4{ text-align:left; padding:0 10px;}	
.section-video .video-info .txt-box h4 br{ display:none;}

}

/*	RESPONSIVE:  */
@media only screen and (max-width:375px) {
	
.section-category h3,
.section-list h3{ font-size:16px;}
	
}
/*	RESPONSIVE:  */
@media only screen and (max-width:350px) {
	


p{ font-size:15px; }

#header .nav .links li .btn-fanpage,
#header .nav .links li .btn-share{ width:130px; }
#header .nav .links li .btn-fanpage span,
#header .nav .links li .btn-share span{ font-size:18px;}
	
.section-category h3,
.section-list h3{ font-size:13px;}
/*.page-tips h4{font-size:16px;}
.page-tips li{font-size:15px;}*/


.section-product .product .watsons{ display:block; }

.section-use .step-box .step li{ width:30px; height:30px; line-height:27px; font-size:15px;}

.section-use .step-box .step li.sp span{ line-height:25px;}

.btn span{ font-size:13px;}
	
}