body{
font-family: 'Noto Sans TC','微軟正黑體', sans-serif;
}
.pc{
display: block;
visibility: visible;
}
.m{
display: none;
visibility: hidden;
}
.kv1{
width: 100%;
height: 910px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_bg_pc.png);
background-size: 100%;
}
.kv1_box{
width: 350px;
height: auto;
margin-left: 1040px;
margin-top: 200px;
}
.kv1_box h1{
font-size: 48px;
line-height: 1.1;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -2px;
margin-bottom: 10px;
}
.kv1_box h3{
font-size: 15px;
line-height: 1.2;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -1px;
}
.p1{
font-size: 17px;
line-height: 1.5;
color: #000;
margin-bottom: 20px;
}
.p2{
font-size: 23px;
line-height: 1.5;
color: #000;
}
.btnstyle{
display: block;
width: 300px;
height: auto;
font-size: 27px;
line-height: 2;
color: #fff;
background-color: #5f949f;
text-align: center;
}
.btnstyle:focus, .btnstyle:hover, .btnstyle:active{
color: #ff0;
}
.kv2{
width: 100%;
height: auto;
overflow: hidden;
background-color: #f4f4f1;
padding-top: 120px;
padding-bottom: 120px;
}
.kv2_title{
width: 76%;
height: auto;
padding: 20px;
background-color: #fff;
border: 3px solid #000;
overflow: hidden;
margin: 0 auto;
margin-bottom: 40px;
}
.p3{
font-size: 19px;
line-height: 1;
color: #000;
margin-bottom: 10px;
}
.p4{
font-size: 25px;
line-height: 1.5;
color: #000;
font-weight: 700;
margin-bottom: 0;
}
.kv2_qiz{
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.kv2_qiz_box{
clear: both;
width: 100%;
height: auto;
overflow: hidden;
padding: 10px;
margin-bottom: 30px;
}
#trigger1 ,#trigger2 ,#trigger3 ,#trigger4 ,#trigger5 ,#trigger6 ,#trigger7 ,#trigger8 ,#trigger9 ,#trigger10 {
display: none;
}
.checker {
background-image: url(../images/20200903/img_kv2_check.png);
background-position: left center;
background-size: auto 100%;
width: 55px;
height: 55px;
background-repeat: no-repeat;
}
#trigger1:checked + .checker ,#trigger2:checked + .checker
,#trigger3:checked + .checker ,#trigger4:checked + .checker
,#trigger5:checked + .checker ,#trigger6:checked + .checker
,#trigger7:checked + .checker ,#trigger8:checked + .checker
,#trigger9:checked + .checker ,#trigger10:checked + .checker{
background-position: right center;
}
.kv2_qiz_box_check{
width: 55px;
height: 55px;
position: relative;
display: inline-block;
float: left;
margin-bottom: 0;
}
.kv2_qiz_box_no{
width: 78px;
height: 60px;
background-image: url(../images/20200903/img_kv2_numberbg.png);
float: left;
font-size: 35px;
text-align: center;
font-weight: bolder;
color: #000;
padding-top: 2px;
text-indent: -5px;
margin-right: 10px;
margin-bottom: 0;
}
.p5{
width: 390px;
font-size: 21px;
line-height: 1.5;
color: #000;
font-weight: 700;
margin-bottom: 0;
float: right;
}
.kv2_qiz_box1{
clear: both;
width: 60%;
height: auto;
overflow: hidden;
padding: 10px;
margin-bottom: 30px;
margin: 0 auto;
}
.p51{
width: 590px;
font-size: 21px;
line-height: 1.5;
color: #000;
font-weight: 700;
margin-bottom: 0;
float: right;
}
.kv2_qiz_box_ans{
width: 600px;
height: 390px;
overflow: hidden;
background-image: url(../images/20200903/img_kv2_ans.png);
margin: 0 auto;
padding: 50px;
clear: both;
}
.kv2_qiz_box_ans_left{
width: 45%;
height: auto;
float: left;
}
.kv2_qiz_box_ans_right{
width: 45%;
height: auto;
float: right;
}
.p6{
font-size: 21px;
font-weight: 900;
line-height: 2;
text-align: center;
margin-bottom: 0;
}
.kv3{
width: 100%;
height: 630px;
background: url(../images/20200903/img_kv3_bg_pc.jpg);
padding-top: 60px;
padding-bottom: 60px;
}
/*註冊區*/
.bk_area_center{
width: 450px;
height: auto;
padding: 20px;
margin: 0 auto;
overflow: hidden;
}
.title1{
width: 100%;
height: auto;
font-size: 75px;
font-weight: 200;
line-height: 1;
margin-bottom: 0;
color: #fd8046;
padding-top: 20px;
}
.bk_area_bottom{
width: 440px;
height: 800px;
background-color: #000;
box-shadow: 0px 4px 10px #000;
margin: 0 auto;
}
.register-box{
width: 100%;
}
.register-box .form-control{
border: 0;
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-forman{
background: #5f949f;
color: #fff;
font-size: 17px;
text-align: center;
width: 100%;
transition: all .3s;
}
.btn-forwoman{
background: #fd8046;
color: #fff;
font-size: 17px;
text-align: center;
width: 100%;
transition: all .3s;
}
.btn-forman:hover, .btn-forwoman:hover, .btn-forman:active, .btn-forwoman:active, .btn-forman:focus, .btn-forwoman: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: #4d4d4d;
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;
}
/*結果頁*/
.kv1_box_resualt_beer{
width: 100%;
height: 903px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_beer.jpg);
background-size: 100%;
}
.kv1_box_resualt_mug{
width: 100%;
height: 903px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_mug.jpg);
background-size: 100%;
}
.kv1_box_resualt_flask{
width: 100%;
height: 903px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_flask.jpg);
background-size: 100%;
}
.kv1_box_resualt_funnel{
width: 100%;
height: 903px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_funnel.jpg);
background-size: 100%;
}
.kv1_box_resualt{
width: 360px;
height: auto;
margin-left: 970px;
margin-top: 240px;
}
.kv1_box_resualt h1{
font-size: 48px;
line-height: 1.1;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -2px;
margin-bottom: 10px;
}
.kv1_box_resualt h3{
font-size: 15px;
line-height: 1.2;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -1px;
}
.textbox{
width: 360px;
height: auto;
overflow: hidden;
}
.p11{
font-size: 17px;
line-height: 1.6;
color: #000;
margin-bottom: 0;
}
.btnstyle1{
display: block;
width: 350px;
height: auto;
font-size: 21px;
line-height: 2;
color: #fff;
background-color: #5f949f;
text-align: center;
}
.btnstyle1:focus, .btnstyle1:hover, .btnstyle1:active{
color: #ff0;
}
/*** 平板顯示 ***/
@media (min-width: 769px) and (max-width: 1024px) {
.pc{
display: block;
visibility: visible;
}
.m{
display: none;
visibility: hidden;
}
.kv1 {
width: 100%;
height: 480px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_bg_pc.png);
background-size: 100%;
}
.kv1_box {
width: 350px;
height: auto;
margin-left: 550px;
margin-top: 110px;
}
.kv1_box h1 {
font-size: 29px;
line-height: 1.1;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -2px;
margin-bottom: 10px;
}
.kv1_box h3 {
font-size: 15px;
line-height: 1.2;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -1px;
margin-bottom: 10px;
}
.p1 {
font-size: 15px;
line-height: 1.4;
color: #000;
margin-bottom: 0px;
}
.p2 {
font-size: 19px;
line-height: 1;
color: #000;
margin-bottom: 10px;
}
.btnstyle {
display: block;
width: 200px;
height: auto;
font-size: 19px;
line-height: 2;
color: #fff;
background-color: #5f949f;
text-align: center;
margin-top: 20px;
}
.kv2_title {
width: 92%;
height: auto;
padding: 20px;
background-color: #fff;
border: 3px solid #000;
overflow: hidden;
margin: 0 auto;
margin-bottom: 40px;
}
.kv2_qiz {
width: 90%;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.kv2_qiz_box_check {
width: 35px;
height: 35px;
position: relative;
display: inline-block;
float: left;
margin-bottom: 0;
}
.checker {
background-image: url(../images/20200903/img_kv2_check.png);
background-position: left center;
background-size: 100%;
width: 35px;
height: 35px;
background-repeat: no-repeat;
}
.kv2_qiz_box_no {
width: 58px;
height: 41px;
background-image: url(../images/20200903/img_kv2_numberbg.png);
background-size: 100%;
float: left;
font-size: 26px;
text-align: center;
font-weight: bolder;
color: #000;
padding-top: 1px;
text-indent: -5px;
margin-right: 10px;
margin-bottom: 0;
}
.p5 {
width: 280px;
font-size: 18px;
line-height: 1.4;
color: #000;
font-weight: 700;
margin-bottom: 0;
float: right;
}
.kv2_qiz_box1 {
clear: both;
width: 70%;
height: auto;
overflow: hidden;
padding: 10px;
margin-bottom: 30px;
margin: 0 auto;
}
.p51 {
width: 520px;
font-size: 18px;
line-height: 1.4;
color: #000;
font-weight: 700;
margin-bottom: 0;
float: right;
}
.kv3 {
width: 100%;
height: 580px;
background: url(../images/20200903/img_kv3_bg_pc.jpg) -440px -50px;
padding-top: 60px;
padding-bottom: 60px;
}
/*結果頁*/
.kv1_box_resualt_beer{
width: 100%;
height: 1090px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_beer.jpg);
background-size: 220%;
background-position: 50% 0%;
}
.kv1_box_resualt_mug{
width: 100%;
height: 1090px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_mug.jpg);
background-size: 220%;
background-position: 50% 0%;
}
.kv1_box_resualt_flask{
width: 100%;
height: 1090px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_flask.jpg);
background-size: 220%;
background-position: 50% 0%;
}
.kv1_box_resualt_funnel{
width: 100%;
height: 1090px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_funnel.jpg);
background-size: 220%;
background-position: 50% 0%;
}
.kv1_box_resualt {
width: 360px;
height: auto;
margin-left: 550px;
margin-top: 310px;
}
}
/*** 平板顯示 ***/
@media (min-width: 415px) and (max-width: 768px) {
.pc{
display: block;
visibility: visible;
}
.m{
display: none;
visibility: hidden;
}
.kv1 {
width: 100%;
height: 360px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_bg_pc.png);
background-size: 100%;
}
.kv1_box {
width: 350px;
height: auto;
margin-left: 410px;
margin-top: 80px;
}
.kv1_box h1 {
font-size: 21px;
line-height: 1.1;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -2px;
margin-bottom: 0;
}
.kv1_box h3 {
font-size: 13px;
line-height: 1;
text-align: left;
color: #000;
font-weight: 300;
letter-spacing: -1px;
margin-bottom: 10px;
}
.p1 {
font-size: 13px;
line-height: 1.2;
color: #000;
margin-bottom: 0px;
}
.p2 {
font-size: 13px;
line-height: 1;
color: #000;
margin-bottom: 10px;
}
.btnstyle {
display: block;
width: 160px;
height: auto;
font-size: 17px;
line-height: 2;
color: #fff;
background-color: #5f949f;
text-align: center;
margin-top: 10px;
}
.kv2_title {
width: 76%;
height: auto;
padding: 20px;
background-color: #fff;
border: 3px solid #000;
overflow: hidden;
margin: 0 auto;
margin-bottom: 40px;
}
.p3 {
font-size: 13px;
line-height: 1;
color: #000;
margin-bottom: 10px;
}
.p4 {
font-size: 19px;
line-height: 1.5;
color: #000;
font-weight: 700;
margin-bottom: 0;
}
.kv2_qiz {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.kv2_qiz_box_check {
width: 35px;
height: 35px;
position: relative;
display: inline-block;
float: left;
margin-bottom: 0;
}
.checker {
background-image: url(../images/20200903/img_kv2_check.png);
background-position: left center;
background-size: auto 100%;
width: 35px;
height: 35px;
background-repeat: no-repeat;
}
.kv2_qiz_box_no {
width: 48px;
height: 37px;
background-image: url(../images/20200903/img_kv2_numberbg.png);
background-size: 100%;
float: left;
font-size: 24px;
text-align: center;
font-weight: bolder;
color: #000;
padding-top: 0;
text-indent: -5px;
margin-right: 10px;
margin-bottom: 0;
}
.p5 {
width: 230px;
font-size: 16px;
line-height: 1.4;
color: #000;
font-weight: 700;
margin-bottom: 0;
float: right;
}
.kv2_qiz_box1 {
clear: both;
width: 90%;
height: auto;
overflow: hidden;
padding: 10px;
margin-bottom: 30px;
margin: 0 auto;
}
.kv3 {
width: 100%;
height: 580px;
background: url(../images/20200903/img_kv3_bg_pc.jpg) -410px -50px;
padding-top: 60px;
padding-bottom: 60px;
}
.bk_area_center {
width: 450px;
height: auto;
padding: 20px;
margin-left: 290px;
overflow: hidden;
}
/*結果頁*/
.kv1_box_resualt_beer{
width: 100%;
height: 740px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_beer.jpg);
background-size: 200%;
background-position: 54% 0%;
}
.kv1_box_resualt_mug{
width: 100%;
height: 740px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_mug.jpg);
background-size: 200%;
background-position: 54% 0%;
}
.kv1_box_resualt_flask{
width: 100%;
height: 740px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_flask.jpg);
background-size: 200%;
background-position: 54% 0%;
}
.kv1_box_resualt_funnel{
width: 100%;
height: 740px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_funnel.jpg);
background-size: 200%;
background-position: 54% 0%;
}
.kv1_box_resualt {
width: 360px;
height: auto;
margin-left: 370px;
margin-top: 180px;
}
.textbox {
width: 330px;
height: auto;
overflow: hidden;
}
.p11 {
font-size: 15px;
line-height: 1.4;
color: #000;
margin-bottom: 0;
}
.btnstyle1 {
display: block;
width: 300px;
height: auto;
font-size: 19px;
line-height: 2;
color: #fff;
background-color: #5f949f;
text-align: center;
}
}
/*** 手機顯示 ***/
@media only screen and (max-width: 414px) {
.pc{
display: none;
visibility: hidden;
}
.m{
display: block;
visibility: visible;
}
.kv1 {
width: 100%;
height: 790px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_bg_m.png);
background-size: 100%;
}
.kv1_box {
width: 90%;
height: auto;
margin: 0 auto;
background-color: rgba(255,255,255,0.8);
padding: 5%;
margin-top: 95%;
}
.p1 {
font-size: 15px;
line-height: 1.5;
color: #000;
margin-bottom: 0;
}
.p2 {
font-size: 19px;
line-height: 1.5;
color: #000;
margin-bottom: 10px;
}
.btnstyle {
display: block;
width: 100%;
height: auto;
font-size: 21px;
line-height: 2;
color: #fff;
background-color: #5f949f;
text-align: center;
}
.kv2 {
width: 100%;
height: auto;
overflow: hidden;
background-color: #f4f4f1;
padding-top: 60px;
padding-bottom: 60px;
}
.kv2_title {
width: 76%;
height: auto;
padding: 20px 10px;
background-color: #fff;
border: 3px solid #000;
overflow: hidden;
margin: 0 auto;
margin-bottom: 40px;
}
.p3 {
font-size: 14px;
line-height: 1.4;
color: #000;
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
}
.p4 {
font-size: 17px;
line-height: 1.5;
color: #000;
font-weight: 700;
margin-bottom: 0;
}
.kv2_qiz_box {
clear: both;
width: 100%;
height: auto;
overflow: hidden;
padding: 10px;
margin-bottom: 10px;
}
.kv2_qiz_box_check {
width: 35px;
height: 35px;
position: relative;
display: inline-block;
float: left;
margin-bottom: 0;
}
.checker {
background-image: url(../images/20200903/img_kv2_check.png);
background-position: left center;
background-size: auto 100%;
width: 35px;
height: 35px;
background-repeat: no-repeat;
}
.kv2_qiz_box_no {
width: 50px;
height: 38px;
background-image: url(../images/20200903/img_kv2_numberbg.png);
background-size: 100%;
float: left;
font-size: 22px;
text-align: center;
font-weight: bolder;
color: #000;
padding-top: 2px;
text-indent: -5px;
margin-right: 5px;
margin-bottom: 0;
}
.p5 {
width: 72%;
font-size: 18px;
line-height: 1.4;
color: #000;
font-weight: 700;
margin-bottom: 0;
float: right;
}
.kv2_qiz_box1 {
clear: both;
width: 90%;
height: auto;
overflow: hidden;
padding: 10px;
margin-bottom: 30px;
margin: 0 auto;
}
.p51 {
width: 82%;
font-size: 18px;
line-height: 1.4;
color: #000;
font-weight: 700;
margin-bottom: 0;
float: right;
}
.kv2_qiz_box_ans {
width: 100%;
height: 205px;
overflow: hidden;
background-image: url(../images/20200903/img_kv2_ans.png);
background-size: 100%;
margin: 0 auto;
padding: 30px;
clear: both;
}
.p6 {
font-size: 13px;
font-weight: 900;
line-height: 2;
text-align: center;
margin-bottom: 0;
}
.kv3 {
width: 100%;
height: 680px;
background: url(../images/20200903/img_kv3_bg_m.jpg) -440px -20px;
padding-top: 160px;
padding-bottom: 60px;
}
/*註冊區*/
.bk_area_center{
width: 90%;
height: auto;
background-color: rgba(255,255,255,0.8);
padding: 0 20px 3px 20px;
margin: 0 auto;
}
.title1 {
font-size: 25px;
font-weight: 900;
line-height: 49px;
margin-bottom: 0;
color: #fd8046;
}
.title2{
font-size: 30px;
font-weight: 900;
line-height: 30px;
margin-bottom: 10px;
color: #000;
}
.bk_area_bottom{
width: 100%;
height: 50px;
background-color: #000;
margin: 0 auto;
}
.register-box{
width: 100%;
padding: 0;
}
.register-box:before, .register-box:after{
display: none;
}
.resualt-block{
width: 100%;
}
.resualt-box{
margin: auto;
width: 95%;
}
.resualt-box .match{
width: 90%;
}
.btn-linkto{
width: 100%;
}
.resualt-box{
padding: 20px 15px;
}
/*結果頁*/
.kv1_box_resualt_beer{
width: 100%;
height: 760px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_beer_m.jpg);
background-size: 100%;
}
.kv1_box_resualt_mug{
width: 100%;
height: 760px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_mug_m.jpg);
background-size: 100%;
}
.kv1_box_resualt_flask{
width: 100%;
height: 760px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_flask_m.jpg);
background-size: 100%;
}
.kv1_box_resualt_funnel{
width: 100%;
height: 760px;
overflow: hidden;
background-image: url(../images/20200903/img_kv1_resualt_funnel_m.jpg);
background-size: 100%;
}
.kv1_box_resualt {
width: 90%;
height: auto;
background: rgba(255,255,255,0.8);
margin: 0 auto;
padding: 5%;
margin-top: 75%;
}
.textbox {
width: 100%;
height: auto;
overflow: hidden;
}
.p11 {
font-size: 15px;
line-height: 1.4;
color: #000;
margin-bottom: 0;
}
}