body{
font-family: 'Noto Sans TC','微軟正黑體', sans-serif;
}
.pc{
display: block;
visibility: visible;
}
.m{
display: none;
visibility: hidden;
}
/*文字*/
.p1{
font-size: 15px;
line-height: 1.6;
text-align: center;
color: #000;
margin-bottom: 0;
}
.p2{
font-size: 15px;
line-height: 1.6;
text-align: center;
color: #000;
padding-top: 20px;
margin-bottom: 0;
}
.p3{
font-size: 15px;
line-height: 1.6;
text-align: center;
color: #000;
margin-bottom: 0;
}
h1,h2{
margin-bottom: 0;
text-align: center;
line-height: 1.3;
}
/*KV1*/
.kv1{
padding-top: 96px;
}
.kv1, .kv1_box{
width: 100%;
height: auto;
overflow: hidden;
}
.kv1_img{
width: 73%;
height: 470px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 10px;
}
/*QIZ*/
.qiz{
width: 100%;
height: auto;
overflow: hidden;
padding: 30px 0;
}
.qiz_box{
width: 63%;
height: auto;
overflow: hidden;
padding: 20px 0;
margin: 0 auto;
border: 2px solid #000;
margin-bottom: 40px;
}
.qiz_img{
width: 93%;
height: 470px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 10px;
}
.qiz_img img{
width: 100%;
}
.btn_a{
display: block;
width: 93%;
height: auto;
font-size: 23px;
font-weight: bold;
text-align: center;
line-height: 2;
background-color: #f2f2f2;
margin: 0 auto;
margin-bottom: 10px;
}
.btn_a:hover{
background-color: #fcc2c8;
}
/*KV2*/
.kv2{
width: 100%;
height: auto;
overflow: hidden;
}
.kv2_box{
width: 73%;
height: 550px;
overflow: hidden;
margin: 0 auto;
background: url(../images/20210304/img_kv2.jpg);
background-size: 105%;
padding-top: 70px;
}
/*註冊區*/
.form_box{
width: 40%;
height: auto;
background-color: #fff;
margin: 0 auto;
border: 1px solid #000;
}
.title1{
width: 300px;
height: auto;
font-size: 25px;
font-weight: bold;
text-align: center;
color: #fff;
line-height: 2.3;
background-color: #000;
margin: 0 auto;
margin-top: -30px;
}
.register-box{
width: 80%;
margin: 0 auto;
}
.register-box .form-control{
border: 1;
background: rgba(255,255,255,0.8);
height: 40px;
color: #000;
}
.register-box input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #000;
}
.register-box input::-moz-placeholder { /* Firefox 19+ */
color: #000;
}
.register-box input:-ms-input-placeholder { /* IE 10+ */
color: #000;
}
.register-box input:-moz-placeholder { /* Firefox 18- */
color: #000;
}
.register-box .col-sm-4, .register-box .col-xs-4, .register-box .col-xs-6, .register-box .col-sm-6{
padding-right: 5px;
padding-left: 5px;
}
.register-box .row{
margin-left: -5px;
margin-right: -5px;
}
.btn-bk{
background: #000;
color: #fff;
font-size: 17px;
text-align: center;
width: 100%;
transition: all .3s;
}
.btn-bk:hover, .btn-bk:active, .btn-bk:focus{
filter: brightness(120%);
color: #fff;
transition: all .3s;
}
.register-box .confirm, .register-box .copyright{
font-size: 13px;
color: #000;
margin-bottom: 10px;
text-align: center;
}
.register-box .confirm > a{
color: #000;
}
.register-box .confirm > a:hover{
color: #000;
text-decoration: underline;
}
/*註冊區*/
.footer{
width: 100%;
height: auto;
font-size: 13px;
line-height: 2.5;
background-color: #000;
color: #fff;
text-align: center;
margin-bottom: 0;
}
/*** 1366顯示 ***/
@media (min-width: 1024px) and (max-width: 1366px) {
.pc{
display: block;
visibility: visible;
}
.m{
display: none;
visibility: hidden;
}
/*KV1*/
.kv1{
padding-top: 96px;
}
.kv1_img{
width: 85%;
height: 480px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 10px;
}
.kv1_img img{
width: 100%;
}
.p1 {
font-size: 19px;
line-height: 1.6;
}
/*QIZ*/
.qiz_img {
height: 380px;
}
.btn_a {
font-size: 21px;
line-height: 2.3;
}
/*KV2*/
.kv2_box {
width: 73%;
height: 570px;
background: url(../images/20210304/img_kv2.jpg);
background-size: 135%;
background-position: -130px 0;
padding-top: 70px;
}
.form_box {
width: 60%;
}
}
/*** 平板顯示 ***/
@media (min-width: 768px) and (max-width: 1023px) {
.pc{
display: block;
visibility: visible;
}
.m{
display: none;
visibility: hidden;
}
/*KV1*/
.kv1{
padding-top: 70px;
}
.kv1_img {
width: 90%;
height: 372px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 10px;
}
.kv1_img img{
width: 100%;
}
/*QIZ*/
.qiz_box {
width: 70%;
}
.qiz_img {
height: 330px;
}
/*KV2*/
.kv2_box {
width: 90%;
height: 550px;
background: url(../images/20210304/img_kv2.jpg);
background-size: 130%;
padding-top: 70px;
}
}
/*** SE顯示 ***/
@media (min-width: 415px) and (max-width: 750px) {
.pc{
display: block;
visibility: visible;
}
.m{
display: none;
visibility: hidden;
}
/*KV1*/
.kv1 {
padding-top: 100px;
}
.kv1_img {
width: 100%;
height: 413px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 10px;
}
.kv1_img img{
width: 100%;
}
/*QIZ*/
.qiz_box {
width: 90%;
}
.qiz_img {
width: 93%;
height: 425px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 10px;
}
/*KV2*/
.kv2_box {
width: 100%;
height: 600px;
overflow: hidden;
margin: 0 auto;
background: url(../images/20210304/img_kv2.jpg);
background-size: 130%;
padding-top: 100px;
}
.form_box {
width: 60%;
}
}
/*** 手機顯示 ***/
@media only screen and (max-width: 414px) {
.pc{
display: none;
visibility: hidden;
}
.m{
display: block;
visibility: visible;
}
/*KV1*/
.kv1 {
padding-top: 65px;
}
.kv1_img {
width: 100%;
height: 460px;
overflow: hidden;
margin: 0 auto;
}
.p2{
padding-top: 0;
}
.p3{
padding-bottom: 0px;
}
.qiz {
width: 100%;
height: auto;
overflow: hidden;
padding: 15px 0;
}
.qiz_box {
width: 90%;
padding: 10px 0;
}
.qiz_img {
height: 210px;
}
.btn_a {
display: block;
width: 93%;
height: auto;
font-size: 17px;
font-weight: bold;
text-align: center;
line-height: 1.5;
background-color: #f2f2f2;
margin: 0 auto;
margin-bottom: 10px;
padding: 6px 4px;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 23px;
letter-spacing: -2px;
}
.kv2_box {
width: 100%;
height: 600px;
overflow: hidden;
margin: 0 auto;
background: url(../images/20210304/img_kv2.jpg);
background-size: 253%;
background-position: -110px 0;
padding-top: 100px;
}
.form_box {
width: 85%;
height: auto;
background-color: #fff;
margin: 0 auto;
border: 1px solid #000;
}
}