@charset "utf-8";

/* CSS Document */
body{font-family:'Noto Sans TC','Lato',sans-serif;font-size:16px;line-height:1.5;color:#333;padding-top: 58px;}
body::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:#fff;z-index: 9999;pointer-events: none;opacity: 1;-webkit-transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: 1s cubic-bezier(0.42, 0, 0.58, 1);}
body.loaded-page-fade::before {opacity: 0;}
a{color:#000;text-decoration:none;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
a:hover{color:var(--mainColor);}
*{ backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;}
figure{margin: 0;}
img{
    image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
    image-rendering: crisp-edges;	
}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alertLine{border-color: #d40023;}
.red{color: #d40023;}

/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }
@media screen and (max-width: 640px) {
#goTop{width:100%;left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid #eee}
}

/*RWD編輯器表格(X捲軸)*/
.tableContainer table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}
@media screen and (max-width: 768px) {
.tableContainer{width:100%;overflow-x: scroll;overflow-y:auto;_overflow:auto;margin:0 0 1em}
}

/*IE瀏覽器*/
.warning{width:100%;color:#fff;text-align: center;max-width: 1500px;padding: 60px 50px 50px;position:fixed;left:50%;transform: translate(-50%, -50%);top: 50%;background-color: #283d86;box-shadow:0 0 15px rgba(51,51,51,.5);border-radius:3px;z-index:9999999999;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;}
.off{cursor: pointer;position:absolute;right: 10px;top: 10px;border: 1px solid #eee;padding: 3px 5px 3px 10px;}
.off:hover{background-color:#fff;color:#333;}

.useTool p{font-size: 25px;font-weight: 600;margin-bottom: 30px;}
.useTool ul{padding-left:0;list-style:none}
.useTool li{display:inline-block;margin: 0 5px;}
.useTool a{display:block;background: #fff;padding: 7px 10px;border-radius: 60px;}
.useTool b{margin-bottom: 10px;display: block;text-align: center;}
.useTool figure{width: 30px;float:left;margin-right: 5px;margin-bottom: 0;}
.useTool span{float:right;margin-top: 2px;font-weight: 600;}

/* submit-loading */
.load-wrapp{position:fixed;width:100%;height:100%;background: rgb(0 0 0 / 65%);top: 0;left: 0;z-index: 99999;}
.loading{position:absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
.loading span{color:#fff;font-size: 25px;margin-top: 40px;display: table;}
.spinner {position: relative;width: 60px;height: 60px;margin: 0 auto;}
.bubble-1,.bubble-2 {position: absolute;top: 0;width: 30px;height: 30px;border-radius: 100%;background-color: #fff;}
.bubble-2 {top: auto;bottom: 0;}
.loading .spinner {animation: loadingI 2s linear infinite;}
.loading .bubble-1,.loading .bubble-2 {-webkit-animation: bubble 2s ease-in-out infinite;animation: bubble 2s ease-in-out infinite;-moz-animation:bubble 2s ease-in-out infinite;-o-animation:bubble 2s ease-in-out infinite;}
.loading .bubble-2 { animation-delay: -1s;}

/* animation:loadingI */
@-o-keyframes loadingI{
	100% {
	transform: rotate(360deg);
	}
}
@-moz-keyframes loadingI{
	100% {
	transform: rotate(360deg);
	}
}
@-webkit-keyframes loadingI {
	100% {
	transform: rotate(360deg);
	}
}
@keyframes loadingI {
	100% {
	transform: rotate(360deg);
	}
}
/* bubble */
@-o-keyframes bubble{
	0%,
	100% {
	transform: scale(0);
	}
	50% {
	transform: scale(1);
	}
}
@-moz-keyframes bubble{
	0%,
	100% {
	transform: scale(0);
	}
	50% {
	transform: scale(1);
	}
}
@-webkit-keyframes bubble {
	0%,
	100% {
	transform: scale(0);
	}
	50% {
	transform: scale(1);
	}
}
@keyframes bubble {
	0%,
	100% {
	transform: scale(0);
	}
	50% {
	transform: scale(1);
	}
}
/* submit-loading END*/


/*---------------------- 頁面開始 ----------------------*/

/*color variavle*/
:root {
	--mainColor: #A81424;
	--secondColor:#2C2C2B;
	--subColor:#E9E9E9;
  }


/*全頁佈局*/
.blockHeight{padding:8rem 0;}

/*提醒:編輯器插入的圖需做以下設定，圖才不會變形*/
.tx01 img{max-width: 100%;height: auto!important;}



/* header */
.header{padding: 1rem 8rem;}
.logo{width: 360px;}
.bg-light{opacity: 90%;}
.nav-item ,.dropdown-item {font-size: 18px; font-weight: 500; }
.nav-item .nav-link{display: block;color: var(--secondColor);border-bottom: solid 1px rgba(255, 255, 255, 0.01) ; max-width: 120px;}
.nav-item :hover{color:var(--mainColor); border-bottom: solid 1px var(--mainColor);}
.nav-item .nav-link :active{max-width:150px; color:var(--mainColor); border-bottom: solid 1px var(--mainColor);}
.navbar-nav{display: flex;gap:1.5rem;}
.nav-item .dropdown-item{border-bottom: solid 1px rgba(0, 0, 0, 0.01)}
.nav-item .dropdown-item:hover{border-bottom: solid 1px var(--mainColor)}
.nav-item .dropdown-menu{border-radius: 0; border: solid 1px rgba(0, 0, 0, 0.1)}
.dropdown-item.active, .dropdown-item:active {background-color: rgba(168, 20, 36,0.15);margin: 0px;}
.dropdown-toggle::after{display: none;}
.nav-item--phone{display: none;}

@media (min-width:992px){
.dropdown-menu{
	display: block !important;
	pointer-events: none;
	opacity: 0;
}
.nav-item:hover .dropdown-menu{
		pointer-events: auto;
		opacity: 1;
	}
}


/* breadcrumb */
.breadcrumb{padding-top: 2rem;margin-bottom: 0;}
.breadcrumb .active{color:var(--mainColor);font-weight: 500;align-items: end;}


/* banner */
.banner{position: relative;border-radius:0 0 16rem 16rem; overflow:hidden;z-index:2;}
.banner--page{border-radius:0 0 10rem 10rem;}
.bnBox{position:relative;}
.bnBox img{width: 100%;transform: scale(1,1); transition: all 0.5s ease-in;}
.ixBnSlogan{position:absolute;left:50%;bottom:50%;transform:translateX(-50%) translateY(50%); color:#fff;letter-spacing: 1rem;text-align: center;text-shadow: 0.15rem 0.15rem 0.5rem rgba(0, 0, 0, 0.5);;opacity: 0}
.ixBnSlogan__title{font-size: 4rem; letter-spacing: 50;text-indent:1rem; font-weight: 600;padding: 1rem;transform:translateX(-1rem); transition: all 0.5s ease-in-out;}
.ixBnSlogan__subTitle{font-size: 3rem;font-weight: 600;padding: 1rem;}
.bnSlogan{position:absolute;left:50%;bottom:50%;transform:translateX(-50%);color:#fff;letter-spacing: 1rem;text-align: center;text-shadow: 0.15rem 0.15rem 0.5rem rgba(0, 0, 0, 0.5);}
.bnSlogan--page{ bottom:25%;}
.bnSlogan__title{font-size: 4.5rem;letter-spacing: 100; font-weight: 600;padding: 1rem;}
.bnSlogan__title--page{font-size: 3.5rem;font-weight: 600;padding: 1rem;}
.bnSlogan__subTitle{font-size: 3rem;font-weight: 600;padding: 1rem;}
.bnSlogan__subTitle--page{font-size: 2rem;font-weight: 600;padding: 1rem;}
.bnSlogan__Line{ display: block; border-top: solid 1px #FFF;}

/* slick bn標題動效 */
.slick-active .bnBox img{transform:scale(1.1,1.1); transition:0.5s all ;}
.slick-active .ixBnSlogan{opacity: 1;transition: all 1s ease-in;}
.slick-active .ixBnSlogan .ixBnSlogan_title{letter-spacing: 100 ; transform:translateX(0rem); transition: all 0.5s ease-in-out;}

.slick-dots{display:flex;justify-content: center;align-items: center; z-index: 9;}
.slick-dots li button, .banner .slick-dots li{background: #FFF;border-radius: 100rem;width: 0.5rem;height: 0.5rem;opacity: 0.5;transition: 0.3s all;}
.slick-dots li.slick-active{opacity:1;width:2.25rem;}
.slick-dots li button:before{content:none;}

/* blockHeight */
.blockHeight--ixProduct{position:relative;background-image: url("../images/index/bg01.png");background-size: cover; background-position: center; transform: translateY(-16rem);} 
.blockHeight--ixContact{background-image: url("../images/index/bg02.png");display: flex;gap: 1rem;justify-content: space-evenly;padding: 8rem;}
.blockHeight--ixAbout{margin-top: -150px;}
.blockHeight--about, .blockHeight--contact {position:relative;background-image: url("../images/about/bg.jpg?202407106");background-size: cover;overflow: hidden; padding-bottom: 10rem;}
.blockHeight--product, .blockHeight--appliance{position:relative;background-image: url("../images/appliance/bg.jpg?20240716");background-size: cover;overflow: hidden;padding-top: 2rem;}
.blockHeight--contact{padding:4rem; margin: 0 auto;}

/* index */
.ixContentBox{display: flex;gap: 2rem;align-items: center;padding:8rem 0;z-index: 4;justify-content: space-around;}
.ixContentBox--pd{padding-top: 10rem;padding-top: 20rem;padding-bottom: 10rem;}
.ixContactBox p{margin-bottom: 0;}

.ixBg{position: relative;overflow: hidden;}
.ixBg--red{background-color:var(--mainColor);margin-top: -256px;}
.ixBg--gray{background-color:var(--subColor);}

.ixInfo{max-width: 550px; display: flex; flex-direction: column;gap:2rem;z-index:4;}
.ixInfo--ab{max-width: 600px;}
.ixInfo--up{position:relative;/*transform: translateY(-6rem)*/;margin-top: -6rem;}
.ixInfo__txt{font-size: 1.25rem;text-align: justify; color: var(--secondColor);}
.ixInfo__txt--border{border-left: solid 0.5rem var(--mainColor);padding-left:2rem ;}
.ixInfo .ixInfo__title--year{font-family: "Alata", sans-serif; font-size: 128px;}

.ixImgBox{display: flex;gap:4rem;}
.ixImg{position:relative;border-radius: 0 5rem 0 5rem;overflow: hidden;z-index: 4;}
.ixImg--up{transform: translateY(-4rem);}
.ixImg--down{transform: translateY(4rem);}
.ixImg--large{max-width: 600px;}
.ixImg__title, .ixImg__subtitle{color: #FFF;text-shadow: 0.1rem 0.1rem 0.25rem rgba(0, 0, 0, 0.5);}
.ixImg__title{position:absolute;transform: translate(2.5rem,-6.5rem);font-size: 2.25rem;letter-spacing: 1rem;}
.ixImg__subtitle{position: relative;top: -0.75rem;font-size:1.25rem;letter-spacing: 0.5rem; font-weight: lighter;}

.ixPdImg img{transform:scale(1,1);transition: all 0.5s ease-out;}
.ixImgBox__item img:hover{transform:scale(1.1,1.1);}
.ixImgBox__item:hover .ixImgDescribe--left,.ixImgBox__item:hover .ixImgDescribe--right{
	pointer-events: none;
	transform:translateX(-1rem); 
	transition: all 0.5s ease-in-out;
}

.ixContactBox{color:#FFF;font-size: 40px;font-weight: 500;text-align: center;}
.ixContactBox .txt img{max-width:40px;margin-right: 0.5rem;padding-bottom: 0.5rem;}

.centerLine{ border-right:solid 1px #FFF ;}
.ixImg__shape{position:absolute;width: 150px;height: 150px;background-color: var(--mainColor);transform: rotate(45deg);bottom: -5rem;right: -5rem; z-index: 1;}
.ixImg__shape{bottom: -6rem;right: -6rem;}
.ixImg__shape--gary{background-color: var(--subColor)}




/* index 圖說小字樣式 */
.ixImgDescribe{position: absolute;width:240px; border-bottom: solid 1px var(--secondColor);margin-bottom: 0.5rem;}
.ixImgDescribe p{font-size: 20px; margin-bottom: 0;}

.ixImgDescribe--left{top: 74%;left: -44%;}/*.ixImgDescribe--left{top: 67%;left: 29%;}*/
.ixImgDescribe--right{top: 89%;left: 10%;}/*.ixImgDescribe--right{top: 78%;left: 50%;}*/

.ixImgDescribe--left::after, .ixImgDescribe--right::after{content:"";display:block;width:8px;height:8px;border-radius: 50rem;background-color: var(--secondColor);transform: translate(320px,-80px);}
.ixImgDescribe--left::before{content: "";display: block;width: 200px;height: 120px;border-right: solid 1px var(--secondColor);transform: translate(112px, -14px) rotate(45deg);}
.ixImgDescribe--right::before{content:"";display:block;width: 200px;height: 120px;border-right:solid 1px var(--secondColor);transform: translate(112px,16px) rotate(45deg);}


/* bg 裝飾 */
.ixBgImg, .ixBgCircle{position:absolute;}
.ixBgImg {
	--width--lg:80vw;
	width: var(--width--lg);
	aspect-ratio: 1/1;
	border: solid calc(var(--width--lg)/5) #FFF;
	mix-blend-mode: multiply;
	opacity: 0.75;
}
.ixBgCircle{	
	--width--md:45vw;
	--width--sm:15vw;
	--width--ssm:10vw;
	width: var(--width--md);
	aspect-ratio: 1/1;
	border-radius: 50rem;
	opacity: 0.8;
}

.ixBgImg--top{transform: rotate(157deg);top: -43vw;left: -35vw;}
.ixBgImg--bottom{transform: rotate(-26deg);bottom: -42vw;right: -35vw;}

.ixBgCircle--bn{position: absolute; width: var(--width--sm);border: solid calc(var(--width--sm)/4) var(--mainColor);right: 5vw;bottom: 5vw;z-index: 3;}
.ixBgCircle--bn--page{bottom: 5vw; right: 4vw;width: var(--width--ssm);border: solid calc(var(--width--ssm)/4) var(--mainColor);z-index: 3;}
.ixBgCircle--productW{border: solid calc(var(--width--md)/4) #FFF;left: -17vw;bottom: -21vw;}
.ixBgCircle--applianceW{border: solid calc(var(--width--md)/4) #FFF;right: -16vw;top: -22vw;} 
.ixBgCircle--applianceR{width: var(--width--sm);border: solid calc(var(--width--sm)/4) var(--mainColor);left: -7vw;bottom: 5vw;}

.abBgCircle--W{right: -16vw;top:5vw;} 




/* 標題 */
.ixInfo__title{font-size: 48px;font-weight: 800; letter-spacing: 0.25rem; color:var(--mainColor);}

.ixInfo__subTitle{display: block; font-size: 42px;color:#2C2C2B;font-weight: 800;}
.ixInfo__title--w, .ixInfo__subTitle--w{color:#FFF;}
.titleLine{ width: 200px;display: block;border-bottom: solid 01px var(--secondColor);position: relative;top: -20px;right: -200px;}
.titleLine--w{border-bottom: solid 01px var(--subColor);top: -20px;right: -200px;}
.titleLine--abTitle--tp{position: absolute; width: 100px;top: 50%;right: 50%;}
.titleLine--abTitle--bt{position: absolute; width: 40px;top: 50%;right: 50%;}


/* btnStyle */
.btnStyle{max-width: 280px;font-size: 20px; padding:0.5rem 5rem;font-weight: 600; color: var(--mainColor);background-color: #FFF;border: solid 1px var(--mainColor);text-align: center; align-self: center;transition: all 0.5s ease-out;}
.btnStyle--black{background-color: rgba(0,0,0,0.3);color: var(--subColor);border:solid 1px var(--subColor);transition: all 0.5s ease-out;}
.btnStyle:hover{color:var(--subColor);background-color: var(--mainColor);}
.btnStyle--black:hover{background-color: rgba(0,0,0,0.75);}
.btnStyle--form{position: absolute;right:0;margin-right: 4rem;}
.ixBtnStyle--rwdPhone{display: none;}


/* about */
.abContentBox{display: flex;gap: 2rem;align-items: center;padding:4rem 0;z-index: 4;justify-content: space-around;}
.abBg{position: relative;overflow: hidden;}
.abTxt__title__box{position: relative;display: flex;justify-content: space-between;align-items: center;}
.abContentBox .ixInfo__txt{margin-top: -2rem;}



/* product */
.proDot{position: absolute;top: -420px;}

.pdImgBox{display: flex;gap:4rem;}
.pdImg{max-width: 640px;position:relative;border-radius: 0 3rem 0 3rem;overflow: hidden;}
.pdImg img{transform:scale(1,1);transition: all 0.5s ease-out;}
.pdImg--sm{max-width: 400px;aspect-ratio:4/3;gap:2rem}
.pdImg__title, .pdImg__subtitle{color: #FFF;text-shadow: 0.1rem 0.1rem 0.25rem rgba(0, 0, 0, 0.5);}
.pdImg__title{position:absolute;transform: translate(2.5rem,-6.5rem);font-size: 2.25rem;letter-spacing: 1rem;}
.pdImg__subtitle{position: relative;top: -0.75rem;font-size: 20px;letter-spacing: 0.5rem; font-weight: lighter;}

.pdImgBox__item img:hover{transform:scale(1.1,1.1);}
.pdImgBox__item:hover .pdImgDescribe--left,.pdImgBox__item:hover .pdImgDescribe--right{pointer-events: none;transform:translateX(-1rem); transition: all 0.5s ease-in-out;}


.pdList{display: grid;grid-template-columns: 1fr 1fr 1fr;justify-content: center;gap: 2rem;}
.pdList__item figure{background-color: lightgray; max-width: 600px;aspect-ratio:4/3;}

.pdTxtBox{display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;}
.pdTitle{font-size: 20px;}
.pdTitle::before{content:"";display: inline-block;width: 12px;height: 12px;margin-right: 12px;background-color: var(--mainColor);}
.pdTxtBox .spec{background-color: var(--mainColor);padding:0.25rem 0.5rem;color: var(--subColor);}

.pdSelectBar{
	position: relative;
	opacity: 1;
	display: block;
	max-width: 620px;
	margin-top: 5rem;
	border-bottom:solid 4px var(--mainColor);
	margin-bottom: 8rem;
}
.pdSelectBar::after{content: "";position: relative; display: block;max-width: 64px;height:20px;background-color: var(--mainColor);clip-path: polygon(50% 0,50% 0,0 100%,100% 100%);left:45%;}
.pdSelectBar__hd{visibility: hidden;}
.pdImgBox--phone{display: none;}

/* appliance */
.apInfo{display: flex;align-items: end;justify-content: space-between;margin-bottom: 4rem;}
.apInfo .ixInfo__txt{max-width: 800px;}

.apImgList{display: grid;grid-template-columns:1fr 1fr 1fr ; justify-content: space-between;gap: 4rem;}
.apImgList__item{max-width: 600px;aspect-ratio:3/4;}
.apImg{position:relative;border-radius: 0 3rem 0 3rem;overflow: hidden;}
.apImg img{transform: scale(1, 1);transition: all 0.5s ease-out;}
.apImg img:hover{transform: scale(1.1, 1.1);opacity: 0.75;}
.apImgList__item a :hover{background-color: rgba(168, 20, 36, 0.5) ;}



/* contact */
.contactBox{display: flex;justify-content: center;}
.contactAside{background-color: var(--mainColor);padding: 4rem;}
.asideBar__title{border-bottom: solid 1px lightgray;margin-bottom: 2rem;padding-bottom: 2rem;}
.asideBar__title__en, .asideBar__title__ch{color:white;font-weight: 500; letter-spacing: 8px;}
.asideBar__title__en{font-size: 42px;}
.asideBar__title__ch{font-size: 36px;}
.contactForm{position: relative; width:960px;background-color:  white; padding:6rem 4rem ;box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);}
.contactInfo {color:white;margin-bottom: 2rem;}
.contactInfo li{list-style-type:none;font-weight: 300; margin-bottom: 0.5rem;}
.contactInfo a{color:white;}
.contactInfo a:hover{color:rgba(255, 255, 255,0.8);}
.contactInfo .infoTitle{font-size: 20px;font-weight: 500;}
.contactInfo .infoTitle img{max-width:20px;margin-right: 0.5rem;padding-bottom: 0.25rem;}
.contactInfo .infoItem__icon{margin-right: 0.5rem;}
.formGroup__item{margin-bottom: 1rem;}
.formGroup{display: block;}
.underLine{display: block; border-bottom: solid 1px lightgray;margin-bottom: 3rem;padding-bottom: 2rem;}
.required{position: relative;display: inline-block;font-size: 10px;background-color: var(--mainColor);color:white;border-radius: 4px;margin:0 0 4px 4px;padding: 1px 4px;bottom: 2px;}
.contactMap{display: flex;gap: 0.5rem;}



/* footer */
footer{background:var(--secondColor);color:#fff;padding: 1rem 8rem;text-align:center}
footer ul{margin-bottom:10px;padding-left:0;list-style:none}
footer ul li{display:inline-block;padding:0 20px}
footer a{color:rgba(255,255,255,1);}
footer a:hover{color:rgba(255,255,255,.75); text-decoration:none;}
.ftMenu, .ftInfo, .ftLogo{display: flex;}
.ftMenu{justify-content: space-between;margin-bottom: 1rem;padding: 4rem 1rem;}
.ftInfo{gap: 0.5rem;flex-direction: column;text-align: start;}
.ftInfo li{padding-left: 80px;}
.infoLine{border-right:solid 1px #FFF;margin: 0.5rem;}
.infoItem__icon{margin-right: 0.5rem;}
.ftLogo p{font-size: 1.5rem;margin: auto 0;margin-bottom: 1.5rem;}
.ic-logo img{max-width:80px;} 
.copyright{text-align: end; border-top: solid 1px #757575;padding:1rem 0;}

/* 回頂端 */
#goTop{cursor:pointer;position:fixed;bottom:1rem;right:1rem;width:72px;height:72px;font-size: 1.5rem; text-align:center;color:var(--mainColor);background:#fff;border-radius:100%;padding:1rem; box-shadow: rgba(0,0,0,.2) 0 0 10px;z-index: 5;}
#goTop:hover{background:#999;color:#FFF;transition:0.3s all;}

/* 右側 btn */
.fixBtn{position: fixed;right: 1rem;bottom: 12rem;display: flex;flex-direction: column;gap: 1.25rem;align-items: flex-end; z-index: 5;}
.fixBtn__item{background: #FFF;color: var(--mainColor);padding: 1rem;border-radius: 100rem;box-shadow: rgba(0,0,0,.2) 0 0 10px;display: flex;align-items: center;transition: 0.3s all;}
.fixBtn__item .bi{display: flex;font-size: 2.5rem;position: relative;z-index: 0;}
.fixBtn__item:hover{background: var(--subColor);}
.fixBtn__item .bi:before{transition:0.3s all;}
.fixBtn__item:hover .bi{color: var(--mainColor);}
.fixBtn__item:hover .bi:before{transform:scale(0.85)}
.fixBtn__item:hover .bi:after{opacity:1}





/* RWD */

@media (max-width:1600px){
	.ixBgCircle--bn {right: 6vw;bottom: 10vw;}
}


@media (max-width:1440px) {
	/* banner */
	.ixBnSlogan {width: 800px;}
	.ixBnSlogan__title{font-size: 4rem;}
	.ixBgCircle--bn{ right: 7vw;bottom: 19vw;}
	.ixBgCircle--bn--page{ right: 5vw;bottom: 6vw;}

	/* contact */
	.blockHeight {padding: -4rem 0;}
	.contactAside{padding:4rem 2rem;}
	.asideBar__title__en, .asideBar__title__ch{ letter-spacing: 4px;font-size: 32px;}

}

@media (max-width:1280px) {
	.container{max-width: 991px;}
	/* header */
	.header {padding: 1rem 3rem;}
	
	/* banner */
	.ixBnSlogan__title{font-size: 3.5rem;}
	.banner{border-radius:0 0 10rem 10rem;}
	.bnSlogan__title{font-size: 4.5rem;padding: 0.5rem;}
	.bnSlogan__title--page{font-size: 2.5rem;padding: 0.5rem;}
	.bnSlogan__subTitle{font-size: 3rem;padding: 0.5rem;}
	.bnSlogan__subTitle--page{font-size: 2rem;padding: 0.5rem;}
	.ixBgCircle--bn{display: none;}

	/* index */
	.ixInfo__title{font-size: 2.5rem;}
	.ixInfo__txt{max-width:500px;}
	.ixImgBox {gap: 2rem;}
	.ixImg__title {font-size: 2rem;  letter-spacing: 0.75rem; transform: translate(2rem, -6rem);}
	.ixImg__subtitle {top: -0.5rem;font-size: 1rem;letter-spacing: 0.5rem;}
	.ixImgDescribe--right {top: 90%;left: -4%;}
	.ixImgDescribe--left {top: 62%;left: -57%;}
	.ixContactBox {font-size: 32px;}
	.ixContentBox--pd{padding-top: 12rem;}

	/* about */
	.ixInfo .ixInfo__title--year {font-size: 100px;}
	.ixInfo--ab {max-width: 500px;}
	.titleLine--abTitle--tp {right: 44%;}
	.ixImg--large {max-width: 500px;}
	.ixInfo .ixInfo__title--year {font-size: 72px;}
	.titleLine--abTitle--bt{display: none;}
	.titleLine--abTitle--tp {width:72px; right: 40%;}

	/* product appliance */
	.apInfo .ixInfo__txt {max-width: 600px;}
	.pdImg--sm {max-width: 300px;}
	.apInfo .titleLine{right: -80%;width: 100px;}
	.pdSelectBar {margin-top: 4rem;border-bottom: solid 2px var(--mainColor);margin-bottom: 6rem;}

	/* contact */
	.contactAside{padding:4rem 2rem;}
	.asideBar__title__en, .asideBar__title__ch{ letter-spacing: 4px;font-size: 28px;}
	.contactInfo .infoTitle {font-size: 18px;}

	/* footer */
	footer {padding: 1rem 3rem;}
}

@media (max-width:1024px) {
.container{padding:0 64px;}

	/* header */
	.logo{width: 300px;}
	.nav-item ,.dropdown-item {font-size: 16px; font-weight: 500; }

	/* banner */
	.bnSlogan--page {bottom: 20%;}
	.ixBgCircle--bn--page{ right: 5vw;bottom: 6vw;}
	.ixBnSlogan__subTitle {font-size: 1.75rem;}
	.banner{border-radius:0 0 6rem 6rem;}

	/* index */
	.ixContentBox--pd{padding: 16rem 0 4rem 0;}
	.ixInfo__title, .ixInfo__subTitle{font-size: 2.25rem;}
	.ixInfo__txt{max-width:500px;font-size: 1rem;}
	.titleLine {width: 120px;}
	.ixImgBox {gap: 2rem;}
	.ixImg__title {font-size: 1.5rem;  letter-spacing: 0.75rem; transform: translate(2rem, -5rem);}
	.ixImg__subtitle {top: -0.25rem;letter-spacing: 0.25rem;}
	.ixImgDescribe{width:200px;}
	.ixImgDescribe p{font-size: 1rem;}
	.ixImgDescribe--left::before, .ixImgDescribe--right::before {width: 156px;transform: translate(109px, 19px) rotate(45deg);}
	.ixImgDescribe--left::after, .ixImgDescribe--right::after {transform: translate(279px, -80px);}
	.ixImgDescribe--right {top: 92%;left: 3%;}
	.ixImgDescribe--left {top: 65%;left: -49%;}

	/* about */
	.ixInfo--ab {max-width: 400px;}
	.titleLine--abTitle--tp {right: 44%;}
	.ixImg--large {max-width: 460px;}
	.ixInfo .ixInfo__title--year {font-size: 72px;}
	.titleLine--abTitle--tp{display: none;}

	/* product appliance */
	.apInfo .ixInfo__txt {max-width: 500px;}
	.pdImg--sm {max-width: 256px;}
	.apInfo .titleLine{right: -80%;width: 100px;}
	.apImgList{gap:2rem;}

	/* contact */
    .blockHeight--contact {padding-left: 80px;padding-right: 80px;}
	.contactAside{padding: 2rem 2rem;}
	.contactForm{padding:2rem 2rem;}
	.underLine{margin-bottom: 2rem;padding-bottom: 1rem;}
	.btnStyle--form{position: absolute;right:0;margin-right: 2rem;}

	/* 右側 btn */
	.fixBtn {bottom:25%;}
	.fixBtn__item {padding: 0.75rem;}
	.fixBtn__item .bi{font-size: 1.75rem;}
	#goTop{width:50px;height:50px;font-size: 1.5rem;padding:0.5rem;}

}

@media (max-width:991px){
.container{padding:0 40px;}
	/* header */
	.nav-item .nav-link {max-width: none; border-bottom:none; }
	.nav-item .nav-link:hover { border-bottom:none; }
	.navbar-nav .nav-item{text-align: center;}
	.nav-item .dropdown-menu {display: none;}
	.nav-item--phone{display: block;}
	.navbar-nav .dropdown{display: none;}

	/* banner */
	.bnSlogan--page {bottom: 20%;}
	.bnSlogan__title--page{ font-size: 2.15rem;}
	.bnSlogan__subTitle--page {font-size: 1.75rem;padding: 0.5rem;}
	.ixBnSlogan {width: 600px;}
	.ixBnSlogan__title{ font-size: 2.75rem;padding-left: 3rem;}


	/* index */
	.blockHeight .ixContentBox--pd {padding-bottom: 4rem;padding-top: 10rem;}
	.ixInfo__title, .ixInfo__subTitle {font-size: 2rem;}
	.ixImg--up {transform: translateY(-2rem);}
	
	.ixImgDescribe--left::before{height: 80px;transform: translate(95px, -11px)  rotate(45deg);}
	.ixImgDescribe--right::before {height: 80px;transform: translate(95px, 13px) rotate(45deg);}
	.ixImgDescribe--left::after, .ixImgDescribe--right::after {transform: translate(255px, -55px);}
	.ixImgDescribe--right {top: 93%;left: 1%;}
	.ixImgDescribe--left {top: 69%;left: -52%;}
	.ixContactBox {font-size: 28px;}
	.blockHeight--ixContact{padding: 4rem;}
	
	/* product appliance */	
	.apInfo .ixInfo__txt {max-width: 500px;}


	/* contact */
	.contactForm {padding-bottom: 4rem;}
	.contactAside{ display: none;}

	/* footer */
	footer .ftInfo{justify-content: center;}
	.ftNav{display: none;}
	.copyright {text-align: center;}


	/* btn */
	.btnStyle {font-size: 18px;padding: 0.5rem 4rem;}

}

@media (max-width:880px){
	.ixInfo__title, .ixInfo__subTitle {font-size: 1.75rem;}
	.apInfo .ixInfo__txt {max-width: 400px;}
}

@media (max-width:768px){
.container{padding: 0 48px;}

	/*banner*/
	.ixBnSlogan {width: 540px;}
	.ixBnSlogan__title{ font-size: 2.25rem;}
	.ixBnSlogan__subTitle{ font-size: 1.5rem;}
	.bnSlogan__subTitle--page {font-size: 1.5rem;}
	.banner .ixBgCircle, .ixBgCircle--bn{display: none;}
	.slick-dots {bottom: 8px;}

	/* index */
	.ixImg {border-radius: 0 3rem 0 3rem;}
	.ixContentBox--pd .ixImgBox{max-width: 420px;} 
	.blockHeight .ixContentBox--pd {padding-bottom: 4rem;padding-top: 14rem;}
	.ixBtnStyle--rwdWeb{display: none;}
	.ixBtnStyle--rwdPhone{display: block; transform: translateY(8rem);}
	.ixImgDescribe{transform: translateX(6rem) translateY(3rem);}
	.ixImg--up{transform: translateY(0rem) translateX(2rem);}
	.ixImg--down {transform: translateY(2rem) translateX(2rem);}
	.ixImgDescribe--right {top: 81%; left: 12%;}
	.ixImgDescribe--left {top: 76%; left: -46%;}
	.ixContentBox{flex-direction: column;} 
	.ixContentBox--reverse{flex-direction: column-reverse;}
	.ixContentBox .ixImg--large{max-width: 500px;}
	.blockHeight--ixContact {padding: 2rem;gap:0.5rem;}
	.ixContactBox{font-size: 24px;}
	.ixContactBox .txt img{max-width: 24px;}
	.centerLine{margin: 0 1rem;}

	/* about */
	.abContentBox{flex-direction: column;gap: 0rem;}
	.abContentBox--reverse{flex-direction: column-reverse;padding: 2rem 0;}
	.abBtnStyle--rwdphone{display: none;}
	.abContentBox .ixImg--large{max-width: 500px;}
	.ixInfo--ab {max-width: 500px;}

	/* product appliance */
	.apInfo {display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;margin-bottom: 4rem;gap: 2rem;}
    .apInfo .ixInfo__txt {max-width: 100%;}
	.pdImgBox {gap: 1rem;}
	.pdSelectBar {margin-top: 2rem;margin-bottom: 4rem;}
	.pdImg, .apImg {border-radius: 0 2rem 0 2rem;}
	.pdImg--sm {max-width: 280px;}
	.pdSelectBar::after {left: 40%;}
	.apImgList {grid-template-columns: 1fr 1fr;}
	.pdImg__title {transform: translate(1.5rem, -5rem);font-size: 1.5rem;}
	.pdImg__subtitle {top: 0.25rem;font-size: 1.25rem;}
	.pdList{grid-template-columns: 1fr 1fr;}


	/* btn */
	.btnStyle{font-size: 18px;}

}

@media (max-width:640px){	
.blockHeight{padding: 4rem 0;}

	/* banner */
	.banner{border-radius:0 0 4rem 4rem;}
	.bnSlogan--page {bottom: 8%;}
	.bnSlogan__title--page {padding: 0rem;}
	
	/* index */
	.blockHeight--ixContact {padding: 3rem;}
	.blockHeight .ixContentBox--pd {padding-top: 18rem;}
	.ixContentBox {padding: 4rem 0;}
	.ixContentBox--pd {flex-direction: column;padding: 20rem 0 4rem 0;}
	.apInfo .titleLine{ right: -72%;  width: 84px;}
	.ixImgDescribe{display: none;}
	.ixImg--up, .ixImg--down {transform: translateY(0rem) translateX(0rem);}
	.ixBtnStyle--rwdPhone {transform: translateY(1rem);}
	.ixContactBox {font-size: 20px;}
	
	/* about */
	.blockHeight--about, .blockHeight--contact {padding-bottom: 4rem;}


	/* contact */    
	.blockHeight--contact{ padding-left: 2rem;padding-right: 2rem;}
	.contactBox, .contactMap{flex-direction: column;}
	.contactForm{max-width: 100%;}
	.contactMap iframe{height:200px; }

	/* footer */
	.copyright{margin-bottom: 2rem;}
	.ftLogo p {font-size: 1.25rem;}

	/* go top  */
	#goTop {width: 100%; bottom: 0; border-radius: 0;}


}


@media (max-width:580px){
.container{padding: 0 40px;}

	/* header */
    .logo {width: 240px;}
	.header {padding: 0.5rem 1rem;}
	.navbar-nav {padding-top: 1rem;}

	/* banner */
	.ixBnSlogan__title{margin-left: 2rem;}
	.ixBnSlogan__title, .bnSlogan__title { font-size: 1.8rem;letter-spacing: 0.5rem;padding: 0rem;}
	.ixBnSlogan__subTitle, .bnSlogan__subTitle {font-size: 1.25rem;padding: 0.5rem; letter-spacing: 0.25rem}
	.ixBnSlogan{width: 360px;}
	.bnSlogan {width: 280px;}
	.bnSlogan--page {bottom: 0%;}

	/* index */
	.blockHeight--ixContact{flex-direction: column;padding:3rem 5rem;} 
	.blockHeight .ixContentBox--pd {padding-bottom: 2rem;padding-top: 0rem;}
	.ixContentBox {padding: 2rem 0;}
	.ixInfo--up {margin-top: 12rem;}
	.centerLine{border-bottom:solid 1px white; margin:2rem 0;}
	

	/* product appliance */
	.blockHeight--product, .blockHeight--appliance {padding: 2rem 0 4rem 0;}
	.blockHeight--product .ixImg__title {transform: translate(2rem, -5rem);}
    .apImgList{gap: 1rem;}
	.pdList{gap:1rem;}
	.pdImgBox{display: none;}
	.pdImgBox--phone{display: flex;gap: 1rem;}
	.pdImgBox--phone .ixImg {    max-width: 400px;aspect-ratio: 1 / 1;}
	.ixImg__shape {right: -8rem;}
	.spec{font-size: 0.8rem}
	.apInfo {gap: 1rem;  margin-bottom: 2rem;}
	.pdSelectBar::after {left: 35%;}
	.pdTxtBox {display: block; padding: 0 0 0.5rem 0;}
	.pdTitle {font-size: 18px;margin: 0.25rem;}

	/* footer */
	footer {padding: 1rem 2rem;}
	.ftLogo{flex-direction: column;justify-content: center;}
	footer ul li{display:inline-block;padding:0;}
	.ftInfo li{padding-left: 0;}
	.ftMenu {justify-content: space-between;margin-bottom: 1rem;padding: 2rem 0rem;}


}

@media (max-width:480px){
	.container{padding: 0 20px;}

	/* banner */
    .bnSlogan--page {bottom: -5%;}
	.banner { border-radius: 0 0 3rem 3rem;}

	/* index */
    .ixImg__title {font-size: 1.25rem;letter-spacing: 0.5rem;transform: translate(1rem, -5rem);}
	.blockHeight--ixContact {padding: 3rem 3rem;}

	/* product */
	
	.blockHeight--product .ixImg__title {transform: translate(1rem, -4rem);}
	.pdSelectBar::after {left: 35%;transform: scale(0.75) translateY(5px);}

}

@media (max-width:375px){
.container{padding: 0 16px;}

	/* header */
	.navbar-nav {padding-top: 1rem;}

	/* banner */
    .ixBgCircle--bn {bottom: 109vw;}
	.bnSlogan {width: 240px;}
	.bnSlogan--page {bottom: -12%;}
	.ixBnSlogan__title, .bnSlogan__title {font-size: 1.5rem;}

 	/* index */
	 .ixImg{border-radius: 0 2rem 0 2rem;}
	 .ixImg__title {font-size: 1.25rem;letter-spacing: 0.5rem;transform: translate(1rem, -5rem); }
	 .ixImg__subtitle {font-size: 1rem;top: 0rem; letter-spacing: 0.1rem;}

	/* about */
	.ixInfo .ixInfo__title--year {font-size: 64px;}

	/* product appliance */
	.pdImg, .apImg {border-radius: 0 1rem 0 1rem;}
	.pdSelectBar::after {left: 30%;}
	.apInfo .titleLine { right: -70%;top: -14px; width: 150px;}
	.ixInfo__title, .ixInfo__subTitle {font-size: 1.75rem;}

	/* index */
	.ixInfo__title, .ixInfo__subTitle {font-size: 1.5rem;}
	.ixContactBox{font-size: 18px;}

	/* contact */
	.contactForm {padding:1rem 1rem 4rem 1rem}
	.formGroup__item {margin-bottom: 0.5rem;}

	/* footer */
	footer {padding: 3rem 3rem;}
	.ftMenu{padding: 0;}
	.ftLogo p{font-size: 1.25rem;}
}