img{width: 100%;}
.IsWeb .container.content{padding-top: 0;}

/*------手機NAV------*/

.sidenav {width: 0;position: fixed;z-index: 1;top: 0;right: 0;background-color: #17002e;  overflow-x: hidden; transition: 0.5s;  padding-top: 60px;}
.sidenav a {  padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #818181;  display: block;  transition: 0.3s;}
.sidenav a:hover {  color: #f1f1f1;}
.sidenav .closebtn {position: absolute;top: 0;  right: 25px;font-size: 36px;margin-left: 50px;}
.IsWeb #main {transition: margin-right .5s;padding:5px 10px;text-align: right;background-color: #2e0e38;  color: #fff; height:45px}
.IsWeb #main a{display: block; width: 120px; height:36px;position: absolute;top:15px;}

.sidenav.openNav {height: 100%;width: 250px;display: block; z-index: 10;}
.hamburger{display: none;}

@media screen and (max-height: 450px) { 
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}

/*------主視覺------*/
.event_wrapper{display: block; width: 100%;background-color: #4f274a;overflow: hidden;}
.event_header{display: block; width: 100%;height:600px;background-repeat: no-repeat;background: #2d0d38;background: -moz-linear-gradient(top, #2d0d38 0%, #4a2247 34%, #704a61 67%, #704a61 67%, #4f274a 100%); background: -webkit-linear-gradient(top, #2d0d38 0%,#4a2247 34%,#704a61 67%,#704a61 67%,#4f274a 100%); background: linear-gradient(to bottom, #2d0d38 0%,#4a2247 34%,#704a61 67%,#704a61 67%,#4f274a 100%);position: relative;}
.event_header span{display: block;width: 100%;height: 0;padding-bottom:32%; background-image: url(../../../images/consumer/2022/bg.png);background-position: top;background-repeat: no-repeat;}
.main_visual {display: block;width: 100%;max-width:920px; position: absolute;top: 0;top:30px;left: 0;right: 0;margin: auto;}

/*------內容------*/
.event_inner{display: block;width: 100%;padding: 50px 0;box-sizing: border-box;position: relative;}
.event_inner nav{display: block; max-width: 1200px; margin: 0 auto;color: #fff;text-align: center;font-weight: 500;}
.event_inner nav i{display:block;  font-size:1.87em; margin-bottom: 10px;position: relative;}
.event_inner nav i:before  , .event_inner nav i:after{display:inline-block; content: "";width:20%; height: 1px; background-color:rgba(255,255,255,.5);position:absolute;top:50%;}
.event_inner nav i:before {left:220px;}
.event_inner nav i:after {right:220px;}
.event_inner nav ul{display: flex; justify-content: center;margin-left: 30px;}
.event_inner nav ul li{margin: 0 30px;}
.event_inner nav ul li a{display: block;  color: #fff;font-size:2.25em;line-height: 1.2em;position: relative;}
.event_inner nav ul li a span{display:block;width: 85px;height: 20px;line-height: 20px; font-size:15px; transform: rotate(90deg);position: absolute;left: -60px;top:40px;text-align: start;}
.event_inner nav ul li a:hover , .event_content nav ul li a:focus{color:#cc8e97; }

.desc{display: block; width:51%; margin: 0 auto;padding: 15px;background-color:#cc8e97; font-size: 1.25em;text-align: center;margin-top:50px;color: #17002e;font-weight: 500;position: relative;}
.desc:before , .desc:after{display: block; content: "";width:170px; height:120px;background-color:#cc8e97;position: absolute;top:50%;margin-top: -140px;}
.desc:before{transform:skewY(25deg);transform-origin:left;left:-173px;}
.desc:after{transform:skewY(-25deg);transform-origin:right;right:-173px;}

.event_content{display: block; max-width: 1000px; margin: 0 auto;padding:20px 50px 50px 50px;box-sizing: border-box;color: #fff;position: relative;}
.event_content h2{display: block;  font-size: 1.87em;font-weight:600;color: #cc8e97;text-align: center;margin: 0 30px;margin-top:80px;}
.event_content h2 i{display: inline-block;width:18.5%; height: 1px; background-color:#cc8e97;position: relative;top:25px;line-height: 40px;}
.event_content h2 i.line_left{left:-30px;}
.event_content h2 i.line_right{right:-30px;}
.event_content h2 span{display:inline-block; width: 0px; height:0px;   border:12px solid;position: relative;}
.event_content h2 i.line_left span{ border-color: transparent #cc8e97 transparent transparent;top:-21px;left:-70px;}
.event_content h2 i.line_right span{border-color: transparent transparent transparent #cc8e97;top:-21px;right:-70px;}
.event_content h2+p{font-size: 1.37em; text-align: center;margin-top:20px;margin-bottom:20px;}
.event_content em{display: block;margin-bottom: 10px;font-size: 1.37em;margin-left:100px;}
.event_content em span{display: inline-block;font-size:16px; padding:3px 15px; border-radius: 30px; border:1px solid #cc8e97;color: #cc8e97;margin-right: 10px;}
.btn_green{display: block; max-width:350px;height: 45px; margin:0 auto; background-color: #40c9a1; border-radius: 30px;text-align: center;color: #fff; line-height: 45px;font-size: 1.25em;font-weight: 500;margin-top:30px;}
.btn_green:hover{background-color:  #cc8e97;}

/*------活動贈品------*/
.gift{display:block; background-color: #17002e;border-radius: 15px;overflow: hidden;position: relative;text-align: center;margin-top: 50px;}
.gift div{display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-start;}
.gift div div{width: 150px;margin:20px 10px;}
.gift div div img{display: block; border-radius: 5%;margin-bottom:15px; }
.gift h3{display:block;max-width: 300px;height: 60px; background-color: #cc8e97;border-radius: 20px;font-size: 1.37em;margin: 0 auto;text-align: center; line-height:75px;position: relative;top: -15px;}

/*------活領獎須知------*/
.rule{display: block; background-color: #1b1b1b;padding-bottom:50px;}
.rule ul{margin-top:30px;margin-left: 20px;}
.rule ul li{list-style-type: decimal;margin-top:15px; font-size: 15px;}

/*------贊助單位------*/
.slider{display: block;width: 100%;position: relative;}
.sponser{display:flex;/*justify-content:center;*/position: relative;margin-top: 50px;max-width:750px;}
/*.sponser a{display:block;*//*text-align: center;*/ /*width: 120px;margin:0  15px;}*/
.sponser_wrapper div{display:block;/*text-align: center;*/ width: 120px;margin:0  15px;}
.arrow {position: absolute;padding: 1.5rem;box-shadow: 1px -1px 2px 2px #fff inset;-webkit-box-shadow: 2px -2px #fff inset;/*border: solid transparent;*/    border-width: 0 0 2rem 2rem;transition: .2s;z-index: 5;  top:10%;}
.arrow-left {  left:0px; transform: rotate(45deg);}
.arrow-right {right:620px; transform: rotate(225deg);}
.arrow:hover{box-shadow: 1px -1px 2px 2px  #cc8e97 inset;-webkit-box-shadow: 2px -2px  #cc8e97 inset;}

/*------測驗內容------*/
.survey_desc{display: block; max-width:1000px; margin: 0 auto;margin-top:50px; box-sizing: border-box;background-color: #17002e;color: #fff;border-radius: 15px;overflow: hidden;padding-bottom:80px;font-weight: 500;}
.survey_desc p{display: block;background-color:#cc8e97;padding:50px 0px;font-size: 1.37em;text-align: center;padding:50px;}
.survey_option{display: flex;justify-content: center;margin-top: 50px;flex-wrap: wrap;}
.survey_option div{width: 200px;margin: 0px 35px;text-align: center;}
.survey_option div span{display: block; width: 200px; height: 200px; border-radius: 100%; border:2px solid #fff;}
.survey_option div span em{display: block; position: relative; top:-60px;font-size: 1.25em;}

.survey_option div span.home_appliances img{width: 90%;}
.survey_option div span em.home_appliances{display: block; position: relative; top:-35px;font-size: 1.25em;}

/*------表格------*/
.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;}
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: #17002e;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; cursor:pointer;}
.radio input[type=radio] + .radio-label:before { content: "";background: #fff;border-radius: 100%;  border: 1px solid #000;  display: inline-block;  width:18px;  height:18px;  position: relative;  top:3px;  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;}
.squaredThree input[type=checkbox] + label + strong {
	cursor: pointer;
}

/*------其他------*/
.disable_click {pointer-events: none;opacity: 0.4;}
.gift div div a {color: white;}
.survey_desc label.error {color: #ff0000;font-weight: normal;font-size: 16px;}
.survey_desc .radio label.error {color: red;font-weight: normal;font-size: 16px;}
.survey_desc .message {	color: red;	text-align: center;}
.radio .radio_other {width: 55%;margin: 0 10px;}
.squaredThree .squaredThree_other {width: 55%;margin: 0 10px;}
/*其他-Swipper輪播的箭頭在IOS的瀏覽器上會顯示藍框，因此使用下面的樣式語法，使藍框不顯示*/
a, a:visited { outline: none; }
a:hover,a:active,a:focus {  outline: none;}
.radio input[type=radio]+label{cursor: pointer;}

@media (min-width:1312px) and (max-width:1363px) {
.desc:before , .desc:after{width:150px; height:150px;margin-top: -145px;}
.desc:before{left;left:-153px;}
.desc:after{right:-153px;}
}

@media (min-width:686px) and (max-width:1311px) {
.desc:before , .desc:after{width:150px; height:180px;margin-top: -160px;}
.desc:before{left:-153px;}
.desc:after{right:-153px;}		
}


@media (min-width:320px) and (max-width:1100px) {
.desc:before , .desc:after{display: none;}
.desc{width: 100%; padding: 20px; box-sizing: border-box;}
.hamburger{display: block;}
.event_inner nav{display: none;}	
.survey_desc{margin:50px 20px;}
.survey_option div{margin: 0 20px;}
.survey_desc p{padding:30px;}

/*------其他------*/
#main {transition: margin-right .5s;padding: 5px 10px;text-align: right;background-color: #2e0e38;color: #fff;height: 45px;position: fixed;z-index: 5;width: 98%;}
#main a {display: block;width: 120px;height: 36px;position: absolute;top: 15px;}
/*其他-因IOS瞄點定位，不計算position:fixed;高度，因此使用下面樣式語法進行定位調整*/
:target {display: block;position: relative;top: 0;visibility: hidden;}


}

@media (min-width:320px) and (max-width:960px) {
.event_header{height:0px;padding-bottom:60%;}
.event_content{padding: 25px;}
.event_content em{margin-left:0px;}
/*.sponser a:nth-child(5){display:none;}*/
}

@media (min-width:320px) and (max-width:820px) {
.event_content h2 i{width:22%;}
/*.sponser a:nth-child(4){display:none;}*/
.event_content em{text-align: center;}
.event_content em span{margin-top: 15px;}
.event_content em strong{display: block;margin-top: 10px;}
.survey_desc .form{width:70%;}
.survey_option div{width: 150px;}	
.survey_option div span{width: 150px; height: 150px;margin: 0 auto;}
.survey_option div span em{top: -50px;}
.survey_option div{width:200px;margin-bottom: 50px;}	

/*------贊助單位------*/
.sponser{display:flex;/*justify-content:center;*/position: relative;margin-top: 50px;max-width:450px;}
}

@media (min-width:320px) and (max-width:640px) {
.event_content h2 i.line_left span{left:-50px;}
.event_content h2 i.line_right span{right:-50px;}
/*.sponser a:nth-child(3){display:none;}*/
.survey_desc p{font-size: 1.37em;}	
.survey_desc .form{width:100%;padding: 30px;}
}


@media (min-width:320px) and (max-width:480px) {
.event_content h2 i{top:15px;line-height: 32px;}
.event_content h2 i.line_left span{left:-35px;top:-13px;}
.event_content h2 i.line_right span{right:-35px;top:-13px;}
.event_content h2 {font-size: 1.37em;margin: 0 15px;margin-top: 80px;}
.event_content h2+p{font-size: 1.25em;}
.desc{font-size: 1em;}
.event_content em , .gift h3{font-size: 1.25em;}
/*.sponser a:nth-child(2){display:none;}*/

.survey_option div span{width: 200px; height:200px;}
/*------贊助單位------*/
.sponser{display:flex;justify-content:center;position: relative;margin-top: 50px;max-width:150px;}
.sponser_wrapper {max-width:150px;}

/*------其他------*/
.event_wrapper{padding-top: 45px;}
#main {width: 95%;}
}

@media (min-width:320px) and (max-width:414px) {
.event_content h2 i{width:20%;}	
.event_content h2 i.line_left {left: -10px;}
.event_content h2 i.line_right {right: -10px;}	
.event_content h2 i.line_left span{left:-25px;}
.event_content h2 i.line_right span{right:-25px;}	
	
.survey_desc .form{font-size: 1em;}
.survey_desc .btn_green{width: 200px;}
}

@media (min-width:320px) and (max-width:375px) {
.event_content h2 span+span{display: none;}
.event_content h2 i{width:13%;}	

}