/* 20250422 */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');/*繁中-黑體*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700;900&display=swap'); /*繁中-宋體*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');  /*步驟數字*/


/* 取消新版chrome搞出來的黑框bug */
*, *:focus {
	outline: none;
}
button:active, button.active, button:focus, button.focus {
	outline: none;
	border: none;
	box-shadow: none !important;
}


/* ==================================================
   BS內建
================================================== */
body {
	--white:#fff;
	--black:#333; /*深黑色*/
	--gray:#999; /*灰色*/
	--gray-deep:#4D4D4D; /*選單深灰色*/
	--gray-light:#F2F2F2; /*淺灰色*/
	
	--blue:#004B8E; /*藍色*/
	--blue-deep:#123762; /*深藍色*/
	--blue-light:#0071BC; /*亮藍色字*/
	
	--vol:#C30D23; /*海芙電波-紅色*/
	--ultra:#004B8C; /*海芙音波媚必提-深藍色*/
	--ultra3:#2CA6E0; /*第三代海芙音波-藍色*/

	margin:0 auto;
	padding-top:90px;  /*搭配Header區固定置頂，記得不能用margin,容易和其它相衝*/
	max-width:1920px;
}

p, .form-control, table, ul, ol, .searchBox, .btn, .accordion-body {
	/*font-size: 1.4rem;  /* 1em等同於15px ~ 1rem等同於16px;*/
	font-size: 1.15rem;  /*同btn按鈕字級*/
	line-height: 1.6;
	color:var(--black);
	font-weight: 400;
	/*font-family: -apple-system, Segoe UI, Roboto, "微軟正黑體", "Helvetica Neue", Arial, sans-serif;  /*無襯線字體sans-serif*/
	font-family: 'Noto Sans TC', sans-serif;  /*繁中-黑體*/
	/*font-family: 'Noto Serif TC', serif; 繁中-宋體*/
	/*font-family: "Lora", serif; 步驟數字*/
}
ul.dotBox li {
	font-size: 1.05rem;
}
.navBrand h1 {
	font-size: 37.5px;
	font-weight: 900;
	letter-spacing:0.075rem;
	font-family: 'Noto Serif TC', serif; /*繁中-宋體*/
	display:inline-block;
	margin-bottom:0;
}

.h2, h2 {
	/*font-size: 3vw;*/
	/*font-size: 2.875rem;*/
	font-size: 2.1rem;
	line-height:1.15;
	font-weight: 900;
	letter-spacing:0.05rem;
	font-family: 'Noto Serif TC', serif; /*繁中-宋體*/
	margin-top: 0;
}
.h2 small, h2 small {
	font-weight:700;
}
.h2Box {
	padding-left:5%;
	padding-right:5%;
	box-sizing: border-box;
}
.h3, h3, .h2 small, h2 small {
	/*font-size: 2.5vw;*/
	font-size: 1.75rem;
	font-weight: 700;
	margin-top: 0;
}
.h3Box {
	width:75%;
	margin:0 auto;
	box-sizing: border-box;
}
.h4, .h5, .h6, 
h4, h5, h6 {
	font-family: 'Noto Sans TC',sans-serif; /*繁中-黑體*/
	margin-top: 0;
	margin-bottom: 1.25rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing:0.05rem;
}
.h4, h4 {
	/*font-size: 1.9vw;*/
	font-size: 1.65rem; 
	font-weight: 500;
	color: var(--gray1);
	margin-bottom: 1.75rem;
}
.frameBox .h4, .frameBox h4 {
	line-height: 1.5;
}
.h5, h5 {
	/*font-size: 1.3vw;*/
	font-size: 1.25rem; 
	font-weight: 400;
	line-height: 1.65;
	text-align: justify;
}
.h6, h6 {
	font-size: 1.25rem;
}
p {
	margin-bottom: 1.1rem;
	text-align: justify;
}
.small, small {
    font-size: .8em;
}

ol.ct,
ul.ct {
	margin-left: -0.55em;
}
/*加寬行距*/
ol.ct li:not(:last-child),
ul.ct li:not(:last-child) {
	margin-bottom: 0.65rem;
}

main {
    padding-bottom:5%;
}
section:not(:first-child)  {  /*排除第一個子元素*/
    padding-top:100px; /*為了筆電可以儘量不切到video*/
}

.blockquote {
    margin: 0 0 5.5%;
	border-left:7px solid var(--blue-deep);
	padding-left:0.75em;
}
.badge {
    padding: 0 0.8em 0.1em;
    font-size:inherit;
    border-radius: 0.75rem;
	margin-bottom:0.75em;
}
.badge h5 {
    line-height: 1.35;
}

hr {
    margin: 1em 0;
    background-color: var(--gray);
    opacity:1;
}

.list-inline-item {
    display: inline-block;
	margin-bottom:0.5rem;
}
.mt-5 {
    margin-top: 2rem !important;
}



@media (min-width: 1600px) { 
	section:not(:first-child)  {  /*排除第一個子元素*/
		padding-top:110px;
	}
	p, .form-control, table, ul, ol, .searchBox, .btn, .accordion-body {
		font-size: 1.175rem;  /*同btn按鈕字級*/
	}
	.navBrand h1 {
		font-size: 39px;
	}
	.h2, h2 {
		/*font-size: 3vw;*/
		font-size: 2.5rem;
	}
	.h3, h3, .h2 small, h2 small {
		/*font-size: 2.5vw;*/
		font-size: 2rem;
	}
	.h3, h3 {
		/*font-size: 2.5vw;*/
		xxxfont-size: 3rem;
	}
	.h4, h4 {
		/*font-size: 1.9vw;*/
		xxxfont-size: 2.3rem; 
	}
	.h5, h5 {
		/*font-size: 1.3vw;*/
		xxxfont-size: 1.55rem; 
	}
	.h6, h6 {
		xxxfont-size: 1.375rem;
	}
	ul.dotBox li {
		xxxfont-size: 1.3rem;
	}
}


/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	body {
		padding-top:88px;
	}
	section:not(:first-child) {
		padding-top:8.5%;
	}
	p, .form-control, table, ul, ol, .searchBox, .btn, .accordion-body {
		font-size: 17.5px;
	}
	ul.dotBox li {
		font-size: 16.5px;
	}
	.navBrand h1 {
		font-size: 33px;
	}
	.h2, h2 {
		font-size: 3.75vw;
	}
	.h3, h3, .h3, h3, .h2 small, h2 small {
		font-size: 3.25vw;
	}
	.h4, h4 {
		font-size: 24px;
	}
	.h5, h5 {
		font-size: 18.5px; 
	}
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	body {
		padding-top:65px;
	}
	section:not(:first-child) {
		padding-top:9%;
	}
	p, .form-control, table, ul, ol, .searchBox, .btn, .accordion-body {
		font-size: 17.25px;
	}
	ul.dotBox li {
		font-size: 16.5px;
	}
	.navBrand h1 {
		font-size: 33px;
	}
	.h2, h2 {
		font-size: 4.25vw;
	}
	.h3, h3, .h3, h3, .h2 small, h2 small {
		font-size: 3.5vw;
	}
	.h4, h4 {
		font-size: 22px;
	}
	.h5, h5 {
		font-size: 18px; 
	}
	ol.ct,
	ul.ct {
		margin-left: -0.65em;
	}
}


/*手機版xs*/
@media (max-width: 767.98px) { 
	main {
		padding-bottom:3.5em;
	}
	section#down {
		xxxxxxpadding-top:10%;
		xxxxpadding-top:8%;
	}
	section:not(:first-child) {
		padding-top:17%;
	}
	body {
		padding-top:58px;
	}
	p, .form-control, table, ul, ol, .searchBox, .btn, .accordion-body {
		font-size: 16px;
	}	
	ul.dotBox li {
		font-size: 15px;
	}
	.navBrand h1 {
		font-size:26px;
	}
	.h2, h2 {
		font-size: 22px;
	}
	.h2Box {
		padding-left:0;
		padding-right:0;
	}
	.h3, h3, .h3, h3, .h2 small, h2 small {
		font-size: 20px;
	}
	.h3Box {
		width:85%;
	}
	.h4, h4 {
		font-size: 18.5px;
	}
	.h5, h5 {
		font-size: 17px; 
	}
	ol.ct,
	ul.ct {
		margin-left: -0.85em;
	}
	.badge {
		padding: 0.1em 0.75em 0.15em;
		border-radius: 0.5rem;
	}
}



/* ==================================================
   form 表單
================================================== */
label {
	color: var(--gray-deep);
}
.form-control {
	padding: 0 0.5rem;
}
.form-control,
.form-control:focus,
.form-check-input[type=checkbox] {
    border-radius: 0;
	border-color: var(--blue);
}
.form-check-input[type=radio] {
	border-color: var(--blue);
}
.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}
.form-control::placeholder {
	color: var(--gray);
}
.form-control:focus {
	box-shadow:none !important;
}

.searchBox {
	position:relative;
	width:90%;
	margin:0 auto 1.5em;
	display: flex;
	z-index:1;
}

.tabBtn{
	--sub-gap:0.25em;
	position: relative;
	white-space: nowrap;
	flex-grow:1;
}
.tabBtn+.tabBtn{
	margin-left:0.5em;
}
.tabBtn em{
	font-style: normal;
	border:1px solid var(--blue);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 0.5em;
	cursor: pointer;
	height:100%;
}
.tabBtn em span{
	width:4.1em;
	text-overflow: ellipsis;
	overflow: hidden;
}
.tabBtn em i{
	font-style: normal;
	font-size:1.5em;
	color: var(--gray);
	margin-left:0.25em;
	transform: translateY(-15%);
}
.tabBtn.active em i{
	transform:scaleY(-1) translateY(-15%);
}

.tabBtn .subCT{
	position: absolute;
	left:0;
	top:100%;
	margin-top:var(--sub-gap);
	padding:0.5em 0.5em 0.5em 1em;
	border:1px solid var(--blue);
	background: #FFF;
	z-index: 1;
	display: none;
}
.tabBtn.active .subCT{
	display: block;
}
.tabBtn .subCT ul{
	list-style: none;
	width:29em;
	margin:0.5em 0 0;
	padding:0;
	display: flex;
	flex-wrap: wrap;
}
.tabBtn .subCT li{
	width:5.2em;
	margin:0 0.5em 0.5em 0;
}
.tabBtn .subCT li label{
	margin-left:0.2em;
}

.tabBtn.active:after{
	content:"";
	display: block;
	position: absolute;
	left:0;
	top:calc(100% - 1px);
	width:100%;
	height:calc(var(--sub-gap) + 2px);
	border:1px solid var(--blue);
	border-top:none;
	border-bottom:none;
	background: #FFF;
	z-index: 2;
}

.searchBox .input-group{
	width:auto;
	flex-grow: 1;
	margin-left:0.5em;
}
.searchBox .input-group .btn{
	z-index: auto;
}




@media (min-width: 1500px) {
	.searchBox {
		max-width:800px;
	}
}


/*桌上型 xl*/
@media (min-width: 1200px) and (max-width: 1499.98px)  {
	.searchBox {
		max-width:700px;
	}
}


/*手機版xs*/
@media (max-width: 767.98px) { 	
	.searchBox {
		width:auto;
		display: block;
	}
	.tabBtn+.tabBtn,
	.searchBox .input-group{
		margin:0.5em 0 0;
	}
	.tabBtn em span{
		width:80vw
	}
	.tabBtn .subCT{
		width:100%;
		font-size: 0.8em;
	}
	.tabBtn .subCT ul{
		width:auto;
	}
}



/* ==================================================
   container
================================================== */
@media (min-width: 1200px) {
	.container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 980px; /*為了彥伶的筆電1439x739, 不會切到video*/
	}
}

@media (min-width: 1500px) {
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1050px;
	}
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.container, .container-lg, .container-md, .container-sm {
        max-width: 820px;
    }
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.container, .container-lg, .container-md, .container-sm {
        max-width: 600px;
    }
}

/*手機版xs*/
@media (max-width: 767.98px) { 
	.container, .container-lg, .container-md, .container-sm {
        width: 96%;
    }
}


/* ==================================================
   headerNav
================================================== */
header {
	text-align: center;
	margin: 0 auto;
	max-width: 1920px;
}

/******************* 左上產品 start *************************/
header .productName{
	position: relative;
	font-weight: 900;
}
header .productName h1{
	white-space: nowrap;
	cursor: pointer;
}
header .productName h1:after {
    margin-left: 0.15em;
    vertical-align:0.05em;
	font-size:0.58em;
    font-family:"Font Awesome 5 Free"; 
	content: "\f078";
	color: var(--gray);
}
header .productName ul{
	position: absolute;
	left:0;
	top:100%;
	xxxwidth:100%;
	list-style: none;
	color: var(--gray-deep);
	background: var(--white);
	text-align: left;
	margin:0;
	padding:0.75em 2em 1.25em 2em;
	font-family: 'Noto Serif TC', serif;
	font-weight: inherit;
	border-radius:0.5em;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
	display:none;
}
header .productName.open ul{
	display:block;
}
header .productName li+li{
	margin-top:0.5em;
}
header .productName li a{
	font-size:26px;
	font-weight:800;
	letter-spacing: 0.075rem;
	color: var(--gray-deep);
	text-decoration: none;
	display: block;
	white-space:nowrap;
}
header .productName li a.vol.active,
header .productName li a.vol:hover{
	color:var(--vol);
}
header .productName li a.ultra.active,
header .productName li a.ultra:hover{
	color:var(--ultra);
}
header .productName li a.ultra3.active,
header .productName li a.ultra3:hover{
	color:var(--ultra3);
}

/*ipad 橫式 lg~xl*/
@media (min-width: 992px) { 
	header .productName ul {
		margin-top:20px;
	}
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	header .productName ul {
		margin-top:10px;
	}
	header .productName li a {
		font-size: 24px;
	}
}


/*手機版xs*/
@media (max-width: 767.98px) { 
	header .productName ul {
		margin-top:10px;
		padding: 0.75em 1.75em 1.25em 1.75em;
	}
	header .productName li a {
		font-size: 21px;
	}
}



/******************* 左上產品 end *************************/

#navscroll.navbar {
	background-color:var(--white);
	/*background-color:#FF0;*/
}
/*當啟動捲軸往下滾動時*/
#navscroll.highlight {
	box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
#navMenu.navbar-collapse { 
	flex-grow: unset;
}

ul.mainNav li.nav-item,
ul.mainNav li.nav-item .nav-link { 
	color: var(--gray-deep); 
	font-size:1.35rem;
	font-weight: 400;
	line-height: 1.65;
	display: inline-block;
	padding: 0.5rem 0.25rem 0.4rem;
}
ul.mainNav li.nav-item .nav-link { 
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}
ul.mainNav li.nav-item .nav-link:after { 
		display:block;
		z-index:0; 
		content: "";
		width:0;
		height:3px; 
		background-color:var(--blue-deep);
		transition: all 0.5s ease-out;
}

ul.mainNav li.nav-item .nav-link:hover:after,
ul.mainNav li.nav-item .nav-link:focus:after,
ul.mainNav li.nav-item .nav-link:active:after { 
	width:100%;
}
/*所在處.active*/
ul.mainNav li.nav-item .nav-link.active:after { 
	width:100%; 
}

.navbar {
	padding-top: 0;
    padding-bottom: 0;
	background: var(--blue);
}
.navbar-toggler {
    padding: 0;
    border-radius: 0;
    background-color: none;
    border: none;
}



/*ipad 橫式lg ~ 桌上型 xl */
@media (min-width: 992px) { 
	.navBrand {
		margin-right:1.75em;
	}
	.navbar-expand-md .navbar-collapse {
		display: flex !important;
		flex-basis: auto;
	}
	ul.navbar-nav li.nav-item + li.nav-item:before { /*before之前串接符號*/
		content: "｜"; /*第一個不會有+接續,就自動沒有 */
		color: var(--gray-deep);
		font-weight: normal;
		/*margin-right:0.35rem;
		margin-left:0.35rem;*/
		margin-right:0.35rem;
		margin-left:0.35rem;
	}
	.navbar .container-fluid {
		justify-content:center;
	}
}


/*桌上型 xl*/
@media (min-width: 1200px) { 
	ul.navbar-nav li.nav-item + li.nav-item:before { /*before之前串接符號*/
		margin-right:0.75rem;
		margin-left:0.75rem;
	}
}

@media (min-width: 1400px) { 
	.navBrand {
		margin-right:4em;
	}
	ul.navbar-nav li.nav-item + li.nav-item:before { /*before之前串接符號*/
		margin-right:0.9rem;
		margin-left:0.9rem;
	}
}


/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.navbar .container-fluid {
		padding-left: 1.5rem;
		padding-right:1.5rem;
	}
	ul.mainNav li.nav-item,
	ul.mainNav li.nav-item .nav-link { 
		font-size:19px;
		padding: 0.5rem 0.15rem 0.4rem;
	}
	ul.navbar-nav li.nav-item + li.nav-item:before { /*before之前串接符號*/
		margin-right:0.15rem;
		margin-left:0.15rem;
	}
}




/*手機版xs ~ 直式md*/
@media (max-width: 991.98px) { 
	.navBrand .dropdown-toggle::after {
		font-size:1em;
	}
	#navscroll.navbar {
		/*padding-top: 0.5rem;
		padding-bottom: 0.4rem;*/
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
	/*控制首頁和產品頁左上名稱能夠相同高度*/
	.navbar-brand{
		width:1px;
		height:34.5px;
		padding:0;
	}
	.navbar .container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}
	.container-fluid #navMenu {
		padding-top:3em;
	}
	.container-fluid #navMenu.show {
		height:100vh;
		display:block;
		overflow:hidden;
	}
	ul.navbar-nav li.nav-item,
	ul.navbar-nav li.nav-item .nav-link { 
		font-size:24px;
	}
	ul.mainNav li.nav-item .nav-link {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		letter-spacing:0.1rem;
	}
}



/*手機版xs*/
@media (max-width: 767.98px) { 
	ul.navbar-nav li.nav-item,
	ul.navbar-nav li.nav-item .nav-link { 
		font-size:20.5px;
		padding-top: 0.15rem;
		padding-bottom: 0.15rem;
	}
}



/* ==================================================
   漢堡按鈕-旋轉X
================================================== */
.navbar-toggler {
	padding: 0;
	border-radius: 0;
	background-color: none;
	border: none;
}

/*Hamburger Menu to X css*/
.navbarX {
	width: 25px;
	height: 18px;
	background-color: transparent !important;
	position: relative;
	float: right;
	margin-right: 0;
	/*margin-top:14px;*/
	cursor: pointer;
}

@media (min-width:992) {  /*手機版以外767px, md平板直式以外992px*/
	.navbarX {
		display:none;
	}
}

.navbarX i {
	background-color: var(--blue-deep);
	border-radius: 2px;
	width: 100%;
	height: 3px;
	content: "";
	display: block;
}

.navbarX i:nth-child(1) {
	animation: outT 0.8s backwards;  /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX i:nth-child(2) {
	margin: 5px 0;
	animation: outM 0.8s backwards;  /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX i:nth-child(3) {
	animation: outBtm 0.8s backwards; /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX.active i:nth-child(1) {
	animation: inT 0.8s forwards;
}

.navbarX.active i:nth-child(2) {
	animation: inM 0.8s forwards;
}
.navbarX.active i:nth-child(3) {
	animation: inBtm 0.8s forwards;
}

@keyframes inM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}

@keyframes outM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}


@keyframes inT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(7px) rotate(135deg);/*微上調2px*/
	}
}

@keyframes outT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(7px) rotate(135deg);
	}
}

@keyframes inBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}

@keyframes outBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}


/* ==================================================
   footer頁尾
================================================== */
footer.footerArea {
	background-color:#B4B3B8;  
	/*background: linear-gradient( to bottom, #187FC3 0%, #1B2347 100%);*/
	overflow:hidden;
	position:relative;
}
footer.footerArea p {
	font-size:1.1rem;
	color: var(--white);
	font-weight:400;
	margin:17px 0;
}

.sns {
	position:absolute;
	top:12px;
	left:80px;
	margin-bottom:0;
}
.sns a {
	display:inline-block;
}
.sns img {
	width:40px;
}
.sns li.list-inline-item:not(:last-child) {
    margin-right: .5rem;
}


@media (min-width: 1200px) and (max-width: 1599.98px) { 
	.sns {
		left:30px;
	}
}


/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.sns {
		left:1.5rem;
	}
}


/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.sns {
		left:15px;
	}
}


/*手機版xs*/
@media (max-width: 767.98px) { 
	footer.footerArea p {
		font-size:0.9rem;
		margin:10px 0 15px;
	}
	.sns {
		position:relative;
		top:0.75rem;
		left:auto;
		text-align:center;
	}
}




/* ==================================================
   各單元主視覺 mainKV
================================================== */
.mainKV, .volKV, .ultraKV, .ultra3KV, .clinicKV {
	position:relative;
	/*overflow:hidden; /*因為.mainKV有個箭頭超出範圍*/
}

/*主視覺下方的箭頭僅桌機版出現*/
.arrowKV {
	position:absolute;
	left:0;
	bottom: -10%;
	width:100%;
	display:flex;
	justify-content:center;
}
.arrowKV i {
	font-size:2.25em;
	color: var(--gray);
}
/*當啟動捲軸往下滾動時消失*/
.arrowKV.highlight {
	display:none !important;
}


/* ====== 首頁 ====== */
.mainKV {
	background-image: url(../imgs/mainKVbg.jpg);
	background-position: 0% 50%; /*左右 上下*/
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio:2.9; /*寬除高*/
}
.mainKV .model {
	position:absolute;
	bottom: 0;
	left: 35.75%;
	z-index: 1;
	height:100%;
}
.mainKV .w1,
.mainKV .w2,
.mainKV .w3 {
	position:absolute;
	z-index: 1;
}
.mainKV .w1 {
	left: 19%;
	top: 27.25%;
}
.mainKV .w2 {
	left: 63%;
	top: 27.25%;
}
.mainKV .w3 {
	left: 63%;
	top: 46%;
	animation-delay:1.75s;
}


/*ipad 直式 md以上~桌上型 xl*/
@media (min-width: 768px) { 
	.container.btnBox {
		width: 100%;
		position:absolute;
		bottom:3.25%;
		left:50%;
		transform: translateX(-50%); /*強制居中*/
		z-index: 1;
	}
	.mainKV .w1,
	.mainKV .w2,
	.mainKV .w3 {
		width:25%;
	}
	.mainKV .w1 {
		left: 13.5%;
	}
}



/*桌上型 xl*/
@media (min-width: 1200px) { 
	.container.btnBox  {
		max-width:1400px;
		width:95%;
		padding-left: 2.5%;
        padding-right: 2.5%;
	}
	.mainKV .w1,
	.mainKV .w2,
	.mainKV .w3 {
		width:20%;
	}
	.mainKV .w1 {
		left: 17.5%;
	}
}


/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.arrowKV {
		bottom: -15%;
	}
}



@media (min-width: 1600px) { 
	.container.btnBox {
		max-width:1580px;
	}
}


/*ipad 直式 md ~ ipad 橫式lg*/
@media (min-width: 768px) and (max-width: 1199.98px) { 
	.mainKV .w3 {
		top: 50%;
	}
}


/*手機版xs*/
@media (max-width: 767.98px) { 
	.mainKV {
		margin-bottom:5.5%;
		aspect-ratio:1.5;
	}
	.mainKV .model {
		left: 2.5%;
		height:97%;
	}
	.mainKV .w1,
	.mainKV .w2,
	.mainKV .w3 {
		left: 57%;
		width:38%;
	}
	.mainKV .w1 {
		top: 25%;
	}
	.mainKV .w2 {
		top: 45%;
	}
	.mainKV .w3 {
		top: 68%;
	}
	.container.btnBox {
		padding:0;
	}
	.volKV, .ultraKV, .ultra3KV {
		margin-bottom:-5%;
	}
}




/* ====== 海芙電波 ====== */
.volKV {
	background-image: url(../imgs/volKVbg.jpg);
	background-position: 25% 50%; /*左右 上下*/
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio:2.7; /*寬除高*/
}
.volKV .model {
	position:absolute;
	bottom: 0;
	left: 13%;
	z-index: 1;
	height:98.5%;
}
.volKV .logo {
	position:absolute;
	top: 22%;
	left: 42.15%;
	z-index: 1;
	width:26%;
}
.volKV .w {
	position:absolute;
	top: 45.5%;
	left: 38%;
	z-index: 1;
	width:33%;
	animation-delay:1.25s;
}
.volKV .pic {
	position:absolute;
	right: 11%;
	bottom:0;
	z-index: 1;
	width:18%;
}

/*手機版xs*/
@media (max-width: 767.98px) { 
	.volKV {
		background-position: 42.5% 100%;
    	background-size: cover;
		aspect-ratio:0.65;
		overflow:hidden;
	}
	.volKV .model {
		left: 5%;
        bottom: -1%;
        height: 81%;
	}
	.volKV .pic {
		right: 2%;
		width:48%;
	}
	.volKV .logo {
		top: 5%;
		left:25.5%;
		width:52%;
	}
	.volKV .w {
		XXXposition:absolute;
		top: 16%;
		left:25.75%;
		width:47.5%;
	}
}



/* ====== 海芙音波媚必提 ====== */
.ultraKV {
	background-image: url(../imgs/ultraKVbg.jpg);
	background-position: 25% 50%; /*左右 上下*/
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio:2.7; /*寬除高*/
}
.ultraKV .txt {
	position:absolute;
	left: 0;
	bottom: 5%;
	z-index: 99;
	color: var(--white);
	font-size:1.25vw;
	letter-spacing:1px;
	font-weight:bold;
	background-color: rgba(12,30,50, 0.35);  /*透明度*/
	border:1px solid rgba(255,255,255, 0.35);
	padding:0.2rem 0.75rem;
	padding-left:5.35%;
}
.ultraKV .model {
	position:absolute;
	bottom: 0;
	right: 11%;
	z-index: 1;
	height:100%;
}
.ultraKV .logo {
	position:absolute;
	top: 16%;
	left: 37.75%;
	z-index: 1;
	width:20%;
}
.ultraKV .w {
	position:absolute;
	top: 44.5%;
	left: 28.5%;
	z-index: 1;
	width:36.5%;
	animation-delay:1.25s;
}
.ultraKV .pic {
	position:absolute;
	left: 11%;
	bottom:0;
	z-index: 1;
	width:17.75%;
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.ultraKV .txt {
		font-size:0.85rem;
		padding-left:2%;
	}
}



/*手機版xs*/
@media (max-width: 767.98px) { 
	.ultraKV {
		background-position: 42.5% 100%;
    	background-size: cover;
		aspect-ratio:0.65;
	}
	.ultraKV .model {
		right: -0.5%;
		height:74.25%;
	}
	.ultraKV .pic {
		left: 1.25%;
		width:39.5%;
	}
	.ultraKV .logo {
		top: 6.5%;
		left:26%;
		width:49%;
	}
	.ultraKV .w {
		XXXposition:absolute;
		top: 22.25%;
		left:26%;
		width:48%;
	}
	.ultraKV .txt {
		font-size: 3.1vw;
		letter-spacing:0.6px;
        padding-left: 2.6%;
		padding-top:0.5%;
        width: 71%;
		left:inherit;
		right:0;
		bottom: 3.5%;
	}
}





/* ====== 第三代海芙音波 ====== */
.ultra3KV {
	background-image: url(../imgs/ultra3KVbg.jpg);
	background-position: 25% 50%; /*左右 上下*/
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio:2.7; /*寬除高*/
}
.ultra3KV .model {
	position:absolute;
	bottom: 0;
	left: 11.5%;
	z-index: 1;
	height:98%;
}
.ultra3KV .logo {
	position:absolute;
	top: 27.25%;
	left: 34.75%;
	z-index: 1;
	width:36%;
}
.ultra3KV .w {
	position:absolute;
	top: 46.5%;
	left: 38.25%;
	z-index: 1;
	width:28.5%;
	animation-delay:1.25s;
}
.ultra3KV .pic {
	position:absolute;
	right: 13%;
	bottom:0;
	z-index: 1;
	width:17%;
}

/*手機版xs*/
@media (max-width: 767.98px) { 
	.ultra3KV {
    	background-size: cover;
		aspect-ratio:0.65;
		overflow:hidden;
	}
	.ultra3KV .model {
		left: 2%;
        bottom:0;
        height: 80%;
	}
	.ultra3KV .pic {
		right: 2.5%;
		width:37%;
	}
	.ultra3KV .logo {
		top: 5%;
        left: 18%;
        width: 65%;
	}
	.ultra3KV .w {
		top: 13%;
		left:19%;
		width:60%;
	}
}





/* ====== 快速查詢認證診所 ====== */
.clinicKV {
	background-image: url(../imgs/clinicKVbg.jpg);
	background-position: 25% 50%; /*左右 上下*/
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio:2.7; /*寬除高*/
}
.clinicKV .model {
	position:absolute;
	bottom: 0;
	left: 12%;
	z-index: 1;
	height:100%;
}
.clinicKV .w1,
.clinicKV .w2 {
	position:absolute;
	left: 48%;
	z-index: 1;
	width:36%;
}
.clinicKV .w1 {
	top: 33%;
}
/*w2後來取消不出現了
.clinicKV .w2 {
	top: 53%;
}
*/

/*手機版xs*/
@media (max-width: 767.98px) { 
	.clinicKV {
		background-position: 0% 50%;
    	background-size: 230%;
		aspect-ratio:1.5;
	}
	.clinicKV .model {
		left: -2.5%;
		xxxheight:85%;
		height:96%;
	}
	.clinicKV .w1,
	.clinicKV .w2 {
		left: 46.5%;
		width:48%;
	}
	.clinicKV .w1 {
		top: 43%;
	}
}



/* ==================================================
   動態影片 film
================================================== */
.filmBox {
	overflow:hidden; 
	position:relative;
	height:18.5em;
}
video.bgfilm {
    object-fit:cover; /*居中語法,但ie無法截切畫面放大,只會等比例縮小四周自動黑底*/
	width:100%;
	height:auto;
	aspect-ratio: 2.85; /*影片寬除以高, 但後來有強制壓扁比例*/
	position:absolute;
	transform: translate(-50%, 0%); /*強制居中*/
	left: 50%;  /*強制居中*/
	bottom:0;
}

/*產品頁嵌youtube*/
.videoSpace {
	margin-top:4.15em;
}

/*桌上型 xl*/
@media (min-width: 1600px) { 
	video.bgfilm {
		aspect-ratio: 3.75; /*影片寬除以高, 但後來有強制壓扁比例*/
	}	
	.videoSpace {
		margin-top:6em;
	}
}


/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.filmBox {
		height:14em;
	}
	video.bgfilm {
		aspect-ratio: 2.35; /*影片寬除以高, 但後來有強制壓扁比例*/
	}	
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.filmBox {
		height:12em;
	}
	video.bgfilm {
		aspect-ratio: 2.25; /*影片寬除以高, 但後來有強制壓扁比例*/
	}	
	.videoSpace {
		margin-top:5em;
	}
}

/*手機版xs*/
@media (max-width: 767.98px) { 
	.filmBox {
		height:180px;
	}
	video.bgfilm {
		aspect-ratio: 1.77; /*影片寬除以高比例*/
	}
	.videoSpace {
		margin-top:3.5em;
	}
}

/*手機版xs-特殊*/
@media (max-width: 449.98px) { 
	.filmBox {
		height:140px;
	}
}


/* ==================================================
   自定css
================================================== */

/*主要按鈕*/
.btn-mainstyle,
.btn-mainstyle.active {
	color: var(--white);
	background-color:var(--blue);
	padding: 0.25rem 1rem;
	border-radius: 0;
	border:none;
}
.btn-mainstyle:hover,
.btn-mainstyle:focus,
.btn-mainstyle:active:focus,
.btn-mainstyle.active:focus {
	filter: brightness(125%);
	color: var(--white);
}
/*第三代海芙音波*/
.ultraformer3 .btn-mainstyle:hover,
.ultraformer3 .btn-mainstyle:focus,
.ultraformer3 .btn-mainstyle:active:focus,
.ultraformer3 .btn-mainstyle.active:focus {
	filter: brightness(110%);
}

/*首頁step123步驟時間軸*/
.stepline {
	list-style: none;
	margin-left: 1em;
}
.stepline>li {
	--bdr-color:var(--blue-deep);
	--bdr-width:0.2em;
	position: relative;
	padding:0.15em 0 1em 1.15em;
}
.stepline>li:last-child{
	padding-bottom:0;
}
.stepline>li:before,
.stepline>li:after{
	position: absolute;
	left:-0.55em;
	top:0;
}
.stepline>li:before{
	content:"";
	display: block;
	width:var(--bdr-width);
	height:100%;
	background-color:var(--blue-deep);
}
.stepline>li:last-child:before{
	display: none;
}
.stepline>li .stepBox h4{
	color: var(--blue-light);
	margin:0;
}
/*步驟數字*/
.stepline>li:after{
	content:attr(data-n);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Lora", serif; 
	font-weight: 400;
	font-size:1.5rem;;
	line-height: 1em;
	color:var(--white);
	width:38px;
	/*border:var(--bdr-width) solid;*/
	border-radius:50%;
	background-color: var(--blue-deep);
	aspect-ratio:1;
	transform: translateX(-37%);
}


/*中線文字*/
.line-center {
	position: relative;
	width: 100%;
	margin: 0.5em 0 1.5em;
}
.line-center span {
	color:var(--black);
	letter-spacing: 0.15rem;
	position: absolute;
	transform: translate(-50%, 0%); /*強制居中*/
	left: 50%;  /*強制居中*/
	padding: 0 0.5em;
	background-color: var(--white);
	white-space:nowrap;
	text-align:center;
}
h2.line-center {
	border-bottom:var(--blue) solid 7px; 
}
h2.line-center span {
	top: -0.5em;
}
h3.line-center {
	border-bottom:var(--black) solid 2px; 
	letter-spacing:0.075rem;
	font-family: 'Noto Serif TC', serif; /*繁中-宋體*/
}
h3.line-center span {
	top: -0.6em;
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.stepline {
		margin-left: 0.65em;
	}
}


/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.stepline {
		margin-left: 0.5em;
	}
	.stepline>li {
		padding: 0 0 1em 0.85em;
	}
	/*步驟數字*/
	.stepline>li:after{
		font-size: 21px;
		width:27px;
	}
}


/*手機版~*/
@media (max-width: 767.98px) { 
	/*中線文字*/
	.line-center {
		border-bottom:var(--blue) solid 5px; 
		margin: 0.5em 0 1.75em;
	}
	.line-center span {
		padding: 0 0.25em;
		letter-spacing: 0.1rem;
	}
	h2.line-center {
		border-width:4px;
	}
	.blockquote {
		margin: 0 0 7%;
	}
	.stepline {
		margin-left: 0.65em;
	}
	.stepline>li {
		padding: 0 0 1em 0.85em;
	}
	/*步驟數字*/
	.stepline>li:after{
		font-size: 21px;
		width:27px;
	}
}



/* ==================================================
   產品頁
================================================== */
.frameBox {
	border-radius: 2em;
	padding:4% 5%;
    border: var(--gray) solid 1px;
	position:relative;
}
.frameBox:not(:last-child) { /*排除最後一個子元素*/
	margin-bottom:4em;
}
.frameBox:not(:last-child):after {
	position:absolute;
	bottom:-20px; /*同height*/
	left:50%;
	transform: translateX(-50%); /*強制居中*/
	z-index:1;
	content:"";
	display: inline-block;
	background-repeat: no-repeat;
	background-size:60px;
	width: 60px;
    height:20px;
}




/*辨別原廠公司貨3步驟*/
.frameBox .step img {
	width:80px;
	margin-top:0.4em;
}
.frameBox .stepCT {
	border-top:2px solid var(--gray);
	padding-top:1.1rem;
}
img.QRcode {
	margin-top: 1.5%;
    margin-left: 10%;
    width: 88%;
}
img.cert {
	width:400px;
	margin-bottom:4%;
}
img.clinic-btn {
	margin-top:4%;
	margin-bottom:4%;
	width:400px;
}
.frameBox .badge {
	margin-top:2%;
}


/*常見問答 QA*/
.accordion-flush .accordion-item {
	margin-bottom:0.65em;
}
p.accordion-header {
	margin-bottom:0;
	position:relative;
	line-height:1.25;
}
.accordion-button {
	font-size:inherit;
	color: var(--white);
	font-weight: 500;
	padding: 0.9rem 1.25rem;
	padding-left:65px;
}
/*圖示Q*/
p.accordion-header:before {
	position:absolute;
	left:0.75em;
	top:0;
	z-index:9;
	content:"";
	display: inline-block;
	background-image: url(../imgs/q.png);
	background-repeat: no-repeat;
	background-size:38px;
	width: 38px;
	height: 100%;
	background-position: 0% 50%; /*左右 上下*/
}


/*點選後*/
.accordion-button:not(.collapsed) {
    color: var(--white);
    box-shadow:none;
}
.accordion-body {
    padding: 0.8rem;
	padding-right:1.15rem;
	padding-left:63px; /*解答內文左間距*/
	border: 2px solid var(--gray);
	text-align: justify;
}
.accordion-body p:last-child {
    margin-bottom:0;
}
/*箭頭隱藏*/
.accordion-button::after {
	display:none;
}


/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.frameBox .step img {
		width:55px;
	}
	img.QRcode {
		margin-left: 13%;
		width: 85%;
	}
	img.clinic-btn {
		width:350px;
		margin-bottom:7%;
	}
	/*圖示Q*/
	p.accordion-header:before {
		left:0.75em;
		background-size:35px;
		width: 35px;
	}
	/*常見問答 QA*/
	.accordion-button {
		padding: 0.8rem 1.25rem;
		padding-left:60px;
	}
	.accordion-body {
		padding-left:58px; /*解答內文左間距*/
	}
}



/*手機版xs*/
@media (max-width: 767.98px) { 
	.frameBox {
		border-radius: 1em;
		padding: 4.5% 7% 6%;
	}
	.frameBox:not(:last-child) { /*排除最後一個子元素*/
		margin-bottom:2em;
	}
	.frameBox .step {
		padding-left:0;
		padding-right:0;
	}
	.frameBox .step img {
		width:40px;
		margin-top: 0.2em;
	}
	.frameBox .stepCT {
		padding-top: 0.65rem;
	}
	img.QRcode {
		margin-top: 0;
		margin-left:0;
		width: 100%;
	}
	img.clinic-btn {
		/*width:95%;*/
		width:320px;
		margin-bottom:7%;
	}
	img.cert {
		width:250px;
		margin-bottom:10%;
	}
	/*圖示Q*/
	p.accordion-header:before {
		left:0.6em;
		background-size:28px;
		width:28px;
	}
	/*常見問答 QA*/
	.accordion-flush .accordion-item {
		margin-bottom:0.5em;
	}
	.accordion-button {
		padding: 0.65rem 0.85rem 0.65rem 46px;
	}
	.accordion-body {
		padding-left:50px; /*解答內文左間距*/
	}
}



/* ==================================================
   rwdTable 表格
================================================== */
*{
  box-sizing:border-box;
}
.rwdTable {
	border-collapse:collapse;
	width:100%;
}
.rwdTable th,
.rwdTable td {
	border-bottom:var(--gray) solid 1px;
	padding:0.75rem 0.5rem;
}

/*診所名*/
.rwdTable th:first-child,
.rwdTable td.name {
	padding-left:1.25rem;
	padding-right:0.5rem;
}
.rwdTable th {
	font-weight: 500;
	padding-top:0.35rem;
	padding-bottom:0.35rem;
	background:var(--gray-light);
}


/*桌上型 xl*/
@media (min-width: 1200px) { 
	.rwdTable tr:hover td {
		background-color:var(--gray-light);
	}
}


/*手機版xs*/
@media (max-width: 767.98px) { 
	.rwdTable tr {
		border-bottom: var(--gray) solid 1px;
	}
	  .rwdTable th {
		display:none;
	  }
	  .rwdTable td {
		display:block;
		width:100%;
		width:auto;
	  }
	.rwdTable th,
	.rwdTable td {
		padding:0.15rem 0;
		border-bottom:none;
	}
	.rwdTable tr td:first-child,
	.rwdTable td.text-center {
		padding-top:0.75rem;
	}
	.rwdTable tr td:last-child {
		padding-bottom:0.75rem;
	}
	/*診所名*/
	.rwdTable th:first-child,
	.rwdTable td.name {
		padding-left:0;
		padding-right:0;
	}
  /*產品分色圓點*/
  .rwdTable td.text-center {
    display:inline-block;
	border:none;
	float:right;
  }
  .rwdTable td.name {
	font-size: 17.25px;
	font-weight: 600;
	display:inline-block;
	width:calc(100% - 60px);
  }
  .rwdTable td.text-center {
	display:inline-block;
	width:60px;
  }
  .rwdTable td ul.dotBox {
    display:inline-block;
  }
}



/* ==================================================
   產品分色
================================================== */
/* 產品分色圓點 */
.rwdTable td ul.dotBox {
	display:inline-block;
	margin:0 auto;
}
.rwdTable td ul.dotBox li.list-inline-item:not(:last-child) {
	margin-right: 0.1rem;
}


/* ================= (紅)海芙電波.volnewmer ================= */
.volnewmer .navBrand h1,
.dotBox .volnewmer,
.volnewmer #qa h4 {
	color: var(--vol);
}
/*常見問答 QA 閉合時.collapsed*/
.volnewmer .accordion-button.collapsed {
	background-color: rgba(195,13,35, 0.6);  /*透明度*/
}
.volnewmer .accordion-button:not(.collapsed) {
	background-color: var(--vol); /*點選後*/
}
.volnewmer ul.mainNav li.nav-item .nav-link:after,
.volnewmer .accordion-button:hover,
.volnewmer .btn-mainstyle,
.volnewmer .btn-mainstyle.active {
    background-color: var(--vol);
}
.volnewmer .accordion-body,
.volnewmer .accordion-button:focus,
.volnewmer h2.line-center,
.volnewmer .form-control,
.volnewmer .form-check-input[type=checkbox],
.volnewmer .form-check-input[type=radio],
.volnewmer .tabBtn em,
.volnewmer .tabBtn .subCT,
.volnewmer .tabBtn.active:after {
    border-color: var(--vol);
}
.volnewmer .form-check-input:checked {
    background-color: var(--vol);
    border-color: var(--vol);
}
.volnewmer .form-check-input:focus {
    border-color: none;
    box-shadow: 0 0 0 .25rem rgba(195,13,35, 0.25);  /* #1872B0透明度*/
}
/*辨別原廠公司貨3步驟*/
.volnewmer .frameBox .stepTitle {
	color:var(--vol); 
}
.volnewmer .badge {
    background-color: #ab2524;
}
.volnewmer .frameBox .stepCT {
	border-color:#f47867;
}
.volnewmer .frameBox:not(:last-child):after {
	background-image: url(../imgs/vol-arrow.png);
}



/* =================(深藍)海芙音波媚必提.ultraformermpt ================= */
.ultraformermpt .navBrand h1,
.dotBox .ultraformermpt,
.ultraformermpt #qa h4 {
	color: var(--ultra);
}
/*常見問答 QA 閉合時.collapsed*/
.ultraformermpt .accordion-button.collapsed {
	background-color: rgba(0,75,140, 0.6);  /*透明度*/
}
.ultraformermpt .accordion-button:not(.collapsed) {
	background-color: var(--ultra); /*點選後*/
}
.ultraformermpt ul.mainNav li.nav-item .nav-link:after,
.ultraformermpt .accordion-button:hover,
.ultraformermpt .btn-mainstyle,
.ultraformermpt .btn-mainstyle.active {
    background-color: var(--ultra);
}
.ultraformermpt .accordion-body,
.ultraformermpt .accordion-button:focus,
.ultraformermpt h2.line-center,
.ultraformermpt .form-control,
.ultraformermpt .form-check-input[type=checkbox],
.ultraformermpt .form-check-input[type=radio],
.ultraformermpt .tabBtn em,
.ultraformermpt .tabBtn .subCT,
.ultraformermpt .tabBtn.active:after {
    border-color: var(--ultra);
}
.ultraformermpt .form-check-input:checked {
    background-color: var(--ultra);
    border-color: var(--ultra);
}
.ultraformermpt .form-control:focus,
.ultraformermpt .form-check-input:focus {
    border-color: none;
    box-shadow: 0 0 0 .25rem rgba(24,114,176, 0.25);  /* #1872B0透明度*/
}
/*辨別原廠公司貨3步驟*/
.ultraformermpt .frameBox .stepTitle {
	color:#1872B0; /*其實固定藍色無變動*/
}
.ultraformermpt .badge {
    background-color: #1872B0;
}
.ultraformermpt .frameBox .stepCT {
	border-color:#6895B6;  /*其實固定淡藍色無變動*/
}
.ultraformermpt .frameBox:not(:last-child):after {
	background-image: url(../imgs/ultra-arrow.png);
}



/* =================(藍)第三代海芙音波.ultraformer3 ================= */
.ultraformer3 .navBrand h1,
.dotBox .ultraformer3 {
	color: var(--ultra3);
}
/*常見問答 QA 閉合時.collapsed*/
.ultraformer3 .accordion-button.collapsed {
	background-color: rgba(0,113,188, 0.6);  /*透明度*/
}
.ultraformer3 .accordion-button:not(.collapsed) {
	background-color:rgba(0,113,188, 1); /*點選後*/
}
.ultraformer3 .accordion-button:focus,
.ultraformer3 .accordion-button:hover {
	background-color: rgba(0,113,188, 1);  /*透明度*/
}
.ultraformer3 .accordion-body {
    border-color: #0071BC;
}
.ultraformer3 #qa h4 {
	color: #0071BC;
}

.ultraformer3 ul.mainNav li.nav-item .nav-link:after,
.ultraformer3 .btn-mainstyle,
.ultraformer3 .btn-mainstyle.active {
    background-color: var(--ultra3);
}
.ultraformer3 h2.line-center,
.ultraformer3 .form-control,
.ultraformer3 .form-check-input[type=checkbox],
.ultraformer3 .form-check-input[type=radio],
.ultraformer3 .tabBtn em,
.ultraformer3 .tabBtn .subCT,
.ultraformer3 .tabBtn.active:after {
    border-color: var(--ultra3);
}
.ultraformer3 .form-check-input:checked {
    background-color: var(--ultra3);
    border-color: var(--ultra3);
}
.ultraformer3 .form-control:focus,
.ultraformer3 .form-check-input:focus {
    border-color: none;
    box-shadow: 0 0 0 .25rem rgba(0,113,188, 0.25);  /* #0071BC透明度*/
}
/*辨別原廠公司貨3步驟*/
.ultraformer3 .frameBox .stepTitle {
	color:#1872B0; /*其實固定藍色無變動*/
}
.ultraformer3 .badge {
    background-color: var(--ultra3);
}
.ultraformer3 .frameBox .stepCT {
	border-color:#6895B6;  /*其實固定淡藍色無變動*/
}
.ultraformer3 .frameBox:not(:last-child):after {
	background-image: url(../imgs/ultra3-arrow.png);
}




/* ==================================================
   animation 進場動畫-效果相同,就可以共用動畫名
================================================== */
html, body {
    overflow-x: hidden !important; /*底部不會出現拉bar*/
}

/*自動播放-進場動畫*/
.auto-fadeIn {
    animation:fadeIn 1.75s both;
}
.auto-fadeInleft {
    animation:fadeInleft 1.75s ease-out;
}
.auto-fadeInright {
    animation:fadeInright 1.75s ease-out;
}
.auto-fadeInup {
    animation:fadeInup 1.75s both;
}
.auto-fadeIndown {
    animation:fadeIndown 1.75s both;
}

.auto-zoomIn {
    animation:zoomIn 1.75s both;
}

/* 快速查詢認證診所之前主視覺第二句有用到 */
.auto-slideIndown {
    animation:slideIndown 1.5s both;
}



/*Y軸律動*/
.grooveY {
	animation:grooveY 2.5s ease-out infinite;
}


/* fadeIn-淡入進場 */
@keyframes fadeIn {  /*@keyframes對應動畫名fadeInup*/
	0% {
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

/* fadeInleft-左淡入進場 */
@keyframes fadeInleft {
	0% {
		opacity:0;
		transform:translateX(-50px); /*X負數是往左偏移*/
	}
	100%{
		opacity:1;
	}
}


/* fadeInleft-右淡入進場 */
@keyframes fadeInright {
	0% {
		opacity:0;
		transform:translateX(50px); /*X負數是往左偏移*/
	}
	100%{
		opacity:1;
	}
}


/* fadeInup-下往上淡入進場 */
@keyframes fadeInup {
	0% {
		opacity:0;
		transform:translateY(25%); /*Y負數是往上偏移*/
		/*transform:translateY(20px); /*Y負數是往上偏移*/
	}
	100%{
		opacity:1;
	}
}


/* fadeIndown-上往下淡入進場 */
@keyframes fadeIndown { 
	0% {
		opacity:0;
		/*transform:translateY(-10%); Y負數是往上偏移*/
		transform:translateY(-25%); /*Y負數是往上偏移*/
	}
	100%{
		opacity:1;
	}
}

/*zoomIn 從最小放大到定位*/
@keyframes zoomIn { 
	0% {
		/*opacity:1;*/
		transform: scale(0);	
	}
	100%{
		/*opacity:1;*/
		transform: scale(1);	
	}
}

/* slideIndown-上往下淡入進場 */
@keyframes slideIndown { 
	0% {
		opacity:1;
		transform:translateY(-100%); /*Y負數是往上偏移*/
	}
	100%{
		opacity:1;
	}
}


/*Y軸律動*/
@keyframes grooveY {
  0% {
    transform:translate(0,0); /*原點X,Y*/
	opacity:1;
  }
  50% {
    transform:translate(0,0.5em); /*一樣要從原點來計算*/
	opacity:0.25;
  }
}


/*偵測捲軸觸發動畫-淡入進場*/
.fadeIn {
    transition: all 1.5s ease-in;
	opacity:0;
}
.fadeIn.highlight {
	opacity:1;
}


/*偵測捲軸觸發動畫-下往上淡入進場*/
.fadeInup {
    transition: all 1.5s ease-out;
	opacity:0;
	transform:translateY(2.5em);
}
.fadeInup.highlight {
	opacity:1;
	transform:translateY(0);
}



/*偵測捲軸觸發動畫-左上往下淡入進場*/
.fadeInLdown {
    transition: all 2s cubic-bezier(0, .71, .4, 1);
	opacity:0;
	transform:translate(-4em,-2em);/*X,Y*/
}
.fadeInLdown.highlight {
	opacity:1;
	transform:translate(0,0);/*X,Y*/
}


/*滑鼠over放大*/
.zoom img {
	transition: all 1s cubic-bezier(0, .71, .4, 1);
	transform: scale(1);	
}

@media (min-width: 1200px) { 
	.zoom:hover img {
		transform: scale(1.1);	
		position: relative;
		z-index:99; /*永遠疊在最上層*/ 
	}
}