@charset "utf-8";
#all {
width: 90%;	
 max-width: 950px;
margin: auto;
margin-bottom: 90px;
padding: 10px;

}
#info {
	width: 100%;
	padding-top: calc((100%) / 4.5); 
	position: relative;
	overflow: hidden;
	margin-bottom: 15px;
	border-radius: 15px;
	background-color: #ffd600;
  	user-select: all;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
	

}
.topinf	{
position: absolute;
top: 30px;
left: 30px
}
#formb {
    width: 100%;
    background: #ffFFFF;
    border-radius: 15px;
    overflow: hidden;
   	 -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
	padding-bottom: 50px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
	position: relative;
	
}
.contitle {
        font-size: 2.5em;
    font-weight: 500;
    width: 100%;
	text-align: center;
}
#sub{
	position: absolute;
	bottom:30px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FFD600;
	color: #FFFFFF;
	border: 1px solid #e6e6e6;
	width: 200px;
	border-radius: 15px;
	padding: 10px 30px 10px 30px;
 font-weight: 500;
	   	 -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
#sub:hover,#sub:active{
	
	background-color: #353535;
	color: #FFD600;
	
}
.upsvg{
	right: 30px;
	bottom:30px;
	position: absolute;
	display: flex;
	gap:10px;
	
}
.icon{
	fill: hsla(0,0%,21%,1.00);
	width: 40px;
}

.top {
    font-weight: 500;
    font-size: 2.3ch;
}
#foot{
	display: none;
	
}


#line {
	background: #000000;
	align:center;
	width:100%;
}


.box{
	border: 1px solid #e6e6e6;
	width: 100%;
	border-radius: 15px;
	padding: 10px 30px 9px 22px;
    margin-bottom: 10px;
	background-color: #f7f7f7;
	position: relative;
	
	
}
.sbox{
	border: 1px solid #e6e6e6;
	    width: calc((100% - 10px) / 2);
	border-radius: 15px;
	padding: 10px 30px 9px 22px;
    margin-bottom: 10px;
	background-color: #f7f7f7;
	position: relative;
	
}

.formclasss{
	
	width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	padding-top: 60px;
    padding-right: 55px;
    padding-left: 55px;
    padding-bottom: 62px;

}

.leb{
	width: 100%;    
	font-size: 10px;
    color: #393939;
    line-height: 1.5;
	text-transform: uppercase;
	
	
	
}


.inp{
	
	height: 40px;
	display: block;
    width: 100%;
    background: transparent;
    font-size: 18px;
    color: #555555;
    line-height: 1.2;
    padding-right: 15px;
	outline: none;
    border: none;
	position: relative;
	
}
.textbox{
	border: 1px solid #e6e6e6;

	border-radius: 15px;
	padding: 10px 10px 9px 22px!important;

	background-color: #fFFFFF;
	position: relative!important;
	 -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
	
}

.textareainp{
	
	margin-top: 8px;
	height: 60px;
	display: block;
    width: 100%;
    background: transparent;
    font-size: 15px;
    color: #555555;
    line-height: 1.2;
    padding-right: 15px;
	outline: none;
    border: none;
	position: relative;
	
	
}
.downinp{
	
	height: 40px;
	display: block;
    width:100%;
    background: transparent;
    font-size: 18px;
    color: #555555;
    line-height: 1.2;
    padding-right: 15px;
	outline: none;
    border: none;
	position: relative;
	
}


.big{
	
	height: 120px;
}




	
	
	

.sel{

	cursor: pointer;
line-height: 40px;
	overflow: hidden;
	
}

.selitem{
	position: absolute;
	transform: translateY(-50%);
	top:50%	
		
	
	
	
}

.selarrow{
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	height: 100%;
	width: 1em;
	pointer-events: none;
			
}
.alertsvg{
	
    position: absolute;
   	width: 13px;
    top: 62%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 1.8em;
	user-select:none;
	fill: #c80000;
	
}
#namealert,#mailalert,#bgalert,#seralert{
	
	-webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
.alertsign:active.alertsign::before,.alertsign:hover.alertsign::before{
	opacity:100%;
	 -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
.alertsign::before{
	opacity: 0%;
	user-select:none;
	-webkit-user-select: none; 
	-moz-user-select: none;
	    border: 1px solid #c80000;
	border-radius: 10px;
	font-weight: 600;
    position: absolute;
    color: #c80000;
	padding: 2px;
	padding-left: 5px;
    font-size: 13px;
    top: 62%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 1.8em;
	
	
}
#namealert.alertsign::before{
	content: "請輸入姓名\00A0\00A0\2003";
	
}
#mailalert.alertsign::before{
	content: "請輸入信箱格式\00A0\00A0\2003";

	
	
}
#seralert .alertsvg,#seralert.alertsign::before,#bgalert .alertsvg,#bgalert.alertsign::before{
	top:30%;
	
}
#seralert.alertsign::before{
	content: "請選擇服務項目\00A0\00A0\2003";
	
	
}

#bgalert.alertsign::before{
	content: "請選擇預算\00A0\00A0\2003";
	
	
}
.selarrow::before, 
.selarrow::after{
	--aro-size: 0.3em;
	content: "";
	position: absolute;	
	width: 0;
	height: 0;
	right: 1.8em;
	transform: translate(-50%,-50%)
	
}
.selarrow::before {
	border-left: var(--aro-size) solid transparent;
    border-right: var(--aro-size) solid transparent; 
	border-bottom: var(--aro-size) solid #323232; 	
	top:60%
	
}



.selarrow::after{
border-left: var(--aro-size) solid transparent;
    border-right: var(--aro-size) solid transparent; 
	border-top: var(--aro-size) solid #323232; 	
	top: 71%
	
	
}

.selcon{
	background-color: #FFFFFF;

	    width: 100%;
	border-radius: 15px;
	position: absolute;
	top: 80px;
	right: 0;
	z-index: 10;
			overflow: hidden;
	box-shadow: 0px 10px 20px 1px rgba(0,0,0,0.2);

		-webkit-transition: all 0.3s ease 0s;
    -o-transition:  all 0.3s ease 0s;
    transition:  all 0.3s ease 0s;
	
}
.hid{
visibility:hidden;
opacity: 0%!important;

}
.dis{
display:none!important;
}
.opt{
	width: 100%;

	padding-left: 22px;
line-height: 35px;
	font-size: 13px;
	cursor: pointer;

}
.opt-sel{
		background-color: #353535!important;
	color: #FFD600!important;
	
		
}
.opt:hover{
	background-color: #353535;
	color: #FFD600;
	
	
}
.kopt:hover,.nopt:hover{
	background-color: inherit;
	color: inherit;
	
	
}
.ta{
	width: 100%;
margin-bottom: 10px;
}
#ta4{
	margin-bottom: 0;
}
#tb{
	width: calc((100% - 20px) / 3);
	
}

#tc{
	width: calc((100% - 20px) / 3);
	
}

#td{
	width: calc((100% - 20px) / 3);
	
}

#te{
	width: 100%;
}
.t21{
	width: calc((100% - 10px) / 2);
	
}
#textarea{
	position: relative;
	width: 100%;
	display: flex;
  flex-wrap: wrap;
  gap: 10px;
	
}
.insidebox{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}


@media (max-width:768px){
	#info {
	width: 100%;
		padding-top: calc((100%) / 2.5); 
		
	}
#tb,#tc {
	width: calc((100% - 20px) / 2);
}

	#td{
	width: 100%	;
		
	}	
	.co-title{
		font-size: 1em;
	
	
}

	#td .textinp {
   	height: 25px;
	display: block;
    font-size:15px;
    line-height: 1;
   
}
	
		
	}

	
	


@media (max-width:576px){
	#info {
	width: 100%;
		padding-top: calc((100%) / 1.8);  }
.formclasss {
	padding-top: 40px;
	padding-right: 20px;
    padding-left: 20px;
}
.icon{
	width: 33px;	

}
	
	
}
@media (max-width:430px){
	#info {
	width: 100%;
		padding-top: calc((100%) / 1.5);  }
.icon{
	width: 28px;
}
.topinf	{
top: 20px;
left: 20px
}
	.upsvg{
	right: 20px;
	bottom:20px;
		
	}
	.title {
        font-size: 2em;
 
}
}