@charset "utf-8";
html * { -webkit-text-size-adjust: 100%; }
/*
* { margin: 0px; padding: 0px; box-sizing: border-box; }
*/
a, a:link, a:visited, a:hover, a:active { text-decoration: none; }
img { border: 0px none; }

body {
    position: relative;
	width: 100%; 
	height: 100%;
	font-family: 'Microsoft JhengHei','Microsoft YaHei',Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0 auto;
	background: #ffffff;
	cursor: default;
}

@media only screen and (max-width: 480px) {
body { 
    font-size: 16px; 
	}
}

/************************
TOTAL
************************/
.page-container, .page-wrapper {	
    padding: 0px; 
	margin: 0px auto; 
	word-wrap: break-word; 
	word-break: normal;
	width: 100%;
	max-width: 1200px;
	}
@media (min-width:768px){.page-wrapper{ width:100%; } }
@media (min-width:992px) {.page-wrapper { width:100%; } }
@media (min-width:1024px){.page-wrapper{ width:100%; } }
@media (min-width:1280px){.page-wrapper{ width:100%; } }

@media (min-width:768px) { .page-container { width:100%; } }
@media (min-width:992px) { .page-container { width:100%; } }
@media (min-width:1024px){ .page-container{ width:100%; } }

.page-wrapper img, .page-container img { max-width: 100%; }


/************************
BANNER
************************/ 
.btn_group { 
	position: relative;
	display: inline-block;
	width: 100%;
	text-align: center;
	}
/************************/
.btn { 
	position: relative;
	display: inline-block;
	line-height: 1.0em;
	text-align: center;
	margin: 20px 10px;
	padding: 10px 30px;
	}
.btn, 
.btn:hover { 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;	
	}
a.btn_00, .btn_00 { 
	min-width: 300px;
	font-size: 30px;
	font-weight: 400;
	padding: 20px 20px;
	color: #ffffff; 
	background: #C01323;
	border-radius: 50px;
	}

@media only screen and (max-width: 992px) {
a.btn_00, .btn_00 { 
	min-width: 250px;
	font-size: 25px;
	padding: 20px 20px;
	}
}
@media only screen and (max-width: 480px) {
a.btn_00, .btn_00 { 
	min-width: 200px;
	padding: 20px 20px;
	}
}	
/************************
KEY-VISUAL
************************/
#main_visual .box_01,
#main_visual img,
#main_visual {
	position: relative;
	display: inline-block;
    width: 100%;
	text-align: center;		
	}
	
#main_visual {	
	float: left;	
	min-height: 944px;	
	background: #1b8fcc;
	background-image: url('../images/technology/kv_bg01.jpg'); 
	background-repeat: no-repeat; 	
    background-position: center bottom;
    background-size: 100% 1024px;
	overflow: hidden;
	}
#main_visual .bg_kv {	
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 450px;
	background-image: url('../images/technology/kv_bg02.png'); 
	background-repeat: no-repeat; 	
    background-position: center bottom;
    background-size: 100% 450px;
	}	

#main_visual .bg_kv img.mountain {
	position: absolute;
	left: 0px;
	top:0px;
	transform: translateY(-37%);
animation-name: p3c;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@media only screen and (min-width: 2285px) {

#main_visual .bg_kv img.mountain {

	/*transform: translateY(-37%);*/
	
		position: absolute;
		display: none;

	/*transform: translate(10%,-37%);*/
	/*transform:  translate(calc(200%)+10px,-37%);*/



}

}



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

#main_visual .bg_kv img.mountain {

	transform: translateY(-37%);
}

}


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

#main_visual .bg_kv img.mountain {

	transform: translateY(-40%);
}

}

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

#main_visual .bg_kv img.mountain {

	transform: translateY(-33%);
}

}

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

#main_visual .bg_kv img.mountain {

position: ;
	/*transform: translateY(-33%);*/
	top:-215px;
width: 132%;
	     
      transform: translateX(-5%);


        /*bottom: 210px;*/
}

}

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

#main_visual .bg_kv img.mountain {

position: ;
	/*transform: translateY(-33%);*/
	top:-205px;
width: 152%;
	     
      transform: translateX(-4%);


        /*bottom: 210px;*/
}

}

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

#main_visual .bg_kv img.mountain {

position: ;
	/*transform: translateY(-33%);*/
	top:-226px;
width: 167%;

	     
      transform: translateX(-5%);


        /*bottom: 210px;*/
}

}


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

#main_visual .bg_kv img.mountain {

position: ;
	/*transform: translateY(-33%);*/
	top:-226px;
width: 197%;

	     
      transform: translateX(-2%);


        /*bottom: 210px;*/
}

}

@keyframes p3c{
	0%  {filter: brightness(1.0);}
	40% {filter: brightness(1.2);}
	100%{filter: brightness(1.0);}
}

/*@media only screen and (max-width: 1306px) {

#main_visual .bg_kv img.mountain {

	transform: translateY(-37%);
}

}*/

#main_visual .bg_kv img {	
	position: relative;
	display: inline-block;
	width: 2060px;
	bottom: 410px;
	}

#main_visual .pic,	
#main_visual .txt {
	display: inline-block;
    width: 100%;
	text-align: center;	
	}
#main_visual .txt {
	text-align: left;	
	padding-top: 100px;
	padding-left: 50px;
	}	
#main_visual .txt img {
    width: 50%;
	}
#main_visual .pic img {
    width: 90%;
	padding: 0px 0%; 
	padding-top: 300px; 



	}





#main_visual .pic img:nth-child(1){

animation-name: p2c;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-delay: 1s;

}
#main_visual .pic img:nth-child(2){

animation-name: p2c;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-delay: 1.1s;

}
#main_visual .pic img:nth-child(3){

animation-name: p2c;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-delay: 3s;

}

@keyframes p2c{
	0%  {filter: brightness(1.0);}
	20% {filter: brightness(1.2);}
	70%{filter: brightness(1.0);}
}



#main_visual .pic img:nth-child(2),#main_visual .pic img:nth-child(3){
	position: absolute;
position: absolute;transform: translateX(-100%);

}




@media only screen and (min-width: 1920px) {
#main_visual .bg_kv img {	
	margin-left: 10%;
	}
}


@media only screen and (max-width: 1920px) {
#main_visual .bg_kv img {	
	margin-left: 8%;
	}
}

@media only screen and (max-width: 1620px) {
#main_visual .bg_kv img {	
	margin-left: -5%;
	}
}



@media only screen and (max-width: 1420px) {
#main_visual .bg_kv img {	
	margin-left:-200px;
	}
}

@media only screen and (max-width: 1280px) {
#main_visual {	
	min-height: 768px;	
    background-size: 100% 768px;
	}
#main_visual .bg_kv {	
	height: 350px;
    background-size: 100% 350px;
	}
#main_visual .bg_kv img {	
	margin-left: -220px;
	width: 1900px;
	}	
}

@media only screen and (max-width: 992px) {
#main_visual .bg_kv {	
	height: 350px;
    background-size: 100% 350px;
    	margin-left:0px;
	}
#main_visual .bg_kv img {	
	margin-left: -300px;
	width: 1400px;
	bottom: 250px;
	}
#main_visual .txt {
	padding-left: 0px;
	text-align: center;	
	}	
#main_visual .txt img {
    width: 80%;
	max-width: 600px;
	padding: 0px 10%; 
	}

	#main_visual .pic img {
    width: 90%;
	padding: 0px 0%; 
	padding-top: 440px; 
	}
	
}

@media only screen and (max-width: 768px) {
#main_visual .bg_kv {	
	height: 330px;
    background-size: 100% 330px;
	}
#main_visual .bg_kv img {	
	margin-left: -10%;
	width: 120%;
	bottom: 200px;
	}
}


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

	#main_visual .pic img {
    width: 90%;
	padding: 0px 0%; 
	padding-top: 380px; 
	}

#main_visual .bg_kv img {	
	margin-left: -20%;
	width: 140%;
	bottom: 200px;
	}

}


@media only screen and (max-width:500px) {
#main_visual .bg_kv {	
	height: 280px;
    background-size: 100% 280px;
	}
#main_visual .bg_kv img {	
	margin-left: -25%;
	width: 150%;
	bottom: 220px;
	}
}

@media only screen and (max-width: 480px) {
/*#main_visual .bg_kv img {	
	bottom: -150px;
	}*/

#main_visual .bg_kv img {	
	margin-left: -45%;
	width: 190%;
	bottom: 220px;
	}


}	


/************************/
.block .box .dd,
.block .box .dt,
.block .tt,
.block .box ul li,
.block .box ul,
.block .box,
.block {
	position: relative;
	display: inline-block;
	width: 100%;
	font-size: 18px;
	line-height: 1.5em;
	}

.block .pic img,
.block .box img {
	position: relative;
	display: inline-block;
	width: 100%;
	}

.block .box .note { 
	font-weight: 600;
	}
.block .bg {	
	position: absolute;
	display: inline-block;
	z-index: 0;
	}
.block .bg01 {	
	width: 100%;
	height: 400px;
	top: -600px;
	left: 0;
	}

.block .bg03,
.block .bg02 {	
	position: relative;
	width: 100%;
	height: 280px;
	background-repeat: repeat-x; 	
    background-position: center top;
    background-size: 100% 280px;
	z-index: 1;
	}	
.block .bg02 {	
	margin-top: -180px;
	}
.block .bg03 {	
	margin-bottom: -180px;
	}	
.block .bg02 {	
	background-image: url('../images/technology/bg_201.png'); 
	}		
.block .bg03 {	
	background-image: url('../images/technology/bg_202.png'); 
	}


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

	.block .bg03,
.block .bg02 {	
	position: relative;
	width: 100%;
	height: 180px;
	background-repeat: repeat-x; 	
    background-position: center top;
    background-size: 100% 170px;
	z-index: 1;
	}	
}

	
@media only screen and (max-width: 2480px) {
.block .bg01 {	
	top: -500px;
	}
}
	
@media only screen and (max-width: 1920px) {
.block .bg01 {	
	top: -350px;
	}
}
@media only screen and (max-width: 1280px) {
.block .bg01 {	
	top: -250px;
	}
}

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

}

/************************/	
.block_01 {
	width: 90%;
	padding: 50px 5%; 
	padding-bottom: 200px; 
	background: #ccdceb;
	
	background-image: url('../images/technology/bg_102.jpg'); 
	background-repeat: repeat-x; 	
    background-position: center bottom;
    background-size: auto 1280px;
	}
.block_01 .box {
	width: 90%;
	padding: 30px 5%; 
	margin: 70px 0px;
	border-radius: 30px;
	background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.9) 100%);
	}

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

.block_01 .box {

	margin: 20px 0px 70px 0px;
	
	}

}

	
.block .box .dt {
	text-align: center;
	}
	
.block_04 .box .dt,	
.block_03 .box .dt,	
.block_01 .box .dt {
	font-size: 50px;
	
	color: #da2722;
	font-family:  'Noto Sans TC';
	font-weight: 700;

	/*font-family: 'Microsoft JhengHei','Microsoft YaHei',Arial, Helvetica, sans-serif;
	font-weight: 900;*/
	}	
	
.block_03 .box_02 .dt img,
.block_01 .dt img {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 860px;
	}
.block_01 .box .dd {
	padding: 20px 0px;
	}
.block_01 .box .dd2 {
	text-indent: -10px;
	margin-left: 10px;
	}	
	
.block_01 .box .note {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 20px 0px; 
	word-break: break-all;
	}	


.dd_indent{

margin-left: 20px;
text-indent: -20px;

}


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


.block_04 .box .dt,	
.block_03 .box .dt,	
.block_01 .box .dt {
	font-size: 35px;
	font-weight: 600;
	color: #da2722;
	}	

}

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


.block_04 .box .dt,	
.block_03 .box .dt,	
.block_01 .box .dt {
	font-size: 25px;
	font-weight: 600;
	color: #da2722;
	}	

}


/************************/
.block_02 {
	background: linear-gradient(to bottom, #eef9fb 10%, #cae6e4 90%);
	}
	
.block_02 .box_02 {
	width: 90%;
	padding: 0px 5%;  
	padding-bottom: 30px; 
	margin: 10px auto;
	}
	
	
.block_02 .box_02 .pic {
	padding: 10px 0px; 
	}		

.block_02 .box_02 .slider-nav li:hover {
	cursor: pointer;
	}
.block_02 .box_02 img.slick-act,
.block_02 .box_02 .slick-current img.slick-not {
	display: none;
	}
.block_02 .box_02 .slick-current img.slick-act {
	display: inline-block;
	}	
	
.block_02 .box_02 .slider-nav {	
	z-index: 1;
	padding: 10px 50px; 
	}
.block_02 .box_02 .slider-for {
	z-index: 2;
	background-color: #ffffff;
	border-radius: 20px;
	}
.block_02 .box_02 .slider-for li {
	position: relative;
	display: inline-block;
	min-height: 650px;
	overflow: hidden;
	}



.block_02 .box_02 .slider-nav img.slick-act{


	
	
	animation-name: p1c;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
}
@keyframes p1c{
	0%  {filter: brightness(1.0);}
	40% {filter: brightness(1.2);}
	100%{filter: brightness(1.0);}
}





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

.block_02 .box_02 .slider-nav {	
	z-index: 1;
	padding: 10px 00px; 
	}

}





	
.block_02 .box_02 .slider-for li .pic img,
.block_02 .box_02 .slider-for li .pic,
.block_02 .box_02 .slider-for li .note,
.block_02 .box_02 .slider-for li .dd,
.block_02 .box_02 .slider-for li .dt,
.block_02 .box_02 .slider-for li {
	position: relative;
	display: inline-block;
	float: left;
	width: 100%;
	}

	
.block_02 .box_02 .slider-for li .item_content,
.block_02 .box_02 .slider-for li .item_menu a,
.block_02 .box_02 .slider-for li .item_menu,
.block_02 .box_02 .slider-for li .tab_01,
.block_02 .box_02 .slider-for li .item_box {
	position: relative;
	display: inline-block;
	float: left;
	width: 100%;
	}
.block_02 .box_02 .slider-for li .item_content {
	float: right;
	width: 76%;
	padding: 20px 2%; 
	}

.block_02 .box_02 .slider-for li .item_menu {
	width: 20%;
	background-color: #d7d7d7;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	}
.block_02 .box_02 .slider-for li .item_menu a {
	position: relative;
	display: flex;
	width: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	}
	
.block_02 .box_02 .slider-for li .item_menu a + a {
	border-top: 1px solid #b9b9b9; 
	}	
	
.block_02 .box_02 .slider-for li .item_menu a.active {
	color: #ffffff;
	background-color: #da2722;
	}
.block_02 .box_02 .slider-for li .item_menu a.active::before {
	position: absolute;
	content: '';  
	top: 40%;
	right: 0px;
	width: 0px;
	height: 0px;
	border-width: 20px 20px 20px 0px;
	border-style: solid;
	border-color: transparent #ffffff;
	}	
	
	
.block_02 .box_02 .slider-for li .item_menu a:first-child.active {
	border-top-left-radius: 20px;
	}
.block_02 .box_02 .slider-for li .item_menu a:last-child.active {
	border-bottom-left-radius: 20px;
	}
	
.block_02 .box_02 .slider-for li.child-201 .item_menu a {
	min-height: 230px;
	}	
.block_02 .box_02 .slider-for li.child-202 .item_menu a {
	min-height: 345px;
	}	
.block_02 .box_02 .slider-for li.child-203 .item_menu a {
	min-height: 690px;
	}
.block_02 .box_02 .slider-for li.child-203 .item_content {
	width: 96%;
	}

.block_02 .box_02 .slider-for li .pic img,
.block_02 .box_02 .slider-for li .note,
.block_02 .box_02 .slider-for li .dd,
.block_02 .box_02 .slider-for li .dt {
	width: 100%;
	}
.block_02 .box_02 .slider-for li .dt {
	font-size: 40px;
	font-weight: 600;
	padding: 10px 0px; 
	text-align: left;
	}	


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

.block_02 .box_02 .slider-for li .dt {
	font-size: 32px;
	
	}	


}


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

.block_02 .box_02 .slider-for li .dt {
	font-size: 25px;
	
	}	


}


.block_02 .box_02 .slider-for li .dd {
	width: 98%;
	text-indent: -20px;
	margin-left: 20px;
	padding-right: 2%; 
	}
	
.block_02 .box_02 .slider-for li .note { 
	font-size: 14px; 
	line-height: 1.5em;
	font-weight: 400; 
	}
.block_02 .box_02 .slider-for li .note .cs01  { 
	font-size: 18px;
	font-weight: 600;
	}

.block_02 .box_02 .show {
	display: inline-block;
	}
.block_02 .box_02 .hide { 
	display: none;
	}

@media only screen and (max-width: 992px) {
.block_02 .box_02 .slider-for li .item_content {
	width: 71%;
	padding: 20px 2%; 
	}

.block_02 .box_02 .slider-for li .item_menu {
	width: 25%;
	}	
}

@media only screen and (max-width: 768px) {
.block_02 .box_02 .slider-for li .item_menu {
	width: 100%;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;	
	border-bottom-left-radius: 0px;
	}
.block_02 .box_02 .slider-for li .item_menu a.active::before {
	top: 80px;
	right: 45%;
	
	border-width: 20px 20px 20px 0px;
	border-style: solid;
	border-color: transparent #ffffff;
	transform: rotate(90deg);
	}
.block_02 .box_02 .slider-for li .item_menu a:last-child.active {
	border-bottom-left-radius: 0px;
	border-top-right-radius: 20px;
	}

.block_02 .box_02 .slider-for li .item_menu a + a {
	border-top: 0px solid #d7d7d7; 
	border-left: 1px solid #b9b9b9; 
	}	
	
.block_02 .box_02 .slider-for li.child-201 .item_menu a {
	width: 33.2%;
	min-height: 100px;
	}	
.block_02 .box_02 .slider-for li.child-202 .item_menu a {
	width: 49.4%;
	min-height: 100px;
	}	
.block_02 .box_02 .slider-for li.child-203 .item_menu a {
	min-height: 100px;
	}

.block_02 .box_02 .slider-for li .dt {
	font-size: 28px;
	}	

.block_02 .box_02 .slider-for li .item_content {
	float: right;
	width: 92%;
	padding: 20px 4%; 
	}	
.block_02 .box_02 .slider-for li .item_box {
	width: 92%;
	padding: 20px 4%; 
	}
.block_02 .box_02 .slider-for li.child-203 .pic img {
	width: 80%;
	padding: 0px 10%; 
	}
}


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

.block_02 .box_02 .slider-for li.child-201 .item_menu a {
	width: 33.0%;
	min-height: 100px;
font-size: 16px;

	}


.block_02 .box_02 .slider-for li .item_menu a:first-child.active {
    border-top-left-radius: 10px;
}	


}

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


	
.block_02 .box_02 .slider-for li.child-203 .pic img {
	width: 90%;
	padding: 0px 5%; 
	}	


	.block_02 .box_02 .slider-for li .dt {
	font-size: 23px;
	}

.block_02 .box_02 .slider-for li.child-201 .item_menu a {
	width: 33.0%;
	min-height: 100px;
font-size: 14px;

	}


}


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

.block_02 .box_02 .slider-for li.child-201 .item_menu a {

font-size: 13px;

	}

}
	
/************************/
.block_03 {
	width: 90%;
	padding: 0px 5%;
	padding-top: 200px; 	
	padding-bottom: 200px; 
	background: #bee1f6;
	background-image: url('../images/technology/bg_301.jpg'); 
	background-repeat: no-repeat; 	
    background-position: center bottom;
    background-size:  auto 130%;
	}

.block_03 .box {
	margin-bottom: 260px;	
	}
	
.block_03 .box .pic {
	padding: 30px 20px; 
	}	



@media only screen and (min-width: 1680px) {
.block_03 {

	background: #bee1f6;
	background-image: url('../images/technology/bg_301_w.jpg'); 
	background-repeat: no-repeat; 	
    background-position: center bottom;
    background-size: 100% auto ;
	}

}

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

.block_03 {

	background: #bee1f6;
	background-image: url('../images/technology/bg_301.jpg'); 
	background-repeat: no-repeat; 	
    background-position: center bottom;
    background-size: 130% auto ;
	}


.block_03 .box {
	margin-bottom: 120px;	
	}	

}


/************************/
.block_04 {
	color: #000000;
	background: linear-gradient(to bottom, #fdfdfd 0%, #ffedd7 50%);
	width: 90%;
	padding: 0px 5%; 
	}
.block_04 .tt {
	width: 90%;
	padding: 0px 5%; 

	animation-name: p4c;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
	



}
@keyframes p4c{
	0%  {filter: brightness(1.0);}
	40% {filter: brightness(1.3);}
	100%{filter: brightness(1.0);}
}


.block_04 .box .pic {
	padding: 30px 10px; 
	}	
	
.block_04 .box_02,
.block_04 .box_01 {
	width: 90%;
	padding: 5% 5%; 
	margin: 30px auto;
	border-radius: 50px;
	background-color: #ffffff;
	}
.block_04 .box_03 a {
	position: relative;
	display: inline-block;
	width: 30.3%;
	padding: 0px 1%; 
	margin: 30px auto;
	}

	
/************************/
.btn_group .btn_li {
	width: -moz-fit-content;
	width: fit-content;
}
.btn_group .btn_li a {
	position: relative;
	display: inline-block;
	width: 330px;
	justify-content: center;
	align-items: center;
	padding: 30px 0px;
	border-radius: 50px;
	background: #C01323;
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	}
	
.part_notice_content .cs01 {	
	font-weight: 700;
	}

	
/************************/

.cs01 { color: #e30021; }
.cs02 { color: #e30021; font-size: 14px; margin-top: -5px;  }
.cs03 { color: #ffaa00; }

.font_14 { font-size: 14px; font-weight: 400; }
.font_16 { font-size: 16px; }
.font_18 { font-size: 18px; }

.font_bald { font-weight: 900; }


.pc_992, .pc_768, .pc_480 { display: block; }
.mo_992, .mo_768, .mo_480 { display: none; }	

@media only screen and (max-width: 992px) {
.pc_992 { display: none; }
.mo_992 { display: block; }
}
@media only screen and (max-width: 768px) {
.pc_768 { display: none; }
.mo_768 { display: block; }
}
@media only screen and (max-width: 480px) {
	
.pc_480 { display: none; }
.mo_480 { display: block; }
}

@media only screen and (max-width: 768px) {
.img_768{
width: 70%;
margin-left: auto;
margin-right: auto;


}}
@media only screen and (max-width: 480px) {
.img_768{
width: 100%;
margin-left: auto;
margin-right: auto;


}}


#part01, #part02, #part03, #part04{

position: relative;
bottom: 70px;

}

 #part03, #part04{

position: relative;
bottom: 100px;

}