/* CSS Document */
@charset "utf-8";
	@import url('https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@700&display=swap');
	/*
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;
font-family: 'PT Serif', serif;
font-family: 'Oswald', sans-serif;
font-family: 'Bilbo Swash Caps', cursive;
*/

html,body{ margin: 0; padding: 0; font-size: 18px;box-sizing: border-box;font-family: 'Noto Sans TC',sans-serif;}
	div,p,ul,li,a{ box-sizing: border-box; margin: 0; padding: 0;}
	a{text-decoration: none; color: #000;}
	body{  }
	.top{  width: 100%; height: 70px;  background: #3f0f08; z-index:5; position:fixed;z-index:100;border-top:10px solid #e76a0c;transition-duration: 0.5s; box-sizing: content-box; }
	.logo{display: inline-block; min-width:140px ;  text-align: center;  color: #fff; height:70px; transition-duration: 0.5s;}
	.logo:before{content:""  ;display: inline-block; vertical-align: middle; height: 100%; margin:0 5px}
	.logo img{max-width:180px; max-height: 95%; vertical-align:middle; }
	
	.menu{display: block; width: 660px; max-width:calc(100% - 200px);  float:right;font-family:'Noto Serif TC', serif;transition-duration: 0.5s; }
	.menu li{ display: inline-block; list-style: none;  margin:0 auto; font-size: 18px; height:70px; width: calc(100% / 5 - 8px); min-width: 80px; max-width: 100%; text-align: center;overflow: hidden;transition-duration: 0.5s;}
	.menu li a{color: #fff;display: inline-block; height: 100%; width: 100%; padding:0 5px}
	.menu li a:before{content: ''; display: inline-block; height: 100%; vertical-align: middle;}
	.menu li:hover,.menu .act{background: #e76a0c;}
	
	.menu .slist, .menu .slistJs{position: absolute; width: 100%; height:0; min-height: 0; background:#e76a0c; left:0 ; overflow: hidden; transition-duration: 0.5s;font-family: 'Noto Sans TC', sans-serif; }

	.menu .contents{ width: 1280px; max-width:100%; margin:0 auto; padding:25px 0% 15px 3.5%; }
	.menu .slist2 .contents{width: 650px;}

	.pro_lis{ position:relative;top: 80px; margin-bottom:80px ;}

	.top2{ height: 40px;  border-top:5px solid #e76a0c; }
	.top2 .menu,.top2 .menu li,.top2 .logo{ height: 40px; }
	.pro_lis2{ top: 45px; margin-bottom:40px ;}

	@media screen and (min-width:640px){
		.menu li:hover > .slist{min-height: 300px; height: auto; overflow: visible;  transition-duration: 1s}
		.menu .slist_i{float: left; display: inline-block; text-align: left; min-width: 180px; margin:0 2.5px 35px 2.5px;} 
		.menu .slist_i a{ display: block; width: auto; height: auto; font-size: 16px; font-weight: lighter; margin: 5px 1px;}
		.menu .slist_i a:nth-child(1){font-size: 18px; font-weight: bold;margin-bottom: 8px; color:  #3f0f08}
		.menu .slist_i a:hover {color: #ffffff80;}

		.menu li:hover > .slist2{min-height: 80px;}
		.menu .slist2 .slist_i{min-width: 150px;float: none;}

	}
	
	.menubtn{ width: 40px ; height: 40px; background: #53583e url(../images/btn_menu.png) no-repeat center ; border-radius: 2px; position: absolute;  top: 5px ;left: 5px; text-align: center; z-index: 100; cursor: pointer; display: none;}
	.content{ width: 1360px; max-width:100%; margin:0 auto; }
	.down{background: #1b1918; color: #fff;font-size: 16px;}
	.doewn_l{ display: inline-block; width:calc(100% - 308px); min-width: 270px; margin-bottom: 20px;max-width: 100% }
	.doewn_r{ display: inline-block; width: 300px;   text-align: right; max-width: 100%}
	.doewn_r img{width:40px}
	.address_t { display: block;font-size: 21px; margin-bottom:20px }
	
	.address_w span{ display: block;line-height:1.8 }
	/**.address_w span:nth-child(3):before{content: ''; display: inline-block; background: url(../images/tel_icon.svg) center center no-repeat; background-size: 60% auto; width: 32px; height: 18px; vertical-align: middle; margin-right: }
	.address_w span:nth-child(4):before{content: ''; display: inline-block; background: url(../images/fax_icon.svg) center center no-repeat; background-size: 60% auto; width: 32px; height: 18px; vertical-align: middle; margin-right: }**/
	.address_w span a{color: #fff}


	.btn_top{width:42px; height:42px; background:#000000c9; color: #fff; position: fixed; right: 5%; bottom: 15%;border-radius:30px; font-size: 14px; text-align: center; z-index: 100; padding-top: 8px; border: 2px solid #e76a0c;}


	.index_proj ul{width: 850px; max-width: 100%; margin: auto; text-align: center; columns: 4}
	.index_proj li{width: 185px; height:185px;  max-width:calc(22vw - 10px ); font-size: 16px; overflow: hidden; list-style: none; display: inline-block; position: relative; background: #ddd;text-align: center; margin: 5px auto; animation:scrollshow 1s forwards;}
	.index_proj li div{ background:#00000090;color:#fff; padding:5px; text-align:center; display:inline-block;position: relative; z-index:2 }
	.index_proj li:before{content: ''; display: inline-block; height: 100%; width: 0; vertical-align: middle;}

	.index_proj img{position: absolute ;height: 100%; left: 0}
	.index_wc,.index_wd{float: left;}

	.more_btn{ margin-top:100px; display:inline-block; width:120px; text-align:center;background:#e76a0c; padding:5px; color:#fff }


	.a_01{width: 40%;  float: left;}
	.a_02,.a_07{width: 60%;  height: 420px; max-height: 60vh; vertical-align: middle; float: left; text-align:center; }
	.a_02:before,.a_07:before{content: ''; display: inline-block; height: 100%;vertical-align: middle;}
	.a_06{width: 50%;  float: left;}
	.a_07{width: 50%;  float: left;}

	.a_timeline{ padding-top:40px; position:relative; }
	.a_timeline .a_tl{ float:left;  width: 33%; padding:  0 3.5%}
	.a_timeline .a_tl:before{content: '■'; display: block; margin-bottom: 10px}
	.a_tl_l{width:100vw;text-align: right; line-height: 0; letter-spacing: -5px;  border-bottom:#000 solid 1.5px; height:1px; display:block; position:absolute; margin-left: calc((85% - 100vw)*0.5); margin-top:52px;left:-50%; top: 0}
	.a_tl_l:before{content: '▶';  }

	.a_03{width:120px; max-width: 30%; float: left; margin-bottom: 20px}
	.a_04{ width:calc(100% - 120px ); float: left;}

	/*pro_old*/

	.project a{width:calc(50% - 20px ) ;display: inline-block; vertical-align: top; margin: 15px 5px; border: 1px solid #fff;  transition-duration: 0.5s}
	.project li{display: block;transition-duration: 0.5s}
	.project li div:first-child{width: 220px; height:220px; max-width: 48%; max-height: 35vh;   overflow: hidden; list-style: none; display: inline-block; position: relative; vertical-align: top ; border-radius:5px }
	.project li div:nth-child(2){max-width: calc(100% - 250px); min-width: 50%; font-size: 16px; padding:0 0 10px 20px;  display:inline-block; position: relative; z-index:2;  }
	.project li div p:first-child{ font-size:21px; font-weight:bold; margin-bottom:15px }
	.project a:hover{border: 1px #000 solid;}
	.project a:hover > li{color: orangered; transform:scale(0.95); }
	.project li img{position: absolute ; height: 100%;  left: 0}


	.project_c{ width:1000px; max-width:100% ; margin: auto}
	.project_c li{width:100% ; margin: 5px auto 70px auto;list-style: none; padding: 5px; border:1px #fff solid  ; border-radius: 5px; transition-duration: 0.5s}
	.project_c li .imgbox{width: 150px; height:150px; max-width: 30%; max-height: 30vh;   overflow: hidden; position: relative;float: left; vertical-align: top ; text-align: center;}
	.project_c li .wwbox{max-width: calc(100% - 150px); width: 80%; min-width: 60%; font-size: 16px; padding:0 0 10px 20px; float:left;   display:block;  position: relative;}
	
	.project_c li div .tt{ font-size:21px; font-weight:bold; margin-bottom:15px }	
	.project_c .imgbox img{height: 100%;  left: 0}

	.pjinfo{ width: 100%;  display: none;  background: #eee;}
	.pjinfo_w{padding:15px; display:block; }
	.project_c li:after{content: ''; clear: both; display: block;}
	.project_c li:hover,.project_c .act{ border:1px solid #000; padding-top:15px }
	.project_c li:hover > .wwbox{ color:orangered; }
	.p_if_bn:hover{background: #9b2a00;}
	.p_if_bn{padding:2.5px; background: orangered;color: #fff; width: 100px;position: absolute; bottom: 0; right: calc(50% - 50px); text-align: center; cursor: pointer;}
	.p_if_bn:after{content: '+'}
	.act .p_if_bn{position: relative; margin: auto; left: 0}
	.act .p_if_bn:after{content: '-'}

	/**/

	/*project_new*/

	.project2 a{width: 30%; height: 250px; margin: 1.5%; float: left; display: block; position: relative;overflow: hidden; }
	.project2 a:nth-child(1){width: 50%}
	.project2 a:nth-child(2){width: 44%}
	.project2 a li{list-style: none;background: #000 }
	.project2 a li .projc2_img{height:250px ;transition-duration: 0.5s}
	.project2 a li .projc2_tt{position: absolute; top: 0; width: 100%; color: #fff;}
	.projc2_tt p:nth-child(1){ background:#00000090; font-size:21px; padding:15px 10px; text-align:center;transition-duration: 0.5s }
	.projc2_tt p:nth-child(2){  vertical-align:middle; height:calc(250px - 70px);display:block; padding:0 13%; font-size:16px;opacity:0; transition-duration: 0.5s}
	.projc2_tt p:nth-child(2) span{display: inline-block; vertical-align: middle;}
	.projc2_tt p:nth-child(2):before{content: ''; display: inline-block; vertical-align: middle;height: 100%;}
	.project2 a:hover .projc2_img{opacity: 0.3}
	.project2 a:hover .projc2_tt p:nth-child(1){background: #00000000}
	.project2 a:hover .projc2_tt p:nth-child(2){opacity: 1}

	/*project_次選單*/

	.pro_lis{box-shadow: 0 1px 8px #00000060;}
	.pro_lis_t{ font-size:21px;width: 300px; margin-right:15px ; float:left; font-family: 'Noto Serif TC', serif; }
	.pro_lis_c{width: calc(100% - 315px);float:left;}
	.pro_lis_c a{ font-size:17px; margin: 5px 15px 5px 2.5px;    word-break: keep-all;white-space:nowrap; display: inline-block;}
	.pro_lis_c a:hover {color:#b73406}

	/*project_photo*/

	.case_phos{ background:#00000090; position:fixed; width:100%; height:100%; top:0; left:0; z-index:100; text-align:center; vertical-align: middle; display:none;}
	.case_phos:before{content:''; display:inline-block; height:100%; width:0; vertical-align:middle; }
	.case_phos_ce{ vertical-align:middle; display:inline-block; position: relative; width: 600px;max-width: 90%;}
	.case_phos_ce2{ vertical-align:middle; display:inline-block; position: relative; width: 700px;max-width: 90%;}	
	.phos_x{ width:28px; height:28px; background: #fff; border: 3px solid #000; border-radius:15px; position:absolute; right:5px; top:5px; line-height:1; cursor:pointer; font-weight: bold;}
	.phos_a{width:100%; position:absolute; top:50%; width: 100%; font-size: 38px; margin-top: -19px; }
	.phos_a_prev{ position:absolute; left:12px;  cursor:pointer;transform: scaleY(1.8); }
	.phos_a_next{ position:absolute; right:12px; cursor:pointer;transform: scaleY(1.8);  }
	.titbox{ background:#fff;width: 100%;  padding: 10px; border-radius: 8px; }
	.titbox_c{border: 1px solid #000; padding:45px 15% 35px 15%;text-align: left; max-height: 90vh; overflow: scroll;}
	.case_phos_ce2 .titbox_c{padding:15px 5%; overflow: hidden;}
	.titbox_c .d0{ position: absolute; left: 15px; top: 12px; font-size:14px; color: #e76a0c;  } 	
	.titbox_c .d1{ border-bottom:1px solid #000; padding:2px 0 20px 0 ;margin-bottom:15px; font-size:18px } 
	.titbox_c .d2{ font-size:21px; font-weight:bold; }
	.titbox_c .d3{font-size:15px; line-height: 1.8}
	.titbox_c img{max-width: 100%}
	.titbox_c .d1_s{  padding:2px 50px 30px 0 ;position:relative; min-height:35px } 
	.titbox_c .d4{ width: 32px; font-size:14px ; position: absolute; right:0; top:0 } 
	.titbox_c .d4:before{content: '';display:block;background:url(../images/pdf.svg) no-repeat center; width:30px; height:30px }

	/*project_項目&小標*/

	.c_list{columns: ; display: block;margin-top:20px; margin-bottom:20px }
	.c_tit{ border-radius:35px; background:#c94e0b; color:#fff; margin:0 5px; display:inline-block; padding:10px 25px; }
	.project_c2 .ca{ list-style: none; display: inline-block; text-align: center; min-width: 90px; width: calc((100% / 8 ) - 8px); min-height: 100px; vertical-align: top; margin: 5px 1.5px 25px 1.5px;cursor: pointer; padding-top: 10px}
	
	.project_c2 .ca:hover{background: #ddd;;position:relative;}
	.ca:before{content: ''; display: inline-block; width: 60px; height: 60px; background: #CCC no-repeat center; border-radius:5px }
	.ca:after{content: '';display: inline-block;width: 100%; height: 80px; position:absolute; left:0; top:0 ;background:no-repeat center }
	.c01 .ca:after{ background-image:url(../images/deployed.png) ; }
	.c02 .ca:after{background-image: url(../images/settings.png) }
	.c03 .ca:after{background-image: url(../images/car.png) }
	.c04 .ca:after{background-image: url(../images/food.png) }
	.c05 .ca:after{background-image: url(../images/water.png) }
	.c06 .ca:after{background-image: url(../images/widget.png) }
	.c07 .ca:after{background-image: url(../images/oil.png) }
	.c08 .ca:after{background-image: url(../images/boat.png) }
	
	.ca .wwbox{display: block; font-size: 16px; line-height: 1;}

	.c_list_t{width:120px; float: left; padding: 30px 15px 5px 15px; text-align: center; font-size: 16px; color: #c94e0b;}
	.c_list_box .c_list{width:calc(100% - 120px);float: left; }
	.c_list_line{ height: 1px; width: 150px; margin:10px auto 40px auto; /*background: #333;*/}

	.c_list_box2{display: inline-block; text-align: center; width: 23%}
	.project_c2 .c_list_box2 .ca{ width:120px }


	@media screen and (max-width:960px){
		.project_c2 .ca{  width: calc((100% / 6 ) - 8px);}
		.c_list_box2{ width: 31%}
	
	}
	@media screen and (max-width:640px){
		.project_c2 .ca{  width: calc((100% / 4 ) - 10px);}
		.pro_lis_c{width: 100%;}
		.project2 a,.project2 a:nth-child(1),.project2 a:nth-child(2){width: 47%;}
		
	
	}
	@media screen and (max-width:480px){
		.project_c2 .ca{  width: calc((100% / 3 ) - 10px);}
		.c_list_t{width:100% ;float: none;}
		.c_list_box .c_list{width:100% ;float: none;}
		.c_list_box2{display: inline-block; text-align: center; width: 48%}
	
	}
	@media screen and (max-width:330px){
		.project_c2 .ca{  width: calc((100% / 2 ) - 6px);}
	
	}

	/**/

@media screen and ( max-width:1280px){
	.index_wc{float: none;}
	.index_w1{max-width: calc(90% - 100px); display: inline-block;}
	.more_btn{ margin-top:80px;float: right;}

}

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

	.index_proj ul{ columns: 3}
	.index_proj li{width: 160px; height:160px;max-width:calc(40vw - 10px );}

	
	

	.project a{width:calc(100% - 10px ) }
	.project li div:first-child{width: 180px; height:180px;}

	.a_01{width: 100%; }
	.a_02{width: 100%; }
	.a_03{width: 100%; }
	.a_04{width: 100%; }
	.a_06{width: 100%; }
	.a_07{width: 100%; }
	
}
@media screen and ( max-width:650px){
	
	.top{ height: 50px; }
	.logo{width: 100%; text-align: center;}
	.logo img{height: 50px}
	.logo:before{height: 50px; }
	
	.menu,.top2 .menu{display: block; background: #000; text-align: center; position: fixed; top: 0; left: -200px ; height: calc(100%); z-index: 50; padding-top: 50px; width: 200px; }
	.menu li,.top2 .menu li{ display: block; margin: 20px 0; width:100% }
	
	.menu{transition: 300ms;}
	.menubtn{ display: block; }
	.menubtn:hover ~.menu{left: 0; }
	.menu:hover{left: 0; }



	.index_wd{float: none; min-width: 100%}
	.project_c li{padding-bottom: 30px}
	
		
}
@media screen and ( max-width:550px){

	body,.down{  font-size: 16px;}

	
	.index_proj ul{ columns: 2}
	.index_proj li{width: 145px; height:145px;}
	.project li div:first-child{width: 125px; height:125px; }
	.project li div:nth-child(2){font-size: 14px; max-width: calc(100% - 130px);  }
	.project li div p:first-child{ font-size:18px;  margin-bottom:10px }

	.a_timeline .a_tl{   width: 100%; margin-bottom: 35px;}
	.a_timeline .a_t1w{ padding-left:24px; display:block; }
	.a_timeline .a_tl:before{float: left; margin-right: 7px; }
	.a_tl_l{width:8px; line-height: 780px; ; border-bottom: none;  border-right:#000 solid 1.5px; height:390px;  margin-left:calc(3.5% ); left:0; top:-100px  }
	.a_tl_l:before{content: '▼';  }

	
	.project_c li .wwboxs{  width:100%;max-width:100% ; padding: 10px}
	.project_c li .imgbox{width: 100px; height:100px;}

}	


.animatimg{
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transition: all 1000ms ease-out;
	-o-transition: all 1000ms ease-out;
	-moz-transition: all 1000ms ease-out;
	transition: all 1000ms ease-out;}	

a:hover .animatimg{
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);}

.imgR{left: 50px;opacity: 0}
.imgL{left: -50px;opacity: 0}
.imgT{top:-50px;opacity: 0}
.imgB{top:50px;opacity: 0}
.imgO{opacity: 0}
.imgTs{transform: scale(0.9);opacity: 0}
.imgsh{
	position: relative;
	animation:scrollshow 1.5s;
	animation-fill-mode:forwards;
	animation-direction:alternate;
}


@keyframes scrollshow{
	to{ left: 0; top:0; opacity:1; transform:scale(1.0); }
	
}