@charset "utf-8";
/* CSS Document */
/****************案例長版樣式*************************/
body{}
img{width:100%;}
.mainImg{
    width: 100% !important;
    height: auto !important;
}
.d-p{display:block;}
.d-m{display:none;}
.container{max-width:1680px;}
.projWrapper{
	position:relative;
	width:100%;
	height:auto;
	margin: 1% 0 0 0;	
}
.nopaddingLeft{padding:0 !important;}
.projTitile{
	color:#333;
	font-weight:400;
	font-size:2.2em;
	letter-spacing:0.2em;
	margin: 8vh 0 0 0;
}
.imgB{padding: 0 15px;}
.nav-item{margin: 0 2em 0 0 !important;}
.nav-item a .projInnerBox .d-p{
	overflow:hidden !important;
	white-space: nowrap;
	text-overflow: ellipsis !important;
}


.carousel-indicators li{
	border: 1px solid #fff;
    border-radius: 50%;
	width:10px;
	height:10px;
}


.projSubTitle{
	background-position: top 3px left 0% !important;
    padding: 0% 0 0 2%;
    margin: 1.5% 0 0.5%;
	font-size:1.2em;
    color: #24d8b6;
}

.projSubTitleText{
	font-size:1.3em;
	font-weight:bold;
	padding: 0% 0 0 2%;
}
.projContentText{
	width:70%;
	line-height:1.8em;
	font-size:1em;
	padding: 0% 0 0 2%;
	text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; /IE9/ -moz-text-align-last:justify; /Firefox/ -webkit-text-align-last:justify; /Chrome/
}
.projContentText ol {
	padding:0 0 0 2%;
	/*list-style-type: decimal;*/
}
.projContentText ol li {
	list-style-type: decimal;
}
.projContentText ol li ul{
	padding: 0 0 0 1.5em;
}
.projContentText ol li ul li{
	list-style: disc;
}
.projbg1{
	background:url(../../images/projtitleicon1.png) no-repeat;
}
.projbg2{
	background:url(../../images/projtitleicon2.png) no-repeat;
}
.projbg3{
	background:url(../../images/projtitleicon3.png) no-repeat;
}

.projbg4{
	background:url(../../images/projtitleicon5.png) no-repeat;
}

.controlbtnbox {
    position: relative;
    padding: 0% 0% 2%;
    bottom: 0;
    margin-top: 5%;
    width: 100%;
}
.projcontrolbtn{
	display:inline-block;
	width:100%;
	width:10%;
	margin:0 2% 0 0;
	
}
.projbtn1 a{
	color:#888888;
	
}
.projbtn2{
	text-align:right;
}
.projbtn2 a{
	color:#63488f;
	text-align:right;
}
.purplearrow{
	width: 37%;
    display: inline-block;
    margin: 0 0 0% 3%;
}
.purplearrow img{
    margin-top: -0.25em;
}
.projbtn2 a:hover{
	text-decoration: none;
	position: relative;
	animation-name: remarkTextHover;
    animation-duration:2s;
    animation-fill-mode: forwards;
}

.projboxpb{padding:0 1% 2% 1%;}

.projbottombox{
	position: relative;
	left: 0;
	height:10px;
	width:100%;
	display:block;
	background:linear-gradient(90deg,#ab04f2,#24d9b7);
}
.remarkText3{width: 80%;}
.remarkText2,.remarkText3{float:right;text-align:right;}
.remarkText2 img {
    width: 20%;
    padding: 0 0 1.5% 1%;
}
.remarkText, .remarkText2,.remarkText3,.remarkText4{position: relative; top: 1vh;}

.remarkText a, .remarkText2 a ,.remarkText3 a,.remarkText4 a{
	position: relative;
	color: #888;
	padding: 0 1% 0 0;
}
.remarkText2 a ,.remarkText3 a{
	float: right;
}
.remarkText{
	float: left;
}

.divcs{
	background-color: #888;
	padding: 0 1px;
	margin: 0 20px;
	height: 20px;
}

.remarkText2 a:hover{
	animation-name: remarkTextHover;
    animation-duration:2s;
    animation-fill-mode: forwards;
}

@keyframes remarkTextHover{
    0%, 100%{
        right: 0vw;
    }
    50%{
        right: -2vw;
    }
}

.remarkText2 a:hover{
	color: #aaa;
}

.remarkText img{
	position: relative;
	float: right;
	right: 0;
	width: 5vw;
	top: 1vh;
	padding-left: 1vw;
}

.nav-tabs .nav-link {
    border: 1px solid #aaaaaa;
    border-top-left-radius:0rem;
    border-top-right-radius:0rem;
	padding: .5em 1em;
	text-align: center;
	
}
.tab-link.active,.tab-link:hover {
    color:#333333;
	border: 0;
	background: linear-gradient(15deg, rgba(171,4,243,1) 0%, rgba(36,216,182,1) 100%);
	width:100%;
	height:100%;
	padding: 1px;
}
.tab-link.active .projInnerBox,.tab-link:hover .projInnerBox{
    color:#333333;
	border: 0;
	
	background: #f6f6f6;
	width:100%;
	height:100%;
	display:block;
	padding: .5em 1em;
	text-align:center;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;	
}

/*.nav-link.active:after {
	content:"";
	padding: 1px;
	background:;
	width:100%;
	height:100%;
}*/
.nav-tabs { border-bottom:none; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border:solid 1px #aaaaaa; color:#aaaaaa;background: #f6f6f6; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;  color: #333333 !important; }
        /*.nav-tabs > li > a::after { content: ""; background: #5a4080; height: 3px; position: absolute; width: 100%; left: 0px; top: 48px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }*/
.tab-nav > li > a::after { background-color:#aaaaaa; color: #aaaaaa; }
.tab-pane { padding: 1% 0; }
.tab-content{padding: 0;}
.nav-tabs > li  {width:20%; text-align:center;}
.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }

/****************案例長版樣式*************************/




.sedition{
	margin: 0 0 5% 0;
}




@media (max-width: 1680px) {
	
	.remarkText4 {
		width: 100%;
	}
	.remarkText3 {
		width: 100%;
		float:left;
	}
	.remarkText3 a {
		float: left;
		width: 100%;
		text-align: left;
		padding:1% 0;
	}
	.divcs{display:none;}
	.projcontrolbtn {
		width: 12%;
	}
}




@media (max-width: 1400px) {
	.projContentText{
		width:65%;
	}
	.projcontrolbtn {
		width: 14%;
	}
}


@media (max-width: 1200px) {
	.projContentText{
		width:65%;
	}
	.projcontrolbtn {
		width: 15%;
		margin: 0 5% 0 0;
	}
}

@media (max-width: 1024px) {
	.projContentText{
		width:65%;
	}
	.projTitile {
		margin: 5vh 0 0 0;
	}
	.projSubTitle {
		padding: 0% 0 0 3%;
		margin: 1.5% 1% 0 0%;
	}
	.projcontrolbtn {
		width: 17%;
	}
}

@media (max-width: 992px) {
	
	.nav-tabs > li  {width:24%;}
	.nav-item{margin: 0 0.5% 0 0 !important;}
	.projcontrolbtn {
		-webkit-width: 47%;
		width: 47%;
    	margin: 3% 0 0 0;
	}
	.purplearrow {
		width: 20%;
		margin: 0 0 0% 3%;
	}
	.d-p{display:none;}
	.d-m{display:block;}
	.projContentText ol li {
		/*font-family: Microsoft JhengHei;*/
	}
	.msfont{font-family: Microsoft JhengHei;}
	.projSubTitle {
    	margin: 8% 2% 0 2%;
	}
	.projSubTitleText {
		padding: 0% 0 0 5%;
	}
	.projContentText {
		width: 90%;
		padding: 0 2% 0 5%;
	}
	.projContentText ol {
		padding: 0 0 0 3.5%;
	}
	
}

@media (max-width: 768px) {
	.projContentText{
		width:95%;
	}
	.remarkText3 a {
		padding:2% 0;
	}
	.nav-tabs > li > a {padding: 5px 5px;}
}
@media (max-width: 480px) {
	.container {
		/*padding: 0 2%;*/
		width:100vw;
		height:auto;
		overflow:hidden;
	}
	.tab-pane { padding: 1.5% 0; }
	.projContentText{
		width:98%;
	}
	.projContentText br{display:none;}
	.projTitile {
		margin: 5vh 0 0 0;
		letter-spacing:0;
	}
	
	.projSubTitle {
		font-size: 1.1em;
		padding: 0% 0 0 5%;
    	margin: 8% 2% 0 2%;
	}
	.projSubTitleText,.projContentText {
		font-size: 1.1em;
		padding: 0% 0 0 7%;
	}
	.projContentText ol {
		padding: 0 0 0 7%;
	}
	.remarkText img {
		width: 10vw;
	}
	.remarkText3 {
		width: 100%;
    	padding: 5% 0 8% 2%;
	}
	.remarkText3 a {
		padding: 0 0 8% 0;
		float:left;
	}
	.remarkText2{width:50%;float:right;}
	.remarkText2 a {
		padding: 0 3% 2% 0;
	}
	.remarkText{
		padding: 0 0 0 2%;
	}
	
	.divcs{
		display:none;
	}
	.projboxpb{padding:0 0 8% 0;}
	/*.controlbtnbox {
		
	}*/
	.projcontrolbtn{padding: 5% 0%;} 
	.projbtn1 a {
		padding: 0 0 0 0%;
	}
	.projbtn1 a,.projbtn2 a{
		-webkit-font-size:0.85em;
		font-size:0.85em;
		letter-spacing:0em;
	}
	.projbtn1,.projbtn2{
		display:inline-block;
	}
	.px1{padding:0 0 0 2px;}
	.projbg1 {
		background-size:0.85em auto;
	}
}
@media (max-width: 411px) {
	.projContentText{
		width:%;
	}
	.projTitile {
		font-size: 2em;
	}
	.projSubTitle {
		padding: 0% 0 0 7%;
		margin: 1.5% 3% 0 0%;
	}
	.projSubTitleText,.projContentText {
		padding: 0% 0 0 4%;
	}
	
	.msfont{font-family: Microsoft JhengHei;}
}
@media (max-width: 375px) {
	.projTitile {
		font-size: 1.9em;
	}
	.projSubTitle {
		font-size: 1em;
	}
	.projSubTitleText,.projContentText {
		
	}
	.projSubTitleText, .projContentText {
		font-size: 1em;
		padding: 0% 0 0 7%;
	}
	.remarkText{
		padding:0 0 0 2%;
	}
	.msfont{font-family: Microsoft JhengHei;}
}
@media (max-width: 320px) {
	.projContentText ol {
		padding: 0 0 0 8%;
	}
	.projTitile {
		margin: 5vh 0 0 0;
	}
	t3 {
		width: 84%;
		padding: 5% 0 8% 0;
		float: left;
	}
	
	.msfont{font-family: Microsoft JhengHei;}
}
/****動畫函數****/
@keyframes aboutCTA{
    from{
        padding-left: 0px;
    }
    to{
        padding-left: 10px;
    }
}


@media all and (max-width:724px){
/*.nav-tabs > li > a > span {display:none;}	*/

}