#wrapper{position: relative;font-weight:500;color: #333;}
.container02 {background-color:#1dbac0;padding-bottom: 50px; }
.circle01{  width:52%;  position:absolute;  display:flex;  justify-content: center;  align-items: center;  margin: 0 auto;  top:-2%;  left:50%;  margin-left:-34%; z-index: 2; }
.circle01:before {  border-radius: 50%;  width: 100%;  padding-bottom: 100%;  background: -webkit-linear-gradient(top, #fadc03 50%,#ffe842 100%);  background: linear-gradient(top, #fadc03 50%,#ffe842 100%);  background: -o-linear-gradient(top, #fadc03 50%,#ffe842 100%);  background: -mos-linear-gradient(top, #fadc03 50%,#ffe842 100%);    content: "";  position: absolute;  z-index: -1;}
.circle02 {  width:50%;  position:absolute;  display:flex;  justify-content: center;  align-items: center;  margin: 0 auto;  top:-7%;  left:50%;  margin-left:-15%;z-index: 1;  }
.circle02:before {  border-radius: 50%;  width: 100%;  padding-bottom: 100%;  background: -webkit-linear-gradient(top, #1dbac0 50%,#55b6a8 100%);  background: linear-gradient(top, #1dbac0 50%,#55b6a8 100%);  background: -o-linear-gradient(top, #1dbac0 50%,#55b6a8 100%);  background: -mos-linear-gradient(top, #1dbac0 50%,#55b6a8 100%);    content: "";  position: absolute;  z-index: -1;}

/*主視覺*/
.main_visual{ max-width:1000px;position:relative; z-index: 5;display: flex;flex-direction: row;justify-content:space-around;margin:auto;top:0;bottom: 0;left: 0;right: 0;background-image: url(/images/event/2019/searchome_app/bg.png);background-repeat: no-repeat;padding: 20px;box-sizing: border-box;}
.box_left{width:50%;margin-top:50px;text-align:center;position: relative;}
.box_right{display:block;}
.box_left p , .box_right p{text-align: center; font-size: 18px; color: #544d16;font-weight: 600;}
.scan{margin: 20px;display: inline-block;box-shadow: 0px 0px 10px rgba(0,0,0,.2);background-color: #fff;}
.btnAppDownload a{margin: 5px 10px; width: 150px; height: 50px;}

/*活動說明*/
.event_rule{display: block;max-width: 1000px; margin: 0 auto;padding:10px 50px; box-sizing: border-box;}
.event_rule h2{font-size: 1.8em; color:#0bafb2;margin-top: 30px;font-weight: 600;}
.event_rule p{font-size: 1.5em;font-weight: 600;}

/*活動步驟*/
.stepbystep{ display: flex;flex-direction: row; justify-content:center;flex-wrap: wrap; width: 100%; padding: 30px 20px; box-sizing: border-box; background-color: #333; border-radius: 20px;margin-top: 20px;text-align: center;}
.stepbystep div{width:30%; margin:0 10px;color: #fff;}
.stepbystep div span{display: inline-block; width:60px; height:60px;line-height:60px;font-size: 1.8em;border-radius: 50%;border:3px solid #fadc03;color: #fadc03;position: relative;font-weight: 700;}
.stepbystep div span:after{display: block; content: "STEP";width:40px; height:16px;line-height: 16px; font-size: 14px; background-color:#333; position:absolute;top:50px;left:10px;}
.stepbystep h3{font-size:1.5em;line-height: 2em;}
.stepbystep a {display:block;width: 200px; font-size: 1.5em;color: #fadc03; padding: 5px 30px; border:1px solid  #fadc03; border-radius:30px;margin: 0 auto;margin-top:30px;}
.stepbystep a:hover , .btn_send:hover{background-color: #fadc03; color: #333;}

/*獎品*/
.gift{ display:flex; flex-direction: row;}
.gift div{display: inline-block;}
.gift div:first-child{margin-right:50px;}
.gift img{display: inline-block;float: left;margin-right: 20px;}
.gift h3{ font-size: 1.5em; width:40%;float:left;margin-top: 30px;font-weight: 600;}
.gift p{width:40%;float: left;font-size: 18px;}

/*注意事項*/
.notic{width:100%; background-color: #09afb2;color: #fff;margin-top: 20px;}
.notic ul{display: block; max-width: 1000px; margin: 0 auto; padding:50px; box-sizing: border-box;}
.notic h2{font-size: 1.8em;font-weight: 600;}
.notic ul li{list-style-type: decimal; list-style-position:outside; margin-left: 20px;margin-top: 15px;font-weight:400;font-size: 15px;}

/*上傳圖片*/
.upload_box{ color: #fff;text-align: center;position: relative;}
.upload_box strong{font-size: 1.8em; line-height:3em;}
.upload_btn a{display: block; width: 200px;height: 200px; margin: 0 auto;background-color: #107476; color: #fadc03 ; font-size: 1.2em; line-height:200px;text-decoration: underline;position: relative;margin-bottom: 30px;}

.btn_send {display:block;width:200px; font-size: 1.5em;color: #fadc03; padding: 5px 10px; border:1px solid  #fadc03; border-radius:30px; margin: 0 auto;text-align: center;margin-top:30px;}

/*寄件人填寫資訊*/
.block {width: 300px; margin: 0 auto; margin-top: 20px;}
.block h3{ color:#fff; font-size: 1.2em;}
input{display:block; width:100%; border:0px; box-sizing: border-box;height: 40px; line-height: 40px; padding:0 10px;border-radius:5px; color:#333; font-size:1em; );-webkit-transition: .18s ease-out;-moz-transition: .18s ease-out;  -o-transition: .18s ease-out;  transition: .18s ease-out;font-family:"Noto Sans SC Sliced";}
.regist_content input:hover , .login_content input:focus , .login_content button:hover{    box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);-webkit-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);	-moz-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);-o-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);	-ms-box-shadow: 0px 0px 8px 5px rgba(0,0,0,.1);outline: none;}
:-moz-placeholder {color: #666; }
::-moz-placeholder { color: #666;}
:-ms-input-placeholder {color: #666  !important;}
::placeholder { color: #666;}

@media screen and (max-width:1680px) and (min-width:1367px) {
    .circle01{  top:2%;} 
    .circle02{  top:0%;} 
}

@media screen and (max-width:1366px)  and (min-width:1281px){
     .circle01{  top:5%;} 
    .circle02{  top:3%;} 
}

@media screen and (max-width:1280px)  and (min-width:1025px){
     .circle01{  top:4%; margin-left:-40%;} 
     .circle02{  top:4%; margin-left:-10%;}     
}

@media screen and (max-width:1024px) and (min-width:1000px){
     .circle01{  top:5%; margin-left:-47%;} 
     .circle02{  top:4%; margin-left:-10%;}     
}


@media screen and (max-width:999px) and (min-width:640px){
    .circle01{  width:85%; top:2%; margin-left:-47%;} 
    .circle02{  width: 80%; top:2%; margin-left:-32%;}     
    .main_visual{flex-direction: column; justify-content: center;}
    .box_left{width: 100%;margin-top: 20px;}
    .box_right{text-align: center;margin-top:30px;}
    .stepbystep {flex-direction: column;justify-content: center;margin: 0;margin-top: 30px;}
    .stepbystep div{width:100%;}
    .gift h3 , .gift p{  width:100%;}
    .gift div+div{ margin-top:20px;}
    .gift div+div h3 { margin-top:55px;}

 
}

@media screen and (max-width:639px) and (min-width:320px){
    .circle01{  width:85%; top:2%; margin-left:-49%;} 
    .circle02{  width: 80%; top:2%; margin-left:-30%;}     
    .main_visual{flex-direction:column; justify-content: center;}
    .box_left{width:100%;margin-top: 20px;}
    .box_right{text-align: center;margin-top:30px;}
    .box_right img{width:95%;}
    .stepbystep {flex-direction: column;justify-content: center;margin: 0;margin-top: 30px;}
    .stepbystep div{width:100%;}
    .gift {flex-direction: column; justify-content: center;text-align: center;}
    .gift div{width: 100%;}
    .gift img{float:none;margin-right:0px;}
    .gift h3 , .gift p{  width:100%;}
    .gift div+div{ margin-top:50px;}
    .gift div+div h3 { margin-top:20px;}
 
}
 
@media screen and (max-width:414px) and (min-width:320px){ 
    .circle01{ display: none;} 
    .circle02{ display: none;}   
    .main_visual{background-color: #fadc03;}
    .title img{width:90%;text-align: center; margin: 0 auto;}
    .btnAppDownload a{display: block;text-align: center;margin: 0 auto;margin-bottom: 20px;}
    .box_right img{width:100%;}
    .event_rule{padding: 20px 30px;}
    .stepbystep{width:100%;}
    .stepbystep div{margin: 10px 0;}
    .notic ul{padding:20px;}    
    .upload_box strong{font-size: 1.5em;}
}

@media screen and (max-width:320px) and (min-width:320px) {
    .stepbystep a {display:block;width: 150px;}
    .block {width: 280px; }
}
/* 分享元件 begin */
.fb_share { position:absolute; right: calc(50% - 570px); top: 1.2em; z-index:6; }
.fb_base { float: left; display: inline-block; }
.line_base { float: left; display: inline-block; margin-left: 4px; }
@media screen and (max-width:660px) {
    .fb_share { display:none; }
}
/* 分享元件 end */
.errorMsg {
    display: block;
    font-size: 20px;
    line-height: 1.5em;
    text-align: center;
    padding-bottom: 15px;
    color: red;
}