@import "./lib/Config.less";
	@carousel_margin : -25px;

	body{
		padding-top: 44px;
		background-color: #fff;
		font-family: 'Noto Sans TC', sans-serif;
		@media(min-width: 980px){ padding-top : 0px; }
		//
		#page-wrapper{
			background-color: #fff;
			overflow: hidden;
		}
		a{
			text-decoration: none;
		}
	}
	form{
		//
		.form-row{
			margin-bottom: 15px;
		}
	}
	article{
		width 			: 100%;
		margin-right 	: auto;
	    margin-left 	: auto;
		@media(min-width: @break_point_sm){ width : 540px; }
		@media(min-width: @break_point_md){ width : 540px;  }
		@media(min-width: @break_point_lg){ width : 720px;  }
		@media(min-width: @break_point_xl){ width : 720px;  }
	}
	.image:before{
		background 		: transparent;
	}
	.logo-header{
		width 			: 100%;
		padding 		: 15px;
		background-color: #fff;
		display 		: none;
		justify-content : center;
		align-items 	: center;
		border-width 	: 3px 0px 0px 0px;
	    border-style 	: solid;
	    border-color 	: rgba(59, 62, 69, 0.95);
		@media(min-width: 980px){ display: flex; }
		//
		#logo_img{
			width 		: 200px;
			margin-right: 15px;
		}
		#company_name{
			font-size 	: 24px;
			font-weight : 600; 
			color 		: #3b3e45;
		}
	}
	#header{
		padding 		: 0px;
		background-color: rgba(255, 255, 255,0);
		background 		: rgba(255, 255, 255,0);
		border-radius 	: 0px; 
		z-index: 2;
		//
		.inner{
			display 		: flex;
			justify-content : center;
			align-items 	: center;
			position: relative;
			padding: 5px;
    		padding-bottom: 4px;
    		background-color: rgb(59, 62, 69);
			//
			.inner-bg{
				width: 100%;
			    height: 100%;
			    border-color: #cc9a07;
			    border-style: solid;
			    border-width: 1px;
			    border-radius: 6px;
			}
			.inner-content{
			    width: 100%;
			    height: 100%;
			    position: absolute;
			    top: 0px;
			    left: 0px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			}
			#nav{
				position: relative;
				right: 0px;
				//
				ul > li > a{
					font-size: 16px;
				}
				ul > li > .dropotron a{
					color : #fff;
					//
					&:hover{
						color : #cc9a07;
					}
				}
			}
		}
	}
	#carousel_header{
		width 			: 100%;
		margin-top 		: 0px;
		margin-bottom 	: 0px;
		position 		: relative;
		z-index 		: 1;
		@media(min-width: 980px){ 
			margin-top 		: @carousel_margin;
		}
		//
		.bone{
			width 		: 100%;
			padding-top : 50%;
			position 	: relative;
			z-index 	: 1;
			@media(min-width: 980px){
				padding-top : 25%;
			}
		}
		.content{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: 2;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items : center;
			//
			img{
				width: auto;
				height: 100%;
				@media(min-width: 980px){
					width: 100%;
					height: auto;
				}
			}
			.mask{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				background-color: rgba(255, 255, 255, 0.2);
				//
				.container{
					height: 100%;
					position: relative;
					display: flex;
					padding-bottom: 10px;
					flex-direction: column;
    				justify-content: flex-end;
    				@media(min-width: 980px){
						padding-bottom: 50px;
					}
					//
					.mask-title, .mask-sub-title{
						color : #fff;
						background-color: rgba(204, 154, 7, 0.7);
						
						width: fit-content;
						margin-top: 10px;
					}
					.mask-title{
    					font-size: 34px;
    					height: 47px;
    					padding: 10px 10px;
					}
					.mask-sub-title{
    					font-size: 20px;
    					height: 35px;
    					padding: 5px 10px;
					}
				}
			}
		}		
	}
	#footer-wrapper{
		background-color:  #3b3e45;
		// margin : 0px -20px -40px -20px;
		//
		#footer{
			a, .divided li{
				color: #bcc3d2;
			}
		}		
	}