﻿@charset "UTF-8";
main{position: relative;}
.secBox01{background-color: #FFFFFF;position: relative;z-index: 2;margin-bottom: -12%;}
.ProductBrief{max-width: 540px;margin: 0 auto;padding-bottom: 1rem;}
.ProductBrief h1{font-size: 22px;color: #2185E3;text-align: center;margin-bottom: 1rem;font-weight: bolder;}
.ProductBrief p{color: #7B7B7B;line-height: 24px;}
.ProductBrief li{color: #7B7B7B;padding-bottom: 0.75rem;}
.ProductBrief ul li::marker{color: #2185E3;}
.ProductSpecification{padding-top:2rem;}
.ProductSpecification h2,.ProductApplication h2{color:#2185E3;font-size: 18px;font-weight: bolder;}
.ProductSpecification table{text-align: center;vertical-align: middle;}
.ProductSpecification table thead tr th{color: #FFFFFF;letter-spacing: 1.6px;font-weight: bolder;border-bottom: 2px solid #0E4579;background-color: #2185E3;}
.ProductSpecification table tbody tr td{border-bottom: 1px solid #000000;position: relative;}
.ProductSpecification table tbody tr:nth-last-child(1) td{border-bottom-width: 2px;}

.ProductApplication h2{padding-bottom: 1rem;}
.ProductApplication ul{list-style-type: none;padding-left: 45px;}
.ProductApplication ul li{padding: 15px 0;position: relative;color: #0E4579;font-weight: bolder;}
.ProductApplication ul li img{position: absolute;width: 26px;height: 26px;left: -45px;top: 14px;}
.bg-wave{position: relative;background-image: linear-gradient(90deg, rgb(217,248,255,0.5) 0%,rgb(241,251,254,0.5) 50%, rgb(217,248,255,0.5) 100%);padding-top: 20.83%;overflow-y: hidden;padding-bottom: 150px;}
.VideoProduct{cursor: pointer;}
/* https://codepen.io/horlo/pen/MWVPBrg  */
.wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

#particles-box{
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#particles-js {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url(particles_style.css);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
@media (min-width:768px) {
    .ProductSwitch{width: 455px;margin: 0 auto;position: relative;margin-top: -22px;z-index: 3;}
    .ProductSwitch .drop{width: 335px;border-radius: 25px;border: 2px solid #2185E3;padding: 8px 1rem;text-align: center;float: right;font-weight: bolder; outline: none;position: relative;background-color: #FFFFFF;}
    .ProductSwitch .drop .dropOption{cursor: pointer;position: relative;}
    .ProductSwitch .drop .dropOption::before{content: "";display: block; width: 16px;height: 16px;position: absolute;right: 6px;top: 6px;background-repeat: no-repeat;background-size: contain;background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.7561%200.910704C12.0815%201.23614%2012.0815%201.76378%2011.7561%202.08921L6.75608%207.08921C6.43065%207.41465%205.90301%207.41465%205.57757%207.08921L0.577574%202.08921C0.252137%201.76378%200.252137%201.23614%200.577574%200.910704C0.903011%200.585267%201.43065%200.585267%201.75609%200.910704L6.16683%205.32145L10.5776%200.910704C10.903%200.585267%2011.4306%200.585267%2011.7561%200.910704Z%22%20fill%3D%22%23040509%22%2F%3E%0A%3C%2Fsvg%3E");}
    .ProductSwitch .drop .dropdown{display: none; width: 100%;height: auto;position: absolute;z-index: 2; left: 0;top: 50px;list-style-type: none;box-shadow: 4px 4px 16px 10px rgba(0, 0, 0, 0.08);border-radius: 12px;background-color: #FFFFFF;padding-left: 0;overflow: hidden;}
    .ProductSwitch .drop .dropdown.show{display: block;}
    .ProductSwitch .drop .dropdown .active{display: none;}
    .ProductSwitch .drop .dropdown a{display: block;color: #000000;border-bottom: 2px solid #9FA0A0;text-decoration: none;padding: 12px 0;}
    .ProductSwitch .drop .dropdown a:hover{color: #FFFFFF;background-color: #2185E3;;}
    .LogoSelect{position: absolute;left: 0; background-color: #2185E3;color: #FFFFFF;border-radius: 25px;padding: 10px 1rem;font-weight: bolder;z-index: 2;}
}
@media (max-width:991px) {
    .ProductSpecification{width: 710px;}
}
@media (max-width:767px) {
    .ProductSpecification{width: 100%;}
    .ProductSwitch{display: none;}
}
@media (max-width:575px) {
    .table thead{background-color: #0E4579;}
    .ProductSpecification h2{text-align: center;}
    .ProductSpecification table thead tr th{color: #FFFFFF;background-color: #0E4579;}
    .ProductSpecification table tbody tr td{border-bottom: 1px solid #FFFFFF;}
    .ProductSpecification table tbody tr:nth-child(odd) td{background-color: rgba(217, 217, 217, 0.2);}
    .ProductSpecification table tbody tr:nth-child(even) td{background-color: rgba(217, 217, 217, 0.5);}
    #draw-blood-vessel #table-1 thead tr th:nth-child(4),#draw-blood-vessel #table-1 thead tr th:nth-child(5){display: none;}
    #draw-blood-vessel #table-1 tbody tr td:nth-child(4),#draw-blood-vessel #table-1 tbody tr td:nth-child(5){display: none;}
    #blood-bag #table-1 thead tr th:nth-child(4),#blood-bag #table-1 thead tr th:nth-child(5){display: none;}
    #blood-bag #table-1 tbody tr td:nth-child(4),#blood-bag #table-1 tbody tr td:nth-child(5){display: none;}
    #cell-culture-bag #table-1 thead tr th:nth-child(3){display: none;}
    #cell-culture-bag #table-1 tbody tr td:nth-child(3){display: none;}
    .icon{position: absolute;width: 10px;height:10px;}
    .icon.icon-paly{width: 45px;height:45px;}
    .icon.icon-circle{background-color: #F5E757;border-radius: 100%;left: 8px;top: 50%;transform: translateY(-50%);}
    #draw-blood-vessel #table-2 tr td span{padding: 0 1.5rem;}
}
@media (max-width:375px) {
    .icon.icon-paly{width: 30px;height:30px;}
}
@media (max-width:350px) {
    .ProductSpecification table tbody tr td{font-size: 0.75rem;}
}