@import url("./normalize.css");
@import url("./bootstrap.css");
@import url("./bootstrap.min.css");
@import url("./webnode_basic.css");
@import url("./animate.css");

@charset "UTF-8";
/* CSS Document */
/*************** index *****************/
main.index_main{ 
	background-color: var( --page_bg-color ); position: relative; background-image: url("../images/index_bg.jpg");
	background-position: center; background-size:cover;
}

main.index_main .main_content_box{  
	display: flex; align-items: center; flex-flow: column; justify-content: center; position: relative; left: 50%;
	width:calc( ( 100dvw / 4 ) ); height: 100%; margin:0 0 0 calc( ( 100dvw / 5 ) * ( -1 ) + 10px );  
}

main.index_main .main_content_box img{  width:calc( ( 100dvw / 6 ) + 10px ); }

main.index_main .main_content_box > div{ margin: 1rem 0; } 

main a.enter{ 
	background-color:var( --bg-color ); color: var( --font-color_w ); padding:.1rem .5rem .1rem 1rem ; letter-spacing: .5rem; 
	transition:all .5s; 
}

main a.enter:hover{ font-size: 1.2rem; }
/*************** index over *****************/


/*************** footer *****************/
footer div.info{  
	background-color: var( --footer-color_g ); color: var( --font-color_w ); font-size: .8rem; font-family: NotoSansTC-Regular;
	letter-spacing:.1rem ; display: flex; justify-content: center; text-align: center;  padding: .2rem 1rem;
}

footer div.info div{ padding: .2rem 0; }

footer div.info div::before{ content: "|"; margin:.5rem; }

footer div.info div:first-child::before{  display: none; }
/*************** footer over *****************/


/*************** header *****************/
header{ 
	display: flex; align-items: end; padding-top: .5rem; border-bottom: 1px solid var( --bg-color );
	background-color: var( --page_bg-color_w ); justify-content: space-between;
}

header > div{ display: flex; max-width: 1900px; margin: auto; }

header div.logo{ 
	display: flex; align-items: end; width:calc( ( 100dvw / 2 ) ); padding: .5rem 50px 1rem 50px; 
}

header div.logo > img{ max-width:190px; margin-right: .5rem; }

header div.menu{ 
	width:calc( ( 100dvw / 2.5 ) ); display: flex; align-items: end; padding: .5rem 1rem 1rem 1rem; 
	justify-content: end;
}

header div.menu a{ 
	width:6rem; text-align: center; font-family: NotoSansTC-Regular; font-weight: 500; color:var( --font-color );
	opacity: .9; transition: all .1s;
}

header div.menu a:hover{ font-size: 1.1rem; }

header div.menu a.active{ font-size: 1.2rem; opacity: 1; font-family: NotoSansTC-Bold; }

header div.company{ font-size: .85rem; color: var( --font-cloor_b ); } 

/****** works slick_bar ******/ 
.slider, .slick-slider, .slick-list{ overflow: hidden; } 

.slick-list{ 
	width:calc( ( 80dvw ) ); display: flex;	align-items: end; 
} 

.slick-track{  text-align: left; display: flex;	align-items: end; 
}  

.sli_arrow{
	width: 3rem; height: 3rem; position: absolute; background-repeat: no-repeat; z-index: 10;
	cursor: pointer; background-position: center;
}

.slick-prev{
	display: flex; background-image:url(../images/search_change_right.svg); background-size: 1.5rem;
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.slick-next{
	display: flex; background-image:url(../images/search_change_right.svg); background-size: 1.5rem;
}

.slick-prev { left:0rem; bottom: 0; }

.slick-next { right:0rem; bottom: 0; }

/*************** header over *****************/



/*************** pages *****************/  
.pages_main .main_content_box{ background-color: var( --page_bg-color ); color:var( --font-color ); }

.pages_main[name="aboutus"] .main_content_box{ 
	background-image: url(../images/aboutBg.jpg); background-position: center bottom; background-size: cover;
	background-repeat: no-repeat;
}

.pages_main[name="product"] .main_content_box, .pages_main[name="contactus"] .main_content_box{ height: 100%; }

.pages_main{ color:var( --font-color ); }

.main_content_box .content{ max-width: 1440px; }

.subGroup{ display: flex; flex-direction: column; }

.content .subGroup{ position: sticky; top: 6rem; }

.subGroup .sub{ margin-top: -.5rem; }

.subGroup .divider{ height: .4rem; background-color: var( --bg-color ); }

.subGroup span{ font-family: NotoSansTC-Regular; font-weight: 400; margin-bottom: .5rem; }

.subGroup span.sub{ font-size: 2.8rem; letter-spacing: .4rem; }

.subGroup span.txt{ font-size: .9rem; } 

.subGroup span:last-child{ font-size: 1rem; margin-top: 1.5rem; } 

.showcas{ overflow: hidden; text-align: center; }

.showcas img{ transform:scale(1) ;transition: all .5s ease-out; }

.showcas img:hover{ transform:scale(1.05); }

.pageSub{ 
	font-family: NotoSansTC-Regular; text-align: center; font-size: 2.2rem; font-weight: bold;
	background-color: var( --page_bg-color_w );
}

.subTxt{ 
	background-color: var( --bg-color ); color: var( --font-color_w ); width: auto; display: inline;
	padding: .1rem .5rem;
} 

.pages_main .content p{ line-height:2rem; }  

.successhaead{ position: sticky; top: 0rem; z-index:90; background-color: #ffffff; }

.pages_main[name="successcase"] .main_content_box{ text-align: center; } 

.pages_main[name="successcase"] .subGroup span.sub{ font-size: 2.5rem; letter-spacing: .5rem; }

.pages_main[name="successcase"] .subGroup span.txt{ font-size: .7rem; margin: .2rem; } 

.content div.showcas > div{ 
	font-size: .8rem; width: 100%; text-align: left; margin: -.5rem 0 3rem 0;
}

.tab{ 
	background-color: var( --bg-color ); color: var( --font-color_w ); padding:.5rem; margin-top: 1rem;
	text-align: center;
}

.tab > div{ display: flex; align-items: center; margin-left: 1px; justify-content: center; }

.tab > div a{ 
	border-left: 1px solid #ffffff;  border-right: 1px solid #ffffff; margin-left: -1px;
	line-height: 1.2rem;
} 

.tab a.active{ font-weight: bold; font-size: 1.1rem; font-family: NotoSansTC-Bold; }
/*************** pages over *****************/


.top-scroll {
    width: 3rem; height: 3rem; position: fixed; right:.1rem; bottom:4rem; padding:.1rem; z-index:4; cursor: pointer; 
	background-image: url(../images/gotop.svg); background-position: center; background-repeat: no-repeat; background-size: 1.5rem;
}

/******** 響應式螢幕尺寸＿字體大小調整 *********/
@media only screen and ( orientation: landscape ){  
	
} 

@media only screen and (max-width:1400px){  
	header div.menu { width: calc((100dvw / 2)); } 

	.subGroup span.sub{ font-size: 2.2rem; }
}

@media only screen and (max-width:1200px){  
	header, header > div{ display: grid; }

	header div.logo, header div.menu{ width:calc( ( 100dvw / 1 ) ); } 
}

@media only screen and (max-width:1023px){   

	main.index_main .main_content_box{  margin:0 0 0 calc( ( 100dvw / 4  ) * ( -1 ) + 10px ); padding: 1rem; }

	main.index_main .main_content_box, main.index_main .main_content_box img{ min-width:300px; }

	footer div.info{ display: grid; grid-template-columns: repeat(2, 1fr); text-align: left; } 

	footer div.info div::before{  display: none; }
} 

@media only screen and (max-width:992px){  
	header div.menu{ padding: .5rem 1rem 1rem 1rem; }

	.subGroup span:first-child{ font-size: 2rem; letter-spacing: .4rem; }

	.tab a.active { font-size: 1.05rem;	}
}

@media only screen and (max-width:767px){
	main.index_main .main_content_box{ position: relative; left:0; margin:0 auto; }  

	header div.logo > img{ max-width:120px; } 
}

@media only screen and (max-width:640px){ 
	header div.logo, header div.menu{ padding: .5rem; justify-content: center; }  

	.slick-list{  width:calc( ( 100dvw - 6rem ) ); padding-bottom: .25rem;}

	.pages_main[name="successcase"] .subGroup span.sub{ font-size: 2rem; letter-spacing: .5rem; margin-bottom: .2rem; } 

	.tab { padding: .25rem; margin-top: .5rem; }
	
	.tab > div a{ 
		border-left: 1px solid #ffffff; border-right: 0px solid #ffffff; padding: 0 .5rem;
	}

	.tab > div a:first-child{ border-left: 0px solid #ffffff;  }

	.tab a.active{ font-size: 1rem; }

	footer div.info{ display: grid; grid-template-columns: repeat( 1, 1fr ); }

	footer div.info div::before{ display:none; }
}

@media only screen and (max-width:575px){ 
	.tab > div a:first-child{ text-align:left; }
}

@media only screen and (max-width:340px){ 
	.tab > div a{ width: 4rem; }

	.tab > div a:first-child{ width: 6rem; text-align:left; }
}