@charset "utf-8";

@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	.web_development{
		width:700px;
		height:500px;
		margin:50px auto;
		color:#fff;
	}	
	
	.web_development .image{
		width:700px;
		height:400px;
		background:url(../../img/logo.svg)no-repeat center center / contain;
		margin:0 auto;
	}	

	.web_development .name1{
		font-size:30px;
		margin:20px 0;
		text-align:center;
	}
	
	.web_development .name2{
		font-size:40px;
		margin:20px 0;
		text-align:center;
	}
		
	
	.web_development .info{
	}
		
	.web_development .note{
		padding:10px;
		margin:20px 0;
		text-align:center;
	}	

	body{
		overflow-x:hidden;
	}

	.background_main{
		background:#A0D1EB url(../../img/background.png);
	}
	
	
	.top{
		width:100%;
		height:100px;
		position:fixed;
		top:50px;
		left:0;
		z-index:1;
		transition: transform 0.3s ease-in-out; /* 平滑隱藏/出現效果 */
	}
	
	/* 當隱藏時，將導覽列往上推移自身高度（假設為 100% 或具體像素） */
	.top.hide {
		transform: translateY(-100%);
	}	
	
	
	.tops{
		width:700px;
		height:60px;
		display:flex;
		margin:0 auto;
		background:#EB7286 url(../../img/background.png);
		border-radius:50px;
		padding:0 30px;
		/* filter: drop-shadow(0px 0px 3px #b55060); */
	}	
	
	.tops .logo{
		width:180px;
		height:60px;
		margin-right:20px;
		display:block;
		background:url(../../img/logo_新竹縣政府.svg)no-repeat center center /contain;
	}	
	
	.tops .btno{
		width:60px;
		height:60px;
		line-height:55px;
		text-align:center;
		cursor:pointer;
		position:absolute;
		top:0;
		right:50px;
	}	
	
	.tops .btno,
	.tops .btnx
	{
		display:none;
	}		
	
	
	
	.tops .menu{
		width:calc(100% - 200px);
		height:60px;
	}		
	
	.tops .menus{
		width:100%;
		display:flex;
		font-size:19px;
		font-weight:bold;
		color:#fff;
		line-height:37px;	
	}	
	
	.tops .menus .m1{
		width:33.3%;
		height:40px;
		display:block;
		text-align:center;
		color:#fff;
		position:relative;
		padding:10px 0;
	}	
	
	.tops .menus .m1:hover{
		background:#b55060;
		text-decoration:none;
	}	
	
	.tops .menus .m2{
		text-align:center;
		color:#fff;
		position:absolute;
		top:60px;
		left:0;
		right:0;
		background:#b55060;
		border-radius:0 0 10px 10px;
		display:none;
	}	
		
	.tops .menus .m2s{
		color:#fff;
		display:block;
		padding:10px 20px;
	}	
	
	.tops .menus .m2s:hover{
		background:rgba(217, 111, 127, 0.5);
		text-decoration:none;
	}		
	
	
	.tops .menus .m1:hover .m2{
		display:block;
	}		
	

	
	.banner{
		height:650px;
		overflow:hidden;
		background:url(../../img/視覺主題/花背景.png)no-repeat center center /cover;
	}	
	
	.banners{
		width:500px;
		height:650px;
		margin:0 auto;
		position:relative;
	}	
	
	.banner .img0{
		width:400px;
		height:200px;
		position:absolute;
		top:150px;
		left:50%;
		margin:0 0 0 -200px;
	}		
	
	.banner .img0s{
		width:100%;
		height:100%;
		position:relative;
	}			
	
	
	.banner .img0 .img01{
		width:150px;
		height:100px;
		background:url(../../img/視覺主題/我們.png)no-repeat center center /contain;
		position:absolute;
		top:0;
		left:0;
	}		
	
	.banner .img0 .img02{
		width:270px;
		height:120px;
		background:url(../../img/視覺主題/把幸福.png)no-repeat center center /contain;
		position:absolute;
		top:-20px;
		left:135px;		
	}		
	
	.banner .img0 .img03{
		width:230px;
		height:80px;
		background:url(../../img/視覺主題/連成.png)no-repeat center center /contain;
		position:absolute;
		top:105px;
		left:-3px;		
	}	
		
	.banner .img0 .img04{
		width:230px;
		height:100px;
		background:url(../../img/視覺主題/竹縣.png)no-repeat center center /contain;
		position:absolute;
		top:110px;
		left:153px;		
	}	
	
	.banner .img0 .img05{
		width:110px;
		height:180px;
		background:url(../../img/視覺主題/活動日.png)no-repeat center center /contain;
		position:absolute;
		top:180px;
		left:-90px;		
	}		
	
	.banner .img0 .img06{
		width:100px;
		height:50px;
		background:url(../../img/視覺主題/115年.png)no-repeat center center /contain;
		position:absolute;
		top:100px;
		left:-70px;		
	}		
	
	.banner .img0 .img07{
		width:200px;
		height:50px;
		background:url(../../img/視覺主題/wedding.png)no-repeat center center /contain;
		position:absolute;
		top:120px;
		right:-160px;		
	}	
	
	.banner .img1{
		width:500px;
		height:650px;
		position:absolute;
		bottom:-300px;
		left:20px;	
		background:url(../../img/視覺主題/img1.png)no-repeat center bottom /contain;
	}	
	
	
	.wrapper{
		margin:0;
		position:relative;
	}

	.wrappers{
		width:700px;
		margin:0 auto;
		
	}

	.name_main{
		border-bottom:1px #FADFEC solid;
		padding-bottom:10px;
	}
	
	.name_mains{
		display:flex;
		width:700px;
		margin:0 auto;	
	}	
	
	.name_mains .icon1{
		width:70px;
		height:70px;
		background:url(../../img/視覺主題/花1.png)no-repeat center center /contain;
	}

	.name_mains .name1{
		font-size:40px;
		font-weight:bold;
		padding:15px;
		background: linear-gradient(to top, #FEF7FA, #F9D9E8);
		/* 將背景裁切成文字形狀 */
		-webkit-background-clip: text;
		background-clip: text;
		/* 將文字本身設為透明，露出底下的漸層背景 */
		color: transparent;		
	}
	
	

	
	.container_theme{
		width:100%;
		position:relative;
		overflow-x:hidden;
	}
	

	.container_theme .img1{
		width:400px;
		height:400px;
		position:absolute;
		background:url(../../img/視覺主題/花束.png)no-repeat center center /contain;
		top:100px;
		right:-150px;
		opacity:0.4;
		filter: drop-shadow(4px 4px 8px #689eba);
	}	
	
	.container_theme .img2{
		width:200px;
		height:200px;
		position:absolute;
		background:url(../../img/視覺主題/花束.png)no-repeat center center /contain;
		top:50px;
		left:-50px;
		opacity:0.4;
		filter: drop-shadow(4px 4px 8px #689eba);
	}	
		
	
	
	.container_themes{
		width:700px;
		margin:100px auto;
		color:#fff;
		text-shadow: 2px 2px 4px rgba(104, 158, 186, 0.6);
		z-index:1;
		
	}	
	
	.container_themes .video{
		width:100%;
		height:500px;
		border-radius:10px;
		margin-top:50px;
		background:#000 url(../../img/youtube.png)no-repeat center center / 50px;
		filter: drop-shadow(4px 4px 8px #689eba);
	}		
	
	
	.container_themes .name1{
		font-size:90px;
		font-weight:bold;
		height:50px;
		
	}	
	
	.container_themes .name2{
		font-size:50px;
		margin:30px 0;
	}	

	.container_themes .name3{
		font-size:50px;
		margin:20px 0;
	}	
	
	

	.container_themes .slogan_block{
		width:100%;
		height:200px;
		display:flex;
	}		
		

	.container_themes .slogan_block .slogan1{
		width:45%;
		transform: rotate(5deg);
		background:url(../../img/視覺主題/slogan01.png)no-repeat center center /contain;
	}		
	
	
	.container_themes .slogan_block .slogan2{
		width:50%;
		margin-left: auto;
		background:url(../../img/視覺主題/slogan02.png)no-repeat center center /contain;
	}		
	
	
	
	.container_themes .content{
		text-align: justify;
		margin:50px 0;
	}


	.inpage_top{
		height:150px;
	}	

	.inpage_top.m1{
		background:url(../../img/視覺主題/花1.png)no-repeat center right /contain;
	}		


	.container_news{
		width:700px;
		display:flex;
		gap:30px;
		margin:100px auto;
		flex-wrap:wrap;
	}	
	
	

	.container_news .item{
		width:calc(50% - 15px);
		height:300px;
		background:#fff;
		border-radius:5px;
		padding:20px;
		cursor:pointer;
		box-sizing: border-box;
	}
	
	.container_news .item:hover{
		filter: drop-shadow(4px 4px 8px #689eba);
		text-decoration:none;
	}		
	
	.container_news .item .date{
		width:100%;
	}

	
	.container_news .item .date .y{
		font-size:15px;
		font-weight:bold;	
		font-family: "EB Garamond", serif;
		color:#bbb;
	}
		
	
	.container_news .item .date .md{
		font-size:37px;
		font-weight:bold;
		font-family: "EB Garamond", serif;
		font-weight: 100;
		color:#FCD154;
	}
	
	.container_news .item .name{
		width:100%;	
		font-size:19px;
		line-height:31px;
		margin:20px 0;
	}
	
	.container_news .item .content{
		width:100%;	
		font-size:17px;
		line-height:25px;
		color:#ccc;
		margin:20px 0;
	}	
	
	
	
	.container_news .item .type{
		padding:1px 20px;
		font-size:15px;
		display: inline-flex;
		border-radius:20px;
		color:#fff;
		margin-top:10px;
		font-weight:bold;
	}	


	.container_content{
		width:700px;
		padding:30px;
		font-size:17px;
		border-radius:5px;
		background:#F5F8FB;
		margin:50px auto;
		filter: drop-shadow(4px 4px 8px #689eba);		
	}
	
	
	.container_content .name{
		width:100%;	
		font-size:21px;
		font-weight:bold;
		line-height:25px;
	}	
	
	.container_content .date{
		width:100%;	
		font-size:17px;
		font-weight:bold;
		line-height:25px;
		color:#ccc;
		margin:10px 0;
	}		
	
	
	.container_content .img{
		width:500px;	
		height:500px;
		margin:30px auto;
	}	
	
	
	
	.container_info{
		width:100%;	
		padding:70px 0;
		background:rgba(221,236,216,0.7) url(../../img/視覺主題/花背景1.png)no-repeat center center /cover;
	}
	
	.container_infos{
		width:700px;	
		margin:0 auto;
		font-size:17px;
	}	
	
	.container_infos .name1{
		font-size:40px;
		font-weight:bold;
		color:#425c3d;
	}		
	
	.container_infos .name2{
		font-size:27px;
		font-weight:bold;
		color:#425c3d;
	}		
	
	.container_infos .name3{
		font-size:27px;
		font-weight:bold;
		color:#a87984;
	}		
		
	.container_infos .name4{
		font-size:27px;
		font-weight:bold;
		color:#ba8e47;
	}		
	
	
	
	.container_infos .info{
		color:#425c3d;
		margin:30px 0;
		padding-bottom:20px;
		border-bottom:1px #425c3d dashed;		
	}		
	
	.container_infos .info2{
		color:#a87984;
		margin:30px 0;
	}			
	
	.container_infos .info3{
		color:#ba8e47;
		margin:30px 0;
	}		
	
	
	
	.container_infos .img_block{
		margin:30px 0;
		display:flex;
		gap:30px;
		flex-wrap:wrap;
		justify-content:space-between;
	}		
	

	.container_infos .img_block .item{
		width: calc(50% - 15px);
		box-sizing: border-box;
		height:300px;
		border-radius:10px;		
		position:relative;
		padding:30px;
		filter: drop-shadow(0px 0px 3px #425C3D);		
	}		

	.container_infos .img_block .item1{
		width:100%;
		box-sizing: border-box;
		height:300px;
		border-radius:10px;		
		position:relative;
		padding:30px;	
		filter: drop-shadow(0px 0px 3px #425C3D);	
	}
	
	.container_infos .img_block .table{
		width:100%;
		box-sizing: border-box;
		border-radius:10px;		
		position:relative;
		padding:30px 0;		
	}	
	
	
	.container_infos .img_block .item.img1{	
		background:rgba(221,236,216,0.7) url(../../img/繩結禮.jpg)no-repeat center center /cover;
	}			
	
	.container_infos .img_block .item.img2{	
		background:rgba(221,236,216,0.7) url(../../img/封酒儀式.jpg)no-repeat center center /cover;
	}		
	
	.container_infos .img_block .item.img3{	
		background:rgba(221,236,216,0.7) url(../../img/交換信物.jpg)no-repeat center center /cover;
	}		
	
	.container_infos .img_block .item.img4{	
		background:rgba(221,236,216,0.7) url(../../img/幸福合照.jpg)no-repeat center center /cover;

	}	
	
	.container_infos .img_block .item1.img5{	
		height:550px;
		background:rgba(221,236,216,0.7) url(../../img/專屬紀念禮.jpg)no-repeat center center /cover;

	}		
		
	
	.container_infos .img_block .item .name{
		font-size:31px;
		font-weight:bold;
		color:#fff;
		text-shadow: 2px 2px 4px #642925;
	}			
	
	.container_infos .img_block .item .content{
		color:#fff;
		margin:20px 0;
		font-size:17px;
		line-height:25px;
		text-shadow: 2px 2px 4px #642925;
	}	
	

	.container_infos .root_block{
		margin:30px 0;
		font-size:23px;
		line-height:47px;
	}		
	
	
	
	.container_info1{
		width:100%;	
		padding:70px 0;
		background:rgba(251,233,239,0.7) url(../../img/視覺主題/花背景1.png)no-repeat center center /cover;
	}	
	
	
	.container_info3{
		width:100%;	
		padding:70px 0;
		background:rgba(254,240,223,0.7) url(../../img/視覺主題/愛心緞帶.png)no-repeat right top -110px /70%;
	}		
	
	.container_infos .contact_block{
		margin:30px 0;
		display:flex;
		gap:30px;
	}
		
	.container_infos .contact_block .item{
		width:33.3%;
		background:#fff url(../../img/background.png);
		padding:20px;
		border-radius:10px;
		box-sizing: border-box;
		display:block;
		font-size:15px;
	}
	

		
	.container_infos .contact_block .item:hover{
		color:#BA8E47;
		text-decoration:none;
		filter: drop-shadow(0px 0px 3px #8a652b);
		
	}	
	
	.container_infos .contact_block .item .name{
		font-size:17px;
		font-weight:bold;	
		line-height:23px;
	}	
	
	.container_infos .contact_block .item .img{
		height:70px;
	}		
	
	.container_infos .contact_block .item .number{
		font-size:15px;
		font-weight:bold;
		text-align:right;
		color:#555;
	}	
	
		


	
	
	
	.footer{
		padding:50px 50px 100px 50px;
		background:#806269 url(../../img/background.png);
	}	
	
	.footers{
		width:700px;
		margin:0 auto;
		color:#fff;
		text-align:center;
	}
	
	
	
	
	a.btn_gotop{
		width:60px;
		height:40px;
		line-height:40px;
		text-align:center;
		position:fixed;
		bottom:0;
		left:50%;
		display:block;
		margin-left:-30px;
		background:#EB7286;
		z-index:10;
		color:#fff;
		border-radius:5px 5px 0 0;			
	}	
	
	
	a.btn_gotop:hover{
		height:50px;
		line-height:50px;
		background:#b55060;
		filter: drop-shadow(0px 0px 3px #b55060);
	}	


	a.btn_gotop span{
		font-size:21px;
		margin:0;
	}	

	.anchor_fix{
		position:absolute;
		top:-250px;
		height: 0;
		display:block;
	}	
	
	
	.btn_registration{
		border-radius:5px;
		font-size:17px;
		font-weight:bold;
		color:#fff;
		box-sizing:border-box;
		position:fixed;
		bottom:20px;
		right:20px;
		z-index:2;
		background:#EB7286 url(../../img/background.png);
		text-align:center;
		padding:20px;
		line-height:20px;
	}		

	
	.btn_registration:hover{
		background:#b55060;
		text-decoration:none;
		color:#fff;
		filter: drop-shadow(0px 0px 3px #b55060);
	}		
	
	.btn_registration span{
		font-size:27px;
		margin-top:-5px;
	}	
	
	.btn_registration .img{
		width:100%;
		height:50px;
		border-radius:3px;
		background:#fff url(../../img/視覺主題/img1.png)no-repeat center bottom /contain;
	}		
	
	.btn_registration .info1{
		margin-top:20px !important;
	}
	
	
	.btn_registration .info1 .name{
		margin:10px 0;
		font-size:25px;
		color:#ffe66b;
		padding-bottom:5px;
		border-bottom:1px #ffe66b solid;
		font-style: italic;
	}		
	
	.btn_registration .info1 .text1{
	}		
	
	
	
	table.t1{
		border-radius: 10px;
		overflow: hidden;
	}		
	
	table.t1 th{
		background:#425c3d;
		border: 2px solid #425c3d;
		color:#fff;
		padding: 10px;
	}	
	
	table.t1 td{
		border: 2px solid #425c3d;
		padding: 10px;
	}
	
	table.t1 td .note{
		font-size:17px;
		line-height:25px;
		color:#ba8e47;
	}
	
	
	.registration{
		width:700px;
		padding:30px;
		font-size:17px;
		border-radius:5px;
		background:#F5F8FB url(../../img/background.png);
		margin:150px auto 50px auto;
		filter: drop-shadow(4px 4px 8px #689eba);
	}
		
		
	.registration .directions{
		color:#983E50;
	}
	
		
	.registration .directions .name1{
		font-size:33px;
		font-weight:bold;
		color:#983E50;
		margin-right:10px;
	}
			
	.registration .directions .name2{
		font-size:25px;
		font-weight:bold;
		margin:30px 0;
	}
	
	
	.registration .directions .name3{
		font-size:25px;
		font-weight:bold;
		margin:20px 0;
		color:#983E50;
	}	
	
	.registration .directions .content{
		margin:20px 0;
		font-size:15px;
		background:#fff;
		padding:20px;
		border-radius:5px;
		border:1px #ddd solid;
	}
	

	.registration .directions .important{
		margin:20px 0;
		font-size:15px;
		padding:20px;
		background:#F4E4E7;
		color:#983E50;	
		border-left:2px #983E50 solid;
	}	
	
	.registration .directions .important1{
		margin:20px 0;
		font-size:17px;
		padding:20px;
		background:#ffeebd;
		color:#983E50;	
		border-left:2px #918254 solid;
	}	
	
	.registration .directions .importants{
		display:flex;
	}	
	
	.registration .directions .importants .icon span{
		margin-top:-5px;
	}

	.registration .directions .importants .icon{
		width:30px;
		height:30px;
	}		
	
	.registration .directions .importants .note{
		flex:1;
	}	
	
	
	.registration .directions .content section{
		margin:10px 0;
	}
		

	.registration .directions .note1{
		margin:20px 0;
		text-align:center;
	}
		
	.registration .container_form{
		display:none;
	}
	
		
	.registration .form{
		margin:50px 0;
	}
		
			
	/* 提醒文字的樣式 */
	.registration .form.error_message {
		color: #ff4d4d;
		font-size: 14px;
		margin-top: 5px;
		display: block;
	}		
			
		
	/* 未填寫欄位的輸入框變紅 */
	.registration .form .input-error {
		border: 2px solid #ff4d4d !important;
		background-color: #fff6f6 !important;
		outline: none;
	}		
		
		
	.registration .form table{
		width: 100%; 
	}		
	
	.registration .content table tr{
		border-bottom:1px #ccc dashed;
		padding-bottom:10px;
		display:block;
	}		
	
			
	.registration .form table td{
		padding:10px;
		display: block;
		width: 100%; /* 通常會搭配 100% 寬度讓它填滿 */
		box-sizing: border-box;
	}		
	
	.registration .form table td:first-child{
		padding:10px;
	}		
			
	.registration .form table td:nth-child(2){
		padding:5px 10px 30px 10px;
		
	}		
		
	.registration .form input[type=text]{
		box-sizing: border-box;
		height:50px;
		padding:10px;
		border-radius:3px;
		font-size:17px;
		border:2px #547d91 solid;
		width:100%;
	}
	
		
	.registration .form input[type=date]{
		box-sizing: border-box;
		height:50px;
		padding:10px;
		border-radius:3px;
		font-size:17px;
		border:2px #547d91 solid;
		width:100%;
	}	
	
	
	.registration .form input[type=radio]{
		width:20px;
		height:20px;
		border-radius:50%;
		vertical-align:middle;
		margin-top: -7px; 
		margin-right: 6px; 
		accent-color: #A63B52;	
	}
	
	.registration .form input[type=checkbox]{
		width:20px;
		height:20px;
		border-radius:50%;
		vertical-align:middle;
		margin-top: -7px; 
		margin-right: 6px; 
		accent-color: #A63B52;	
	}	
	
	
	.registration .form input[type=date]{
		box-sizing: border-box;
		height:50px;
		padding:10px;
		border-radius:3px;
		font-size:17px;
		border:2px #547d91 solid;
		
	}
		
	.registration .form .note{
		padding:10px;
		background:#FDF1E6;
		border-left:2px #B98A4E solid;
		color:#ba8e47;
		margin:5px 0;
	}	
	
	.registration .form .req{
	    color:#c9566b;
		margin-left: 4px;
		font-weight:bold;
	}		
	
	.registration .form .block_agree{
		width: auto;
		max-width: 300px; /* 限制最大寬度，避免在大螢幕上無限拉長 */
		margin: 0 auto;   /* 當寬度小於 500px 時，自動置中 */
		padding: 20px;
		background: #F4E4E7;
		color: #983E50;
		text-align:center;
		border-radius:5px;
		font-size:15px;
	}		
	
	
	.registration .form .container_btn{
		margin:20px 0;
	}
		
	.registration .form .container_btn .btn{
		background:#EB7286 url(../../img/background.png);
		text-align:center;
		padding:20px 30px;
		line-height:20px;
		border-radius:5px;
		color:#fff;
		font-weight:bold;
	}			
	
	.registration .form .container_btn .btn.disabled{
		background-color: #cccccc !important; /* 變成灰色 */
		color: #666666 !important;
		cursor: not-allowed; /* 滑鼠游標變成禁止符號 */
		pointer-events: none; /* 核心：讓 <a> 標籤完全無法被點擊 */
	}	
	
	/* 畫布驗證碼樣式 */
	#captcha_canvas {
		vertical-align: middle;
		cursor: pointer;
		margin-left: 10px;
		background-color: #f0f0f0;
		border: 1px solid #ccc;
	}		
	
	
	.info_pop{
		width:100%;
		height::100%;
		position:relative;
		display:none;
	}
	
	.info_pop .mask{
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.7);
		position:fixed;
		top:0;
		left:0;
		z-index:5;
		backdrop-filter: blur(10px);
	}	
	
	.info_pop .info_pops{
		width:400px;
		height:200px;
		background:#fff;
		border-radius:5px;
		position:fixed;
		z-index:6;
		top: 50%; 
		left: 50%; 
		transform: translate(-50%, -50%);
		padding: 30px;
		box-sizing: border-box;	
		
	}		
	
	.info_pop .info_pops .name{
        font-size: 21px;
        font-weight: bold;
		color: #983E50;	
		text-align:center;
	}	
	.info_pop .info_pops .info{
        font-size: 17px;
        font-weight: bold;
        margin: 10px 0;		
		text-align:center;
	}
	
	.info_pop .info_pops .container_btn{
		display: flex;
		justify-content: center; /* 水平置中 */
		align-items: center;     /* 垂直置中 */
		gap:10px;
	}	
	
	.info_pop .info_pops .container_btn .btn1{
		background:#EB7286;
		padding:5px 30px;
		color:#fff;
		border-radius:3px;
	}		
	
	.info_pop .info_pops .container_btn .btn0{
		border:2px #EB7286 solid;
		padding:5px 30px;
		color:#EB7286;
		border-radius:3px;
	}	
	
	.anchor_position{
		position:relative;
	}
	
	.anchor_fix{
		position:absolute;
		top:-159px;
		height: 0;
		display:block;
	}		
	
	
	
	
	
	
	
}