/*---漢堡選單----*/
.sidenav {  height: 100%; width: 0;  position: fixed;  z-index:9999;  top: 0;  right: 0;  background-color:#0b4539;  overflow-x: hidden;  transition: 0.5s;  padding-top: 60px;}
.sidenav a {  padding: 8px 8px 10px 30px;  text-decoration: none;  font-size: 20px;  color:#fff;  display: block;  transition: 0.3s;}
.sidenav a:hover , #hambger span:hover{color:#eed7ce;}
.sidenav .closebtn {  position: absolute;  top: 0;  right: 25px;  font-size: 36px;  margin-left: 50px;}

#hambger {  display:none;  transition: margin-right .5s;  padding:10px;  box-sizing: border-box;  position: absolute;   z-index: 99;  right:0px;  color:#cfa989;  top:0px;}
#hambger span{display:block; background-color:#2b2b2b;font-size: 16px; border-radius: 50px;padding: 5px 10px; color: #fff;font-weight: 500;}

.mobile_bottom_fix{display: block; width: 100%; background-color: #000;height:45px;text-align:center; }
.mobile_bottom_fix a{color: #fff;display: inline-block; padding:15px;text-decoration: none; }

.event_container{display: block;width: 100%; background-image:url(/images/consumer/2024/bg.jpg);background-size:contain;background-position: top center;position: relative;color: #2b2b2b;padding-bottom:80px;}
.event_container nav{display: block; width: 100%; height: 50px; line-height: 50px;background-color: #f7f0e9;margin-bottom: 50px;}
.event_container nav ul{text-align: right;}
.event_container nav ul li{display: inline-block; margin:0 10px;}
.event_container nav ul li a{font-size: 20px;font-weight: 500;padding: 5px 20px;border-radius: 50px;}
.event_container nav ul li a:hover{background-color: #000;color: #fff;}
.event_container img{width: 100%;}
.event_logo{display: block;width: 131px; height:121px;  position:absolute; left: 10px; top:60px;background-image: url(/images/consumer/2024/logo.png);}
.event_page_visual{display: block; max-width: 900px; height: 600px; margin:  0 auto;background-image:url(/images/consumer/2024/main_visual.png);background-size: contain;background-repeat: no-repeat;margin-bottom: 50px;}
.desc_content{display: block; max-width: 1200px; margin: 0 auto;}
.desc_content section{display: block; width: 100%; padding:80px 100px; box-sizing: border-box; border-radius:50px;background-color: #eed7ce;font-size: 22px;}
.event_method h2 , .notice_desc h2 , .sponser h2{display: block; width: 310px; height: 55px;margin:auto; margin-bottom:50px;text-align: center;}
.event_method p{text-align: center;font-weight: 500;font-size: 24px;margin-bottom:30px;}
.event_method ul li {margin-top: 10px;}
.event_method ul li span{display:inline-block; width:70px;background-color: #fff; border-radius: 30px;font-size: 16px;text-align: center;font-weight: 500;margin-right: 15px;}

.btn_style{display: block; width: 300px; height:50px; line-height: 50px; font-weight:500; border-radius: 50px;text-align: center;margin: 0 auto;margin-top: 50px;}
.orange {background-color: #f96e47;color: #fff;}
.white {background-color: #fff;color: #000;}
.vanilla {background-color: #eed7ce;color: #000;}
.orange:hover {background-color: #000;color:#f96e47;}
.white:hover {background-color: #676767;color:#fff;}
.vanilla:hover {background-color:#d19178;color:#fff;}

.prize em{display:block;max-width:700px;height:54px; line-height:54px; background-color: #fff; border:1px solid #2b2b2b;box-sizing: border-box; border-radius: 10px;margin: 0 auto;overflow: hidden;font-weight: 500;box-shadow: 5px 5px 0px #ccb0a5;margin-bottom:50px;}
.prize em:before{display: inline-block; content: "填寫禮"; background-color: #2b2b2b; padding: 0 10px;color: #fff;margin-right: 10px;}
.prize{display: block; margin-top:100px;}
.prize_list{display: flex;    flex-wrap: wrap;    justify-content: flex-start;    margin-bottom: 80px;}
.prize_list div{width:17%;    margin:15px;    text-align: center;font-size: 16px;}
.prize_list div p{font-size: 16px;font-weight: 400;}
.prize_list div img{border-radius: 15px;}

.desc_content section+section{background-color:#2b2b2b; }
.desc_content section+section+section{background-color:#fff; }
.notice_desc ul { list-style-type: decimal;font-size: 16px;margin-left: 20px;}
.notice_desc ul li{ color: #fff;list-style-position:outside;margin-bottom: 10px;}

.desc_content section+section+section.sponser div{display: flex;align-items: center; /*justify-content:center;*/}

.sponser a{display:inline-block; width: 150px;margin: 0 15px;}
.sponser span a{display: inline-block; width: 25px; height: 25px;}

.sponser{position: relative;}
.sponser div{display: block;max-width:1000px;margin: 0 auto;position: relative;}
.btn_arrow{position: absolute;top:30%;}
.btn_arrow.left{left: -15px;z-index:99;}
.btn_arrow.right{right: -15px;z-index:99;}

.inner_logo{display: block; width: 250px; height: 50px;position: absolute;}

section.questionnaire{background-color: #2b2b2b;color: #fff;}
.form{display: flex;flex-wrap: wrap;/*justify-content:space-evenly;*/margin-top:30px;}
/*.form div{display: block; width:35%;margin-bottom: 8px;}*/
.form div{display: flex; width:500px;margin-bottom: 0;LEFT:25%}
section.questionnaire h3{display: block;text-align: center;color: #eed7ce;font-weight: 500; width: 200px; height: 35px; border:2px solid #eed7ce; border-radius: 50px;margin: 0 auto;line-height: 35px;font-size: 18px;}
section.questionnaire h4{display: block; font-size:28px;font-weight: 500;text-align: center; margin-top:60px;}
/*------checkbox樣式------*/
.squaredThree {  position: relative; }
.squaredThree label {  display: inline-block;  float: left;	  width: 18px;  height: 18px;  cursor: pointer;  position: absolute;  top:8px;  left:0;  background: linear-gradient(to bottom, ##1f1f1f 0%, #000000 100%);  border-radius: 4px;  border:1px solid #fff;}
.squaredThree label:after {  content: '';  width: 9px;  height: 5px;  position: absolute;  top: 4px;  left: 4px;  border: 2px solid #fcfff4;  border-top: none;  border-right: none;  background: transparent;  opacity: 0;  transform: rotate(-45deg);}
.squaredThree label:hover::after {  opacity: 0.3;}
.squaredThree input{width: auto; width:20px;position: relative; }
.squaredThree input[type=checkbox] {  visibility: hidden;}
.squaredThree input[type=checkbox]:checked + label:after {  opacity: 1;}
.squaredThree strong{margin-left: 10px;}

.block.reason  {display: block; position: relative;}
.reason input {	display: block;	margin: 0 auto;	margin-top:20px;width: 40%;	border-style: none;border-bottom: 1px solid #fff;  
background-color:#2b2b2b;box-sizing: border-box;height: 45px;line-height: 45px;padding: 0 10px;color: #fff;font-size: 1em;}
.block.reason span{display: block; font-size: 16px; text-align: right;width: 40%;margin: 0 auto;margin-top: 10px;}
.switch_page_btn{display: flex; justify-content:center;}
.switch_page_btn .btn_style{margin: 50px 30px;}

.serial_number{display: block;font-size: 14px;text-align: center;color: #999;}

.survey_desc {display: block;width:60%;margin: 0 auto;margin-top: 50px;box-sizing: border-box;color: #fff;border-radius: 15px;
overflow: hidden;font-weight: 500;}

/*------表格------*/
.survey_desc .block{display: block;position: relative;margin-bottom:30px;}
.survey_desc .form{display: block; width: 50%; font-size: 1.25em;margin: 0 auto;padding: 50px 20px;position: relative;box-sizing: border-box;}

.count{display: block;text-align: center; margin-top: 15px;}


/*------input樣式------*/
label{display:block; font-weight: 500; }
.item{color: #777777;}
input{width:100%;  box-sizing: border-box; line-height: 40px; padding:0 10px; color:#fff; 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";background-color: #2b2b2b;border:0;border-bottom:1px solid #fff;}
:-moz-placeholder {color: #666; }
::-moz-placeholder { color:  #666;}
:-ms-input-placeholder {color:#666 !important;}
::placeholder { color: #666;}
input:hover , select: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;}
#code{display: flex;width:45%;float: left;margin-right: 20px;}
textarea {width:100%;height:200px; padding: 10px;box-sizing: border-box;font-family:"Noto Sans SC Sliced";border-radius: 5px;border:1px solid #000;}
.auto_create{display:inline-block; width: 45%;height: 40px; border:1px solid #e0e0e0;border-radius: 5px;}

/*------radio樣式------*/
.radio {display: inline-block;position: relative;margin-right:15px;margin-top: 5px;}
.radio input[type=radio] {  position: absolute;  opacity: 0;}
.radio input[type=radio] + .radio-label:before { content: "";background:#2b2b2b;border-radius: 100%;  border: 1px solid #fff;  display: inline-block;  width:15px;  height:15px;  position: relative;  top:0px;  margin-right:5px;  cursor: pointer;  text-align: center;  transition: all 250ms ease;}
.radio input[type=radio]:checked + .radio-label:before {  background-color: #17002e;  box-shadow: inset 0 0 0 4px #f4f4f4;}
.radio input[type=radio]:focus + .radio-label:before {  outline: none;  border-color: #3197ee;}
.radio input[type=radio]:disabled + .radio-label:before {  box-shadow: inset 0 0 0 4px #f4f4f4;  border-color: #b4b4b4;  background: #b4b4b4;}

/*------checkbox樣式------*/
.squaredThree {  position: relative; }
.squaredThree label {  display: inline-block;  float: left;	  width: 20px;  height: 20px;  cursor: pointer;  position: absolute;  top:5px;  left: 0;  background: linear-gradient(to bottom, ##1f1f1f 0%, #000000 100%);  border-radius: 4px;  border:2px solid #fff;}
.squaredThree label:after {  content: '';  width: 9px;  height: 5px;  position: absolute;  top: 4px;  left: 4px;  border: 3px solid #fcfff4;  border-top: none;  border-right: none;  background: transparent;  opacity: 0;  transform: rotate(-45deg);}
.squaredThree label:hover::after {  opacity: 0.3;}
.squaredThree input{width: auto; width:20px;position: relative; }
.squaredThree input[type=checkbox] {  visibility: hidden;}
.squaredThree input[type=checkbox]:checked + label:after {  opacity: 1;}
.squaredThree p{display: inline-block;}
.squaredThree p a{color: #f1d2bb;text-decoration: underline;}

@media (min-width:320px) and (max-width:1024px) {
	.event_logo{top: 20px;}
	#hambger {display: block;}
	.event_container nav{display: none;}
	.event_container{padding-top:60px;}
	.event_method ul li span{display: block;margin: 0 auto;margin-top:15px;}	
	.event_method ul li {display: block;text-align: center;}
	.prize_list{justify-content: space-between;}
	.prize_list div{width:30%;margin: 15px 0;}
	.sponser a:nth-child(2){display:none;}
	.form div{width:50%;}
	.survey_desc{width:100%;}
	.btn_style{margin-top: 30px;}
	
}

@media (min-width:320px) and (max-width:780px) {
	.event_page_visual{height: 520px;margin-bottom: 30px;}
	.desc_content section{padding:50px 30px;}
	.prize em:before{display: block;text-align: center;margin-right: 0;}
	.prize em{height:108px;text-align: center;font-size: 20px;}
	.sponser a:nth-child(3){display:none;}
	.reason input , .block.reason span{width: 50%;}
}

@media (min-width:320px) and (max-width:640px) {
	.event_page_visual{height: 430px;}
	.sponser a:nth-child(4){display:none;}
	.reason input , .block.reason span{width:70%;}
/*	.form div{width:100%;}*/
	.form div{width:80%;}
	section.questionnaire h4{font-size: 24px;}
}

@media (min-width:320px) and (max-width:460px) {
	.desc_content section{font-size: 18px;}
	.event_method p{font-size: 22px;}
	.event_logo{display: none;}
	.event_page_visual{height: 280px;margin-bottom:10px;}
	.prize em{height:108px;line-height:35px;}
	.prize_list div{width:45%;}
	.sponser a:nth-child(5){display:none;}
	
	.reason input , .block.reason span{width:100%;}
	.switch_page_btn{display: block;}
	.switch_page_btn .btn_style{margin: 0 auto;margin-top: 30px;}
	.serial_number{margin-top:30px;}
}

@media (min-width:320px) and (max-width:390px) {
		.event_page_visual{height: 260px;}
	.event_container img{width: 90%;}
	.prize_list div{width:200px;margin: 0 auto;}
	.btn_style{width:100%;}
}

@media (max-width:932px) {
	.btn_style {
		font-size: smaller;
	}
}