@charset "utf-8";


input, button, textarea, select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	border: none;
}
input[type="submit"], input[type="button"] {
	cursor: pointer;
}
/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	
}
/*table {
	border-collapse:collapse;
	border-spacing:0;
}*/
fieldset, img {
	border: 0;
	padding: 0;
	margin: 0;
}
address, caption, cite, code, dfn, em, /*strong,*/ th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
	padding-left: 0;
}
caption, th {
	text-align: left;
}
/*h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}*/
q:before, q:after {
}
abbr, acronym {
	border: 0;
}
* {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	border: 0;
	vertical-align: middle;
}

/*==================================================================================*/

/*開頭設定*/

body {
	/*font-family: Microsoft JhengHei, "微軟正黑體";*/
	font-family: "微軟正黑體", sans-serif;
	font-weight: normal;
	background-color: #781c27;
	
}
a {
	text-decoration: none;
	/*color: #ea5520 ;*/transition: all 0.4s ease 0s;
}
a:hover {
	color: #000;
}


h1, h2, h3, h4 { font-weight: normal;}


/*=============================================================*/

.content {background: url("../img/gd_bg3.jpg") center top repeat-y; color:#FFF;background-size:100%; }
.logo { text-align: center;background-size:100%;}
.logo_img {padding: 15vh 0 7vh 0;}
.logo_img img {width: 640px; max-width: 60vw;}
.logo_txt {font-size: 30px;line-height: 60px;padding-bottom: 10vh;}

.text {background: url("../img/gd_bg1.jpg") center top no-repeat;background-size:100%;min-height: 100vh;}
.text2 {background: url("../img/gd_bg2.jpg") center bottom no-repeat;}
.text_in {width: 900px;max-width: 80vw; margin: 0 auto;}
.tit {font-size: 30px;display: flex; align-items: center;padding-bottom: 20px;font-weight: 600;}
.tit p {width: 100%;}
.tit span {background: url("../img/line.png") center no-repeat;width: 100%;height: 20px;display: block;}
.tit2 {font-size: 30px;color: #d7a15f;padding-bottom: 30px;font-weight: 600;display: flex; align-items: center;flex-wrap: wrap;}
.tit2p p {padding-bottom: 20px;}
.txt2 {font-size: 18px;line-height: 36px; padding-bottom: 80px;}
.inp_sty1 {padding-left: 20px;}
.inp_sty2 input[type=checkbox] {width: 100px; height: 100px; border-radius:20px; border: 5px solid #d7a15f; background-color: #FFF;}

.inp02 {width: calc(100% - 44px); height: 80px; border-radius: 20px; border: 5px solid #d7a15f; background-color: #FFF; padding: 0 20px;}
.for_one {padding-bottom: 40px;font-size: 20px;display: flex;justify-content: flex-start;align-items: center;}
.txt_form {padding-bottom: 180px;}


span.ch0 {
position: relative;}
.Checkbox, .Checkbox2 {
position: absolute;
	visibility: hidden;}
.Checkbox+label {
position:absolute;
width: 60px;
height: 60px;
	margin-top: -20px;
border-radius:20px; border: 5px solid #d7a15f; background-color: #FFF;
}
.Checkbox2+label {
position:absolute;
width: 53px;
height: 53px;
	margin-top: -10px;
border-radius:50%; border: 3px solid #FFF;
}


.Checkbox:checked+label:after {
content: "✓";
position: absolute;
left: 0;
top:0;
	bottom: 0; 
	right: 0;
	border-radius:15px;
width: 60px;
height: 60px;font-size: 40px;margin: 0 auto;

	text-align: center;line-height: 60px;
}
.Checkbox2:checked+label:after {
content: "";
position: absolute;
left: 7px;
top:7px;
	bottom: 0; 
	right: 0;
	border-radius:50%;
width: 40px;
height: 40px;
	background-color: #FFF;

}

.inp_sty1 i {font-style: normal;padding-left: 100px; color: #FFF;}
.inp_sty12 i{padding-left: 70px; padding-right: 20px;}
.for_one2 {text-align: center;}
.btn02 {width: 500px;max-width: 100%; height: 100px;text-align: center; margin: 40px auto;font-size: 30px; color: #c20d23;}
.btn02:hover {background-color: #c20d23;color: #FFF;}

@media screen and (max-width:760px) {
	.logo_txt {font-size: 20px; line-height: 28px; padding-bottom: 40px;}
	.tit {display: flow-root; font-size: 20px; line-height: 28px;}
	.tit span {width: 100%;height: 5px;}
	.tit2{font-size: 18px; line-height: 28px;padding-bottom: 20px;}
	.txt2 {font-size: 15px;line-height: 28px;}
	.for_one {font-size: 18px;}
	.Checkbox+label {width: 30px; height: 30px;margin-top: 0; border-radius:5px; border: 3px solid #d7a15f; }
	.Checkbox:checked+label:after {width: 30px; height: 30px;font-size: 20px;line-height: 30px;}
	.inp_sty1 i {padding-left: 60px;}
	.inp_sty12 i{padding-left: 60px; padding-right: 10px;}
	.inp_sty1 {padding-left: 0;}
	.inp02 {width: calc(100% - 24px); height: 60px; border-radius: 10px; border: 3px solid #d7a15f; padding: 0 10px;font-size: 20px;}
	
	.Checkbox2+label {
width: 33px;
height: 33px;
	margin-top: -10px;
		margin-left: 10px;
}
	.Checkbox2:checked+label:after {

left: 3px;
top:3px;
width: 27px;
height: 27px;
	
	}
	.btn02 { height: 60px;font-size: 25px; }
}


/*完成頁*/
.content2 {background: url("../img/bg_ok.jpg") center no-repeat ; background-size:100% 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center;}
.ok_box {width: 350px; max-width: 80vw; padding: 80px 0;}

/*==============================================================
                 loading動畫
==============================================================*/a

.at_loading {
  　width:100%; height:100%; position:fixed; left:0; right:0; top:0; bottom:0; z-index:1500; display: flex; align-items: center; justify-content: center;  background-color: #111111;
   }

.loader {
  width: 48px;
  height: 48px;
  display: block;
  margin:15px auto;
  position: relative;
  color: #FFF;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: scale(0.5) translate(0, 0);
  background-color: #fd238a;
  border-radius: 50%;
  animation: animloader 1s infinite ease-in-out;
}
.loader::before {
  background-color: #56faf8;
  transform: scale(0.5) translate(-48px, -48px);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes animloader {
    50% {
      transform: scale(1) translate(-50%, -50%);
}
}