body,
html {
width: 100%;
margin: 0;
padding: 0;
background-color: #edeae6;
}
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
img {
display: block;
width: 100%;
}
/*全部*/
.main {
width: 100%;
height: auto;
min-height: 100vh;
position: relative;
overflow: hidden;
background-image: url(../img/05/form-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/*form*/
.form-txt {
width: 100%;
font-family: 'Noto Serif TC', serif;
}
.form-txt h1 {
position: relative;
margin: 0 0 1.4vw 0;
line-height: 7vw;
color: #595757;
font-weight: normal;
font-size: 4vw;
text-align: center;
letter-spacing: 0.2vw;
}
.form-txt h3 {
position: relative;
margin: 0 0 6vw 0;
line-height: 5.4vw;
color: #595757;
font-weight: normal;
font-size: 2.7vw;
letter-spacing: 0.2vw;
text-align: center;
}
.form-txt h2 {
position: relative;
margin: 0 0 1.4vw 0;
line-height: 7vw;
color: #595757;
font-weight: normal;
font-size: 3.4vw;
text-align: center;
letter-spacing: 0.2vw;
}
.form-txt h4 {
position: relative;
margin: 0;
line-height: 5.4vw;
color: #595757;
font-weight: normal;
font-size: 2.7vw;
letter-spacing: 0.2vw;
text-align: center;
white-space: nowrap;
}
.form {
width: 80%;
height: auto;
position: relative;
margin: 120vw auto 12vw auto;
box-sizing: border-box;
}
.form form {
width: 87%;
margin: 4vw auto 0 auto;
}
.input-long {
width: 100%;
height: 7vw;
line-height: 7vw;
margin: 0 0 1.8vw 0;
border-bottom: 1px solid #595757;
padding: 0;
position: relative;
box-sizing: border-box;
}
.input-long::after {
content: "";
clear: both;
display: block;
}
.input-long-title {
width: 22%;
color: #595757;
height: 7vw;
line-height: 7vw;
font-size: 2.7vw;
letter-spacing: 0.1vw;
font-family: 'Noto Serif TC', serif;
float: left;
position: relative;
}
.star {
font-size: 2.7vw;
position: absolute;
top: -0.1vw;
left: 7vw;
}
.input-long-name {
width: 78%;
float: left;
}
.form input[type="text"],
.form input[type="password"] {
background-color: transparent;
border: none;
width: 100%;
box-sizing: border-box;
height: 7vw;
line-height: 7vw;
font-size: 2.7vw;
letter-spacing: 0.1vw;
outline: none;
color: #595757;
padding: 0;
font-family: 'Noto Serif TC', serif;
}
.input-long-name select {
width: 100%;
height: 7vw;
line-height: 7vw;
font-size: 2.7vw;
letter-spacing: 0.1vw;
color: #595757;
background-color: transparent;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-family: 'Noto Serif TC', serif;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
background-image: url(../img/05/select-arrow.png);
background-position-x: 99%;
background-position-y: 55%;
background-repeat: no-repeat;
background-size: 2.7vw;
outline: none;
cursor: pointer;
position: relative;
border: none;
transition: all 0.5s;
}
.form input::placeholder {
color: #595757 !important;
}
.verify-pic {
width: 10vw;
position: absolute;
right: 0;
bottom: 1.4vw;
}
.form input[type="submit"],
.form input[type="reset"] {
width: 100%;
line-height: 7vw;
vertical-align: middle;
background-color: transparent;
font-family: 'Noto Serif TC', serif;
font-size: 2.7vw;
letter-spacing: 0.1vw;
color: #fff !important;
border: 1px solid #ab8e78;
background-color: #ab8e78;
box-sizing: border-box;
border-radius: 0;
-webkit-appearance: none;
-webkit-border-radius: 0px;
cursor: pointer;
}
.form input[type="reset"] {
float: right;
}
.textarea-long {
width: 100%;
height: auto;
line-height: 7vw;
margin: 0 0 1.8vw 0;
border-bottom: 1px solid #595757;
padding: 0 0.5%;
position: relative;
box-sizing: border-box;
}
.textarea-long::after {
content: "";
clear: both;
display: block;
}
.textarea-title {
width: 22%;
color: #595757;
height: 7vw;
line-height: 7vw;
font-size: 2.7vw;
letter-spacing: 0.1vw;
font-family: 'Noto Serif TC', serif;
float: left;
position: relative;
}
.textarea {
width: 78%;
float: left;
position: relative;
overflow: hidden;
}
.textarea textarea {
width: 100%;
min-height: 14vw;
background-color: transparent;
outline: none;
box-sizing: border-box;
line-height: 7vw;
font-size: 2.7vw;
letter-spacing: 0.1vw;
font-family: 'Noto Serif TC', serif;
border: none;
display: block;
color: #595757;
resize: none;
padding: 0;
}
.check-item {
width: 100%;
height: 7vw;
line-height: 7vw;
margin: 0 auto 1vw auto;
vertical-align: middle;
font-family: 'Noto Serif TC', serif;
color: #595757;
font-size: 2.7vw;
letter-spacing: 0.1vw;
text-align: center;
}
.check-item label {
height: 7vw;
line-height: 7vw;
cursor: pointer;
}
.check-item label input {
width: 3vw;
height: 3vw;
margin: 0 1% -0.3% 0;
-webkit-appearance: none;
-webkit-border-radius: 0px;
-moz-appearance: none;
appearance: none;
background: url(../img/05/check-btn.png) no-repeat top center;
background-size: 3vw 3vw;
border: none;
cursor: pointer;
}
.check-item label input:checked {
background: url("../img/05/checked-btn.png") no-repeat top center;
background-size: 3vw 3vw;
}
.openTxtBtn {
height: 2.5vw;
line-height: 2.5vw;
}
.form-btn {
width: 100%;
margin: 0 auto;
clear: both;
}
/*同意書照片預覽*/
.black {
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 0.9);
z-index: 11111;
font-family: "微軟正黑體";
}
.closeBtn {
width: 30px;
position: absolute;
right: 5%;
top: 4%;
}
.infoWrap {
width: 100%;
margin: 0 auto;
max-width: 80%;
position: relative;
height: 100vh;
overflow: auto;
}
.infoWrap ul {
list-style: none;
font-size: 3.5vw;
padding-inline-start: 7vw;
}
.infoWrap ul>li>ul {
list-style: none;
font-size: 3.5vw;
padding-inline-start: 4vw;
}
.li1::before {
content: "一、";
position: absolute;
left: 0vw;
}
.li2::before {
content: "二、";
position: absolute;
left: 0vw;
}
.li3::before {
content: "三、";
position: absolute;
left: 0vw;
}
.li4::before {
content: "四、";
position: absolute;
left: 0vw;
}
.li5::before {
content: "五、";
position: absolute;
left: 0vw;
}
.li1-li::before {
content: "（１）";
position: absolute;
left: 0vw;
}
.li2-li::before {
content: "（２）";
position: absolute;
left: 0vw;
}
.li3-li::before {
content: "（３）";
position: absolute;
left: 0vw;
}
.li4-li::before {
content: "（４）";
position: absolute;
left: 0vw;
}
.infoBox {
width: 100%;
height: calc(100% - 150px);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow-y: auto;
color: #fff;
text-align: left;
}
.infoBox h3 {
font-size: 5vw;
line-height: 130%;
margin-bottom: 25px;
text-align: center;
}
.infoBox h4 {
font-size: 3.5vw;
line-height: 130%;
margin-bottom: 25px;
}
.infoBox h5 {
font-size: 4vw;
line-height: 130%;
margin-bottom: 25px;
}
.infoBox p {
font-size: 3.5vw;
line-height: 150%;
}