/*inbody*/
.product-warp  {margin-bottom: -100px;}
.product-warp .inner {padding:0 70px;}
.product-warp h3 {font-size: 3.6rem; font-weight: 600; letter-spacing: -1px; margin-bottom: 80px;}
.product-warp .section {min-height: 850px; padding:115px 0; position: relative;}
.product-warp .section-s {height: auto; padding:115px 0; position: relative;}
.product-warp .main-visual {position: relative; height: 730px; padding-top: 150px; overflow: visible}
.product-warp .main-visual:after {content: ''; display: block; clear: both;}
.product-warp .main-visual .left-area { width: 35%; float: left;}
.product-warp .main-visual .left-area h2 {font-size: 3rem; color:#91001f; font-weight: 700; margin-bottom: 10px; line-height: 1.5; }
.product-warp .main-visual .left-area p {font-size: 3.6rem; color:#333; font-weight: 600; letter-spacing: -1px; }
.product-warp .main-visual .left-area p:nth-of-type(2) {font-size: 1.8rem; margin-top: 20px; font-weight: 400; letter-spacing: 0;}
.product-warp .main-visual .left-area p:last-of-type {margin-bottom: 90px;}
.product-warp .main-visual .left-area .btn-box a {margin-right: 5px; margin-bottom: 10px;}
.product-warp .main-visual .right-area {width: 30%; float: right; padding-top: 50px;}
.product-warp .main-visual .right-area p {margin-bottom: 25px;}
.product-warp .main-visual .img-box {position: absolute; top:100px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 2; }
.product-warp .main-visual.type2 {position: relative; height: 630px; padding-top: 100px;}
.product-warp .main-visual.type2 .left-area { width: 50%; float: left;}
.product-warp .main-visual.type2 .right-area {display: none;}
.product-warp .main-visual.type2 .img-box {position: absolute; top:100px; right: 0; transform: none; -webkit-transform: none; z-index: 2; text-align: center; width: 50%; padding-top:3%}

.product-warp .prod-design {padding-top: 220px;}
.product-warp .prod-design ul {overflow: hidden; display: table; width: 100%;}
.product-warp .prod-design ul li {display: table-cell; table-layout: fixed; width: 25%; text-align: center; padding:0 20px;}
.product-warp .prod-design ul li p {font-size: 1.8rem; margin-top: 20px;}
.product-warp .prod-design ul li p:last-of-type {font-size: 1.6rem;}


.prod-tech.tech-bg {background: url(../img/sub/blood/bpbio-tech-bg.jpg) no-repeat 50% 50%; background-size: cover;}
.prod-tech .inner:after {content: ''; display: block; clear: both;}
.prod-tech .inner {position: relative;}
.prod-tech .left-area {float: left; width: 30%}
.prod-tech .right-area {float: right; width: 30%; }
.prod-tech .txt {margin-bottom: 50px;}
.prod-tech .txt strong {display: block; font-weight: 700; margin:20px 0 10px}
.prod-tech .txt b {font-weight: 600; color:#000;}
.prod-tech .img-box {position: absolute; top:55%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.prod-tech ul {overflow: hidden; text-align: center;}
.prod-tech ul li {display: inline-block; width: 29%; margin:0 2%; text-align: center; vertical-align: top;}
.prod-tech ul li dl dt {margin:30px 0 20px; font-size: 1.8rem; color:#000; font-weight: 600;}
.prod-tech ul li p {margin:20px 0 20px; font-size: 1.8rem; color:#000; font-weight: 600;}
.prod-tech .col-3 li { width: 20.9%; }
.prod-tech .col-2 li { width: 45%;}
/*
.toggle-pop {position: relative; display: inline-block}
.toggle-pop > div {position: absolute; z-index: 2;}
.toggle-pop .pop1 {top:8.5%; left: 46%}
.toggle-pop .pop2 {top:27%; left: 39%}
.toggle-pop .pop3 {top:76.5%; left: 51%}
.toggle-pop > div button {width: 40px; height: 40px; outline: inherit; }
.toggle-pop > div span {display: none; position: relative; left: -20px; top:5px;}
*/


.prod-result { overflow: hidden;}
.prod-result .txt-box,
.prod-result .img-box {float: left; width: 50%;}
.prod-result .txt-box {padding-right: 5%;}
.prod-result .txt-box dl {margin-bottom: 30px;}
.prod-result .txt-box dl dt {font-weight: 600; color:#000; margin-bottom: 10px;}
.prod-result .txt-box dl dd {margin-bottom: 15px;}
.prod-result .txt-box dl dd:last-of-type {margin-bottom: 0;}
.prod-result .num {border-radius: 30px; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #91001f; margin-right: 10px; color:#fff; font-size: 1.5rem; vertical-align: middle;}
.prod-result .img-box {position: absolute; width:50%; right: 0%; margin-top: -40px; display: table; table-layout: fixed}
.prod-result .img-box:after {content: ''; clear: both; display: block;}
.prod-result .img-box img {max-width: 300px; max-height: 480px; transform: scale(1); -webkit-transform: scale(1); transition: all .4s ease; -webkit-transition: all .4s ease;}
.prod-result .img-box li {display: table-cell; width: 33%; text-align: center; padding:0 2%}
.prod-result .img-box li img:hover {transform: scale(0.95); -webkit-transform: scale(0.95);}
.prod-result .img-box li .num {display: block; margin-bottom: 15px; width: 40px; height: 40px; line-height: 40px; font-size: 2rem;}
.prod-result .img-box li img {display: block; border:10px solid #e4e4e4; box-shadow: 10px 10px 10px rgba(0,0,0,0.1)}
.prod-result .img-box li.wid-full {float: none; text-align: center; width: 70%}
.prod-result .img-box li.wid-full img {max-width: 500px;}
.result-slide .slick-slide {background:#edecec}
.result-slide .slick-dots {bottom: -40px;}
.result-slide .slick-dots li.slick-active button {background: #ac0430; border-color:#ac0430;}
.result-slide .slick-dots li button {border-color:#666}

.prod-testmonial {background: url(../img/sub/inbody/770-testmonial-bg.jpg) no-repeat 0 0; background-size: cover}
.inbody-570 .prod-testmonial {background: url(../img/sub/inbody/570-testmonial-bg.jpg) no-repeat 0 0; background-size: cover}
.prod-testmonial .inner {height: 100%; position: static}
.prod-testmonial ul {position: absolute; top:55%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 100%; padding:0 70px; max-width: 1400px; text-align: center;}
.prod-testmonial ul.multi li {display:inline-block; vertical-align: top; padding:30px; width: 31%; margin:0 1%; background: #fff; min-height: 370px; border-top:1px solid #ac0430; border-bottom:1px solid #ac0430; position: relative;}
.prod-testmonial ul li {display:block; vertical-align: top; padding:30px 30px 50px 30px; margin:0 1%; background: rgba(255,255,255,0.8); min-height: 370px; border-top:1px solid #ac0430; border-bottom:1px solid #ac0430; position: relative;}
.prod-testmonial ul li:before {content: ''; display: block; width: 24px; height: 24px; background: url(../img/sub/quote1.png) no-repeat 0 0; margin:0 auto 30px auto; opacity: 0.3}
.prod-testmonial ul li:after {content: ''; display: none; width: 24px; height: 24px; background: url(../img/sub/quote2.png) no-repeat 0 0; margin:30px auto 0 auto; opacity: 0.3}
.prod-testmonial ul li p { color:#555; text-align: center; margin-bottom: 35px; line-height: 1.6;}
.prod-testmonial ul li p:last-of-type {margin-bottom: 0;}
.prod-testmonial ul li .name {color:#666; font-size: 1.5rem; position: absolute; bottom: 30px; left: 0; right: 0; margin:0 auto;}
.prod-testmonial ul li .name:before {content: ''; display: block; width: 70px; height: 1px; background: #ddd; margin:0px auto 10px auto;}

.prod-model a {display: block; padding:0 20px; text-align: center;}
.prod-model a dl {margin-top: 20px;}
.prod-model a dt {font-weight: 600; color:#000; margin-bottom: 20px;}
.prod-model a img {position: relative; top:0; transition: all .4s ease; -webkit-transition: all .4s ease; margin:0 auto;}
.prod-model a:hover img { top:-20px;}

.prod-video .video {position: relative; padding-top: 42.28%; max-width: 1000px; margin:0 auto;}
.prod-video .video iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.prod-video-full .video {position: relative; padding-top:33.8%; }
.prod-video-full .video iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}


.prod-spec ul {overflow: hidden}
.prod-spec ul li {float: left; width: 33.3%; padding-right: 50px;}
.prod-spec ul li:last-of-type {padding-right: 0;}
.prod-spec ul li dl {margin-bottom: 30px;}
.prod-spec ul li dl dt {font-weight: 600; color:#000; margin-bottom: 5px;}
.prod-spec ul li dl dd {font-size: 1.5rem;}
.prod-spec h4 {margin:30px 0; padding:15px 0; border-bottom: 1px solid #ddd; border-top:1px solid #ddd; font-weight: 600; color:#000; font-size: 1.8rem;}

.prod-btm-more {text-align: center; padding:100px 0 0 0;}
.prod-btm-more a {text-align: center; }
.prod-btm-more a p {font-size: 3rem; margin-bottom: 20px; letter-spacing: -1px; }
.prod-btm-more a img {transform: scale(1); -webkit-transform: scale(1); display: inline-block}
.prod-btm-more a:hover img {animation: prodMore .3s 2 forwards; -webkit-animation: prodMore .3s 2 forwards;}
@keyframes prodMore {
	0% {transform: scale(1); -webkit-transform: scale(1);}
	50% {transform: scale(0.8); -webkit-transform: scale(0.8);}
	100% {transform: scale(1); -webkit-transform: scale(1);}
}
@-webkit-keyframes prodMore {
	0% {transform: scale(1); -webkit-transform: scale(1);}
	50% {transform: scale(0.8); -webkit-transform: scale(0.8);}
	100% {transform: scale(1); -webkit-transform: scale(1);}
}

/*inbody 770*/
.prod-video.home {background: url(../img/sub/home-video-bg.jpg) no-repeat 0 0; background-size: cover}
.prod-video.blood {background: url(../img/sub/blood-video-bg.jpg) no-repeat 0 0; background-size: cover}
.prod-video.bwa {background: url(../img/sub/bwa-video-bg.jpg) no-repeat 0 0; background-size: cover}
.prod-video.s10 {background: url(../img/sub/s10-video-bg.jpg) no-repeat 0 0; background-size: cover}
.prod-video {background: url(../img/sub/inbody/770-video-bg.jpg) no-repeat 0 0; background-size: cover}
.prod-testmonial {background: url(../img/sub/inbody/770-testmonial-bg.jpg) no-repeat 0 0; background-size: cover}

/*band*/
.band-banner .inner { height: 500px; padding:70px 0;}
.band-banner .banner1 {background: url(../img/sub/home/band-banner1.jpg)no-repeat 50% 50%; background-size: cover}
.band-banner .banner2 {background: url(../img/sub/home/band-banner2.jpg)no-repeat 50% 50%; background-size: cover}
.band-banner .banner3 {background: url(../img/sub/home/band-banner3.jpg)no-repeat 50% 50%; background-size: cover}
.band-banner .banner4 {background: url(../img/sub/home/band-banner4.jpg)no-repeat 50% 50%; background-size: cover}
.band-banner .banner4 dl {color:#fff;}
.band-banner dl dt {font-size: 3.6rem; margin-bottom: 10px; font-weight: 600}

.band3-banner .inner { height: 500px; padding:70px 0;}
.band3-banner .banner1 {background: url(../img/sub/home/band3-banner1.jpg)no-repeat 50% 50%; background-size: cover}
.band3-banner .banner2 {background: url(../img/sub/home/band3-banner2.jpg)no-repeat 50% 50%; background-size: cover}
.band3-banner .banner3 {background: url(../img/sub/home/band3-banner3.jpg)no-repeat 50% 50%; background-size: cover}
.band3-banner .banner4 {background: url(../img/sub/home/band3-banner4.jpg)no-repeat 50% 50%; background-size: cover}
.band3-banner .banner4 dl {color:#fff;}
.band3-banner dl dt {font-size: 3.6rem; margin-bottom: 10px; font-weight: 600}

/*product-intro*/
.intro-homeuse .img-box .img {background-image: url(../img/sub/home/homeuse-intro.jpg); }
.intro-homeuse .img-box.on .img {background-image: url(../img/sub/home/homeuse-intro2.jpg); }
.intro-blood .img-box .img {background-image: url(../img/sub/blood/blood-intro.jpg); }
.intro-blood .img-box.on .img {background-image: url(../img/sub/blood/blood-intro2.jpg); }
.intro-inbody .img-box .img {background-image: url(../img/sub/inbody/inbody-intro.jpg); }
.intro-inbody .img-box.on .img {background-image: url(../img/sub/inbody/inbody-intro2.jpg); }
.intro-bwa .img-box .img {background-image: url(../img/sub/bwa/bwa-intro.jpg); }
.intro-s10 .img-box .img {background-image: url(../img/sub/bwa/s10-intro.jpg); }
.intro-history .img-box .img {background-image: url(../img/history/tech-history-bg.jpg); }
.intro-data .img-box .img {background-image: url(../img/sub/data-bg.jpg); }

/*no-bottom*/
.intro-inbody,
.intro-homeuse,
.intro-blood {margin-bottom: -150px;}

.product-intro .scroll {width: 34px; height: 70px; position: absolute; bottom: 50px; left: 0; right: 0; margin:0 auto; z-index: 2; }
.product-intro .scroll i {width: 34px; height: 70px; background: url(../img/common/ico-scroll.png) no-repeat 0 0; animation: scrollAni 1.5s infinite;  -webkit-animation: scrollAni 1.5s infinite; display: inline-block; position: relative; top:0; opacity: 0.5}
.product-intro .scroll.dark i {background: url(../img/common/ico-scroll-dark.png) no-repeat 0 0;}
@keyframes scrollAni {
	0% {top:0px;}
	50% {top:10px;}
	100% {top:0px;}
}
@-webkit-keyframes scrollAni {
	0% {top:0px;}
	50% {top:10px;}
	100% {top:0px;}
}
.product-intro .img-box {position: fixed; top:0; left: 0; width: 100%; height: 100%; }
.product-intro .img-box .img {transform: scale(1.2); -webkit-transform: scale(1.2); position: absolute; top:0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; animation: productIntroBg 2s forwards; -webkit-animation: productIntroBg 2s forwards;}
@keyframes productIntroBg {
	0% { transform: scale(1.2); -webkit-transform: scale(1.2);}
	100% { transform: scale(1); -webkit-transform: scale(1);}
}
@-webkit-keyframes productIntroBg {
	0% { transform: scale(1.2); -webkit-transform: scale(1.2);}
	100% { transform: scale(1); -webkit-transform: scale(1);}
}
.product-intro .img-box h2 {position: absolute; top:50%; left: 0; width: 100%; text-align: center; font-size: 5.2rem; color:#fff; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 2; font-weight: 700; }
.product-intro .img-box h2 small {font-size: 2rem; font-weight: normal}
.product-intro .img-box h2 p {font-size: 1.9rem; font-weight: 300; line-height: 1.8;}
.product-intro .img-box h2 p:before {content: ''; display: block; width: 70px; height: 2px; background: #ac0430; margin:40px auto;}
.product-intro .txt-box {position: relative; width: 100%; height:900px; text-align: center; color:#fff; padding:10vw 0}
.product-intro .txt-box .txt-inner {position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); display: none;}
.product-intro .txt-box .txt-inner .txt {position: absolute; top:55%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 100%; max-width: 1200px; margin-top: 0;}
.product-intro .txt-box strong {display: block; font-size: 3rem; color:#fff; margin-bottom: 30px;}
.product-intro .txt-box p {font-size: 1.8rem; line-height: 1.6; margin-bottom: 20px}
.product-intro .txt-box p:last-of-type {margin-bottom: 0;}
.product-intro .intro-btn {background: #fff; position: relative; padding:100px 0; text-align: center;}
.product-intro .intro-btn a {margin:0 10px;}
.product-intro .intro-btn h3 { font-size: 3rem; color:#000; margin-bottom:50px}
.product-intro .intro-btn .social-btn {margin-top:30px;}

.product-gallery {padding:150px 0 100px;}
.product-gallery ul {overflow: hidden; margin-top: 50px;}
.product-gallery ul li {float: left; width: 15%; margin-right: 2%; position: relative; overflow: hidden;}
.product-gallery ul li a {display: block; cursor: pointer;}
.product-gallery ul li img {width: 100%; transform: scale(1); -webkit-transform: scale(1); transition: all .4s ease; -webkit-transition: all .4s ease;}
.product-gallery ul li:last-of-type {margin-right: 0;}

.product-gallery ul li a:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 2; background: rgba(0,0,0,0.2); opacity: 0; transition: all .4s ease; -webkit-transition: all .4s ease; }
.product-gallery ul li a:after {content: ''; display: block; width: 30px; height: 30px; background: url(../img/common/ico-search-w.png) no-repeat 50% 50%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); z-index: 3; opacity: 0; transition: all .4s ease; -webkit-transition: all .4s ease;}
.product-gallery ul li a:hover:before { opacity: 1;}
.product-gallery ul li a:hover:after { opacity: 1;}
.product-gallery ul li a:hover img {transform: scale(1.1); -webkit-transform: scale(1.1);}


.app-banner {background: url(../img/sub/app-bg.jpg) no-repeat 50% 50%; background-size: cover;}
.app-banner dl {margin-bottom: 20px; }
.app-banner dt {font-size: 3.6rem; margin-bottom: 20px;}
.app-banner .btn-box {text-align:left; }
.app-banner .btn-box a {margin-right: 10px;}

.ingrip-banner {background: url(../img/sub/ingrip-bg2.jpg) no-repeat 50% 50%; background-size: cover;}
.ingrip-banner dl {margin-bottom: 20px; max-width: 50%; color:#fff;}
.ingrip-banner dt {font-size: 3.6rem; margin-bottom: 20px;}


.prod-howto ul {overflow: hidden}
.prod-howto ul li {float: left; width: 25%; padding:3%; text-align: center; }
.prod-howto ul li .img-box {position: relative;}
.prod-howto ul li .img-box:after {content: ''; display: block; width: 40px; height: 40px; background: url(../img/sub/home/inlab-how-arr.png) no-repeat 50% 50%; position: absolute; top:50%; right:-55px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.prod-howto ul li:last-of-type .img-box:after {display: none;}
.prod-howto ul li dl dt {font-size: 3rem; color:#91001f; margin:30px 0 20px;}

.prod-mode {overflow: hidden; border-bottom:1px solid #ddd;}
.prod-mode .txt-box {float: left; width: 48%;}
.prod-mode .txt-box dl {margin-bottom: 30px}
.prod-mode .txt-box dl dt {font-weight: 600;}
.prod-mode .img-box {position: absolute; top:0; right: 0; width: 48%; height:100%; background: url(../img/sub/blood/bpbio250-mode.jpg) no-repeat 0 0; background-size: cover}

.prod-touch {overflow: hidden; border-top:1px solid #ddd;}
.prod-touch .txt-box {float: right; width: 48%;}
.prod-touch .txt-box dl {margin-bottom: 30px}
.prod-touch .txt-box dl dt {font-weight: 600;}
.prod-touch .img-box {position: absolute; top:0; left: 0; width: 48%; height:100%; background: url(../img/sub/blood/bpbio250-tech.jpg) no-repeat 0 0; background-size: cover}
.prod-touch .img-box.bpbio170 {position: absolute; top:0; left: 0; width: 48%; height:100%; background: url(../img/sub/blood/bpbio170-tech.jpg) no-repeat 0 0; background-size: cover}
.prod-type {border-bottom: 1px solid #ddd;}
.prod-type ul {overflow: hidden; }
.prod-type ul li {float: left; width:48%; }
.prod-type ul li:last-of-type {float: right; }
.prod-type ul li dl dt {color:#000; font-weight: 600; margin:20px 0 10px;}

.prod-measured dl {margin-bottom: 30px;}
.prod-measured dl dt { font-weight: 600; color:#000; margin-bottom: 10px;}

.product-warp.homeuse-app {padding-bottom: 200px; margin-bottom: -150px;}
.product-warp.homeuse-app .main-visual.type2 .img-box {top:30px;}
.product-warp.homeuse-app .main-visual .left-area .btn-box a {min-width: 450px; margin-bottom: 15px;}
.product-warp.homeuse-app .main-visual .left-area p:last-of-type {margin-bottom: 50px;}


.product-warp.solution .main-visual.type2 {height: 700px;}
.product-warp.solution .main-visual.type2 .img-box {padding-top: 0; width: 45%; text-align: center; left: 0; right: inherit}
.product-warp.solution .main-visual.type2 .left-area {padding-top: 10%; float: right;}
.product-warp.solution .section {min-height: 600px;}
.product-warp.solution .section .inner {display: table; width: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); max-width: 1600px;}
.product-warp.solution .section .txt-box,
.product-warp.solution .section .img-box {display: table-cell; vertical-align: middle; width: 50%; padding:0 5%;}
.product-warp.solution .section .txt-box {width: 40%}
.product-warp.solution .section .txt-box strong {display: block; margin-bottom: 5px}
.product-warp.solution .section .txt-box h3 {margin-bottom: 20px;}
.product-warp.solution .section .txt-box .app-link  {margin-top: 20px;}
.product-warp.solution .section .txt-box .app-link a {max-width: 170px;}
.product-warp.solution .section .img-box {text-align: center}
.product-warp.solution .section .img-box .solution-slide {max-width: 700px}

.product-warp.wellness .flex-box {min-height: inherit;}
.product-warp.wellness .flex-box .inner {display: flex; justify-content: space-between; }
.product-warp.wellness .flex-box .inner > div {width: 47%; position: relative;}
.product-warp.wellness .flex-box.flex-right .inner {justify-content: flex-end}
.product-warp.wellness .flex-box.flex-right .txt-box {position: absolute; top:0; left: 70px; width: 40%}
.product-warp.wellness .flex-box h3 {font-size: 3rem; margin-bottom: 50px;}




/*brand*/
.brand-inbody {padding: 90px 0 40px; position: relative; z-index:1; background: url(../img/sub/inbody/inbody-brand-bg.jpg) no-repeat 50% 50%; background-size: cover}
.brand-inbody .left {left:-200px !important;}
.brand-inbody .right {right:-200px!important;}
.brand-inbody .left, .brand-inbody .right {cursor: pointer; top:45%!important;}
#slide {height: 300px;margin:0 auto;}
.clearfix:after { content: ".";  display: block;   height: 0; clear: both;visibility: hidden }
.clearfix { height: 1%; }


.brand-home {background: #e3e2e0; text-align: center; position: relative;}
.brand-home .img-box {display: inline-block; position: relative;}
.brand-home h2 {position: absolute; top:11%; left: 0; text-align: center; width: 100%; z-index: 2; font-size:5rem; color:#101419; font-weight: 700; letter-spacing: -1px;}
.brand-home .item {position: absolute}
.brand-home .item1 {top:25%; left: 50%;}
.brand-home .item2 {top:20%; left: 77%;}
.brand-home .item3 {top:10%; left: 23.5%;}
.brand-home .item4 {top:43%; left:29%;}
.brand-home a:before {content: ''; display: block; width: 35px; height: 35px; background: url(../img/common/brand-ico.png) no-repeat 0 0; background-size: contain; position: absolute; top:-10px; right: 0; animation: brandKey 3s infinite; -webkit-animation: brandKey 3s infinite; transform: rotate(0) scale(1); -webkit-transform: rotate(0) scale(1); opacity: 1; transition: all .3s ease; -webkit-transition: all .3s ease;}
@keyframes brandKey {
0 {transform: rotate(0) scale(1); -webkit-transform: rotate(0) scale(1);}
25% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
100% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
}
@-webkit-keyframes brandKey {
0 {transform: rotate(0) scale(1); -webkit-transform: rotate(0) scale(1);}
25% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
100% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
}
.brand-home a {transform: scale(1); -webkit-transform: scale(1); transition: all .8s ease; -webkit-transition: all .8s ease;}
.brand-home a:hover {transform: scale(1.1); -webkit-transform: scale(1.1);}
.brand-home a:hover small {opacity: 1; }
.brand-home a:hover:before {opacity: 0;}
.brand-home a small {position: absolute; top:-30px; right: 0px;  white-space: nowrap; font-weight: bold; color:#000; opacity: 0; transition: all .3s  ease; -webkit-transition: all .3s  ease; font-size: 1.6rem; display: inline-block}

.img-point {position: relative; display: inline-block;}
.img-point > div {position: absolute; width: 100%}
.img-point > div strong {font-size: 1.6rem; color:#333; vertical-align: middle; margin:0 20px; position: relative;}
.img-point > div strong p {font-weight: normal; position: absolute; top:30px; left: 0; white-space: nowrap; font-size: 1.4rem; color:#777}
.img-point > div strong em {display: none;}
.img-point > div span {min-width: 250px; height: 1px; background: #ac0430; vertical-align: middle;}
.img-point > div small {width: 26px; height: 26px; position: relative; border:2px solid #ac0430; border-radius: 100px;display: inline-block; vertical-align: middle;  }
.img-point > div .img {display: none; position: absolute; top:0; left: 0; width: 300px; height: 250px; z-index: 2}
.toggle-pop > div a {width: 30px; height: 30px; background: #000 url(../img/common/ico-close-xs.png)no-repeat 50% 50%; position: absolute; top:-9px; right: -14px; z-index: 2; border-radius: 100px; background-size: 10px; z-index: 9 }

.img-point > div small:before {content: ''; display: block; width: 13px; height: 13px; background: #ac0430; z-index: 2; border-radius: 100px; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.img-point.b750 .point1 { top:1%; left:52%;}
.img-point.b750 .point2 { top:22%; left:51%;}
.img-point.b750 .point3 { top:35%; left:5%;}
.img-point.b750 .point4 { top:63%; left:5%;}
.img-point.b750 .point5 { top:88%; left:6%;}

.img-point.b320 .point1 { top:9%; left:62%;}
.img-point.b320 .point2 { top:45%; left:3%;}
.img-point.b320 .point3 { top:54%; left:-4%;}
.img-point.b320 .point4 { top:49%; left:60%;}
.img-point.b320 .point5 { top:71%; left:-4%;}

.img-point.b250 > div span {min-width: 200px;}
.img-point.b250 .point1 { top:20%; left:0;}
.img-point.b250 .point2 { top:22%; left:50%;}
.img-point.b250 .point3 { top:52%; left:65%;}
.img-point.b250 .point4 { top:75%; left:-2%;}
.img-point.b250 .point5 { top:83%; left:55%;}

.img-point.b220 .point1 { top:10%; left:46%;}
.img-point.b220 .point2 { top:29%; left:11%;}
.img-point.b220 .point3 { top:78%; left:51%;}

.img-point.b170 .point1 { top:21%; left:4%;}
.img-point.b170 .point2 { top:57%; left:7%;}
.img-point.b170 .point3 { top:68%; left:16%;}
.img-point.b170 .point4 { top:60%; left:59%;}
.img-point.b170 .point5 { top:76%; left:57%;}





.blood-intro-slide {max-width: 1920px; margin:0 auto;}
.blood-intro-slide .slick-dots li button {background: #ccc; border-color:#ccc; margin:0 4px;}
.blood-intro-slide .slick-dots li.slick-active button {background: #ac0430; border-color:#ac0430}
.blood-intro-slide.slick-slider .slick-next {right: 2%;}
.blood-intro-slide.slick-slider .slick-prev {left: 2%}
.brand-blood {background: #e3e2e0; text-align: center; position: relative;}
.brand-blood .img-box {display: inline-block; position: relative;}
.brand-blood h2 {position: absolute; top:11%; left: 0; text-align: center; width: 100%; z-index: 2; font-size:5rem; color:#101419; font-weight: 700; letter-spacing: -1px;}
.brand-blood .item {position: absolute}
.brand-blood .item1 {top:40%; left: 38%;}
.brand-blood .item2 {top:34%; left: 74%;}
.brand-blood .item3 {top:40%; left: 23%;}
.brand-blood .item4 {top:55%; left:86%;}
.brand-blood .item5 {top:42%; left:32%;}
.brand-blood a:before {content: ''; display: block; width: 35px; height: 35px; background: url(../img/common/brand-ico.png) no-repeat 0 0; background-size: contain; position: absolute; top:-10px; right: 0; animation: brandKey 3s infinite; -webkit-animation: brandKey 3s infinite; transform: rotate(0) scale(1); -webkit-transform: rotate(0) scale(1); opacity: 1; transition: all .3s ease; -webkit-transition: all .3s ease;}
@keyframes brandKey {
0 {transform: rotate(0) scale(1); -webkit-transform: rotate(0) scale(1);}
25% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
100% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
}
@-webkit-keyframes brandKey {
0 {transform: rotate(0) scale(1); -webkit-transform: rotate(0) scale(1);}
25% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
100% {transform: rotate(360deg) scale(1.3); -webkit-transform: rotate(360deg) scale(1.3);}
}
.brand-blood a {transform: scale(1); -webkit-transform: scale(1); transition: all .8s ease; -webkit-transition: all .8s ease;}
.brand-blood a:hover {transform: scale(1.1); -webkit-transform: scale(1.1);}
.brand-blood a:hover small {opacity: 1; }
.brand-blood a:hover:before {opacity: 0;}
.brand-blood a small {position: absolute; top:-30px; right: 0px;  white-space: nowrap; font-weight: bold; color:#000; opacity: 0; transition: all .3s  ease; -webkit-transition: all .3s  ease; font-size: 1.6rem; display: inline-block}

@media all and (max-width:1400px){
	.brand-inbody .left, .brand-inbody .right {width: 80px;}
	.brand-inbody .right {right: -100px!important;}
	.brand-inbody .left {left: -100px!important;}

	.img-point { width: 1280px; transform: scale(0.73); -webkit-transform: scale(0.73); transform-origin:left; -webkit-transform-origin:left;}
	.brand-home h2 {font-size:3.4vw }

	.band-banner .inner {padding:70px 20px !important;}
}
@media all and (max-width:1200px){
	.brand-inbody .right {right: -20px!important;}
	.brand-inbody .left {left: -20px!important;}

}
@media all and (max-width:1000px){
	#slide  {width:100% !important;}
	#slide ul {margin:0!important; left: 50% !important; right:0; transform: translateX(-50%); -webkit-transform: translateX(-50%); top:-70px !important;}
	.brand-inbody .left, .brand-inbody .right {top:100%!important; width: 70px; background: #f3f3f3; border-radius: 100px; padding:10px; border:1px solid #ddd}
	.brand-inbody .right {right: 400px!important;}
	.brand-inbody .left {left: 400px!important;}

	.brand-home a:before,
	.brand-blood a:before {width: 3vw; height: 3vw;}

	.band-banner .inner {padding:30px 20px !important;}
	.homeuse-dial .prod-testmonial ul {padding:0;}
	.homeuse-dial .prod-testmonial ul.multi li {width: 100%; margin-bottom: 15px; min-height: inherit;}
	.homeuse-dial .prod-testmonial ul li .name {position: relative;bottom: 0; margin-top:20px;}
	.intro-inbody > .img-box > .img {background-size: 160%}
	.intro-inbody .img-box.on .img {background-size: cover;}

	.product-intro .img-box h2 {font-size: 4rem}
	.product-intro .txt-box strong {font-size: 2.5rem;}
	.product-intro .txt-box .txt-inner .txt {padding:0 15px;}
	.product-intro .intro-btn {padding:50px 0;}
	.product-intro .intro-btn h3 {font-size: 2.5rem; margin-bottom: 30px;}
	.product-intro .intro-btn a {margin-bottom: 10px;}

	.prod-btm-more {padding-top: 50px;}
	.prod-btm-more a p {font-size: 2.5rem;}
	.prod-btm-more a img {width: 70px}
	.product-warp .inner {padding:0 30px;}
	.product-warp .main-visual {padding-top: 50px;}
	.product-warp .section {padding:50px 0; min-height: auto;}
	.product-warp h3 {margin-bottom: 30px; font-size: 3rem;}
	.prod-result .img-box {width: 100%; position: relative; margin-top: 30px}
	.prod-result .txt-box, .prod-result .img-box {float: none; width: 100%;}
	.prod-measured .txt-box {margin-top: 30px;}

	.prod-tech .img-box {width: 30%}
	.prod-testmonial ul {position: relative; top:0; left: 0; transform: none; -webkit-transform: none;}

	.product-warp .main-visual {height: auto;}
	.product-warp .main-visual .left-area {float: none; width: 100%;}
	.product-warp .main-visual .right-area {float: none; width: 100%; padding-top: 0; margin:40px 0;}
	.product-warp .main-visual .left-area p:last-of-type {margin-bottom: 20px;}
	.product-warp .main-visual .left-area h2 {font-size: 2.5rem; margin-bottom: 5px;}
	.product-warp .main-visual .left-area p {font-size: 3rem;}
	.product-warp .main-visual .img-box {top:0px !important; width: 35vw; transform: none; -webkit-transform: none; position: relative; left: 0; right: 0; margin:0 auto;}

	.product-warp .main-visual.type2 {padding-top: 50px; height: auto;}
	.product-warp .main-visual.type2 .left-area {float: none; width: 100%;}
	.product-warp .main-visual.type2 .img-box {position: relative; top:0; left: 0; padding-top: 0px; width: 100%}


	.img-point { width: 100%; transform: none; -webkit-transform: none;}
	.img-point > div {position: relative; top:0 !important; left: 0 !important; right: inherit !important; padding-top: 10px;}
	.img-point > div small, .img-point > div span {display: none;}
	.img-point > div strong {margin:0;}
	.img-point > div strong p {position: relative; top:0; white-space:normal}


	.mid-img {padding:0 30px;}
	.prod-mode .txt-box {float: none; width: 100%;}
	.prod-mode .img-box {width: 100%; height: 400px; position: relative; background-position: 50% 50%; top:0; margin-top: 50px;}
	.prod-mode .txt-box dl {margin-bottom: 20px;}

	.product-warp.solution .main-visual.type2 {margin-bottom: 50px; height: auto;}
	.product-warp.solution .section {min-height: 400px;}

	.prod-video-full .video {padding-top: 56%}

	.img-point > div strong em {display: inline-block; margin-right: 10px;}
	.img-point > div strong br {display: none;}
	.product-warp.wellness .flex-box.flex-right .txt-box {left: 30px; width: 45%}
	.product-warp.wellness .flex-box h3 {font-size: 2.3rem; margin-bottom:20px;}
}
@media all and (max-width:768px){
	.intro-inbody, .intro-homeuse, .intro-blood {margin-bottom: -100px;}

	.product-warp .section-s {padding:50px 0}
	.product-warp .prod-design {padding-top:50px}
	.product-warp .prod-design ul li {display: inline-block;  width: 49%; padding:15px; vertical-align: top;}
	.prod-tech .txt > img { width: 30px}
	.prod-result .img-box {padding:0 15px;}
	.prod-result .img-box img {max-width: 100%; max-height: inherit; border:5px solid #e4e4e4}
	.prod-result .img-box li .num {width: 30px; height: 30px; line-height: 30px; font-size: 1.5rem; font-weight: 600}
	.prod-testmonial ul {padding:0;}
	.prod-result .img-box li.wid-full img {max-width: 100%}

	.prod-touch .img-box {width: 100% !important;}
	.prod-touch .txt-box {float: none; width: 100%;}
	.prod-tech .col-3 li,
	.prod-tech .col-2 li { width: 100%; margin-bottom: 30px;}
	.prod-tech ul li dl dt {margin:20px 0 10px;}

	.prod-tech ul li {width: 45%}
	.prod-tech ul li dl dt {margin:20px 0 10px;}
	.prod-type ul li:last-of-type,
	.prod-type ul li {float: none; width:100%; margin-bottom: 25px;}

	.product-warp.solution .section {min-height: auto; padding:20px 0;}
	.product-warp.solution .section .inner {display: block; position: relative; top:0; left: 0; transform: none; -webkit-transform: none;}
	.product-warp.solution .section .txt-box, .product-warp.solution .section .img-box {display: block; width: 100%; margin:30px 0;}
	.product-warp.solution .section .img-box img {max-width: 100%; width: 100%}


	.ingrip-banner {background: url(../img/sub/ingrip-bg2.jpg) no-repeat 80% 50%; }
	.ingrip-banner dl { max-width: 100%; }
	.ingrip-banner dl dt {font-size: 3rem;}

	.product-warp.wellness .flex-box .inner {display: block;}
	.product-warp.wellness .flex-box .inner > div {width: 100%;}
	.product-warp.wellness .flex-box .inner .img-box {margin-top:20px; margin-bottom: 20px;}
	.product-warp.wellness .flex-box h3 {font-size: 2.3rem; margin-bottom: 20px;}
	.product-warp.wellness .flex-box.flex-right .txt-box {position: relative; left: 0; width: 100%;}
}
@media all and (max-width:480px){
	.app-banner .btn-box a {width: 40%}
}
@media all and (max-width:480px){
	.prod-tech .left-area,
	.prod-tech .right-area {float: none; width: 100%;}
	.prod-tech .img-box {position: relative; top:0; left: 0; transform: none; -webkit-transform: none; right: 0; width: 50%; margin:0 auto 30px auto;}
	.prod-tech .txt strong {margin:10px 0 5px;}
	.prod-tech .txt {margin-bottom: 30px;}


	.prod-spec ul li {width: 100%; padding-right: 0; float: none;}
	.prod-spec ul li dl {margin-bottom: 20px;}

	.product-warp .prod-design ul li {width: 100%; display: block;}
	.prod-tech ul li {width: 100%; display: block; margin:0 0 20px 0;}

	.brand-inbody {margin-bottom: -100px !important; padding: 0;}
	.brand-slide-wrap {transform: scale(0.7); -webkit-transform: scale(0.7)}
}


/*h30*/
.grid {display: flex; justify-content: space-between; gap:4%;}
.title3-bo {font-size: 3.5rem; color:#3e454b; font-weight: 600; margin-bottom: 50px; letter-spacing: -2px; position: relative; opacity: 1; }
.title3-bo:after {content: ''; display: block; width: 100px; height: 1px; background: #ac0430; margin-top: 30px;}


.pd-visual  {min-height: 100vh;}
.pd-visual .lang-btn {background: #eee; font-weight: 700; font-size: 1.3rem; border-radius: 4px; color:#000; padding:5px 7px; position: absolute; top:15px; right: 0px; border:1px solid #ccc;}
.pd-visual .inner {display: flex; flex-direction: column; align-content: center;}
.pd-visual .txt .content-title {padding:0;}
.pd-visual .txt .content-title p {font-size:3.5rem; letter-spacing: -1px;}
.pd-visual .txt .content-title p:after {content: ''; display: block; width: 1px; height: 40px; background: #000; margin:15px auto;}
.pd-visual .img {text-align: center; margin-top:50px;}

.pd-tech {padding:100px 15px;}
.pd-tech .grid {flex-wrap: wrap; }
.pd-tech .grid .col {width: 50%; max-width: 455px;}
.pd-tech .grid .col:nth-of-type(2n) {padding-left: 30px;}
.pd-tech .img {position: absolute; top:60%; left: 50%; text-align: center; z-index: 2; transform: translate(-50%,-50%); width: 100%; pointer-events: none;}
.pd-tech .img img {position: relative; z-index: 2; }
.pd-tech .img .bg {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%)}
.pd-tech dl {margin: 50px 0; }
.pd-tech dl dt {margin-bottom: 15px; }
.pd-tech dl .t2 {margin-bottom: 0px; font-size: 2rem;}
.pd-tech dl dd {margin-bottom: 15px; font-size: 1.4rem; }
.pd-tech dl dd img {box-shadow: 8px 8px 0 #666; border:1px solid #ddd;}

.pd-func .inner {padding:100px 15px;}
.pd-func .img {width: 52%}
.pd-func .txt {width: 48%}
.pd-func .btn-box a {margin-right: 5px;}

.pd-spec {padding:100px 15px;}
.pd-spec .table {border-top:1px solid #000;}
.pd-spec .table tr th {font-size: 1.4rem; padding:10px 20px; background: #eee; font-weight: 600}
.pd-spec .table tr td {text-align: left; color:#666; font-size: 1.4rem; padding:10px 20px;}
.pd-spec .info {font-size: 1.4rem; margin-top: 15px;}
.pd-spec .table-scroll {margin-top: 20px; border-top:1px solid #000; overflow-x: auto;}
.pd-spec .table-scroll .table {min-width: 500px;}

.pd-video {padding:100px 15px; border-bottom: 1px solid #ddd;}
.pd-video .img {text-align: center;}

.manual-h30 {display: flex; gap:20px; flex-wrap: wrap;}
.manual-h30 a {padding:15px 20px; border:1px solid #ddd; border-radius: 4px; transition: all .3s ease;}
.manual-h30 a:hover {background: #eee;}

@media all and (max-width:1400px){


}
@media all and (max-width:1200px){
	.pd-tech dl dd {white-space: normal; }
	.pd-tech dl dd .pc-view {display: none!important;}

}
@media all and (max-width:1000px){
	.title3-bo {font-size: 3.1rem; margin-bottom: 40px;}
	.title3-bo:after {margin-top: 20px; width: 50px}


	.pd-tech.bg-lt-blue {padding:50px 0;}
	.pd-tech .grid {display: block;}
	.pd-tech .grid .col {width: 100%; max-width: 100%; margin-bottom: 0;}
	.pd-tech .grid .col:nth-of-type(2n) {padding-left: 0;}
	.pd-tech .img {position: relative; top:0; left: 50%; transform: translateX(-50%); width: 80%; margin-bottom: 35px;}
	.pd-tech dl {margin:30px 0;}

	.pd-func .inner {display: block;}
	.pd-func .txt {width: 100%}
	.pd-func .img {width: 100%;}
	.pd-func .btn-box a {margin-right: 5px; width: 40%}
	.pd-func .btn-box {width: 60%}

}
@media all and (max-width:768px){
	.pd-visual {min-height: inherit; }
	.pd-visual .txt .content-title img {max-width: 200px;}
	.pd-visual .txt .content-title p {font-size: 2.3rem;}

	.pd-tech {padding:50px 0px;}
	.pd-func .inner {padding:50px 15px;}
	.pd-spec {padding:50px 0px;}
	.pd-video {padding:50px 0px;}
}
@media all and (max-width:600px){
	.pd-func .btn-box {width: 80%}
	.manual-h30 {gap:10px;}
	.manual-h30 a {padding:10px;}

}
@media all and (max-width:480px){


}