@charset "utf-8";
article.main{
  position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 100px 0 12% 0;
  margin: 0 auto;
}
article.main_top{
  position: relative;
	display: block;
	overflow: unset;
	width: 100%;
	padding: 0;
  margin: 0 auto;
}
/**********************************/
section.main_area_top{
	font-size: 1.1em;
	position: relative;
	z-index: 2;
  width: calc(100% - 20px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 1% 6% 3% 6%;
  -webkit-border-radius:40px;	-moz-border-radius:40px; border-radius:40px;
}
section.main_area_top h2{
	font-size: 2.5em;
	letter-spacing: 2px;
	margin: 50px 0 40px 0;
}
/*main_01*********************************/
.main_area_top .main_01_block_left{
	display: inline-block;
	width: 200px;
	vertical-align: middle;
}
.main_area_top .main_01_block_right{
	display: inline-block;
	width: calc(100% - 220px);
	vertical-align: middle;
}
/*耳多樂園互動圖 star*/
.ear_tour{
	width: calc(100% - 120px);
	max-width: 1440px;
	margin: 0 auto 6% auto;
}
.ear_tour .ear_tour_bg{
	position: relative;
}
.ear_tour .ear_tour_bg .pic{
	display: block;
	width: 100%;
	line-height: 0;
	overflow: hidden;
	-webkit-border-radius:40px 40px 0 0;
	-moz-border-radius:40px 40px 0 0;
	border-radius:40px 40px 0 0;
}
.ear_tour .ear_tour_bg .pic img{
	width: 100%;
}
.ear_tour .ear_tour_bg .ear_tour_label_column{
	position: absolute;
	width: 100%;
	height: 800px;
}
.ear_tour .ear_tour_bg .ear_tour_label{
	position: absolute;
	background-color: #fff;
	border: 4px solid #707070;
	-webkit-border-radius:40px;	-moz-border-radius:40px; border-radius:40px;
	color: #FC8F6A;
	padding: 12px;
	font-size: 1.2em;
	cursor: pointer;
}
.ear_tour .ear_tour_bg .ear_tour_label span.sn{
	display: none;
}
.ear_tour .ear_tour_bg .ear_tour_label_hover{
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
  border: 4px solid #FC8F6A;
  background-color: #FC8F6A;
  color: #fff;
}
.ear_tour .ear_tour_bg .ear_tour_label:hover{
  border: 4px solid #FC8F6A;
  background-color: #FC8F6A;
  color: #fff;
}
.ear_tour .ear_tour_bg .ear_tour_label::before{
	position: relative;
	top:-1px;
	content: "›› ";
}
.ear_tour .ear_tour_bg .ear_tour_label.label_01{top: 43%;left: 16%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_02{top: 72%;left: 14%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_03{top: 15%;left: 39%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_04{top: 49%;left: 30%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_05{top: 47%;left: 48%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_06{top: 77%;left: 48%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_07{top: 18%;left: 87%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_08{top: 43%;left: 76%;}
.ear_tour .ear_tour_bg .ear_tour_label.label_09{top: 60%;left: 88%;}

.ear_tour .ear_tour_bg .ear_tour_linkbtn{
	position: absolute;
	right:2%;
	bottom: 4%;
}
.ear_tour .ear_tour_bg .ear_tour_linkbtn a{
	background-color: #FC8F6A;
	-webkit-border-radius:40px;	-moz-border-radius:40px; border-radius:40px;
	color: #fff;
	padding:8px 12px 12px 12px;
	text-decoration: unset;
	font-weight: 500;
}
.ear_tour .ear_tour_bg .ear_tour_linkbtn a:hover{
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
.ear_tour .ear_tour_bg .ear_tour_linkbtn a img{
	width: 40px;
	height: 40px;
	vertical-align: middle;
}

.ear_tour .ear_tour_bg .ear_tour_desc{
	display: none;
	position: absolute;
	background-color: #fff;
	max-width: 40%;
	-webkit-border-radius:20px;	-moz-border-radius:20px; border-radius:20px;
	color: #706FB2;
	padding:55px 20px 20px 20px;
	font-size: 1em;
	z-index: 2;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.ear_tour .ear_tour_bg .ear_tour_desc .desc_label{
  display: none;
  width: inherit;
  margin: 0 auto 10px auto;
  color: #fff;
  background: #FC8F6A;
  -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
  padding: 8px 16px;
  text-align: center;
  font-weight: normal;
}
.ear_tour .ear_tour_bg .ear_tour_desc .desc_label span.sn{
	display: none;
}
.ear_tour .ear_tour_bg .ear_tour_desc .desc_label span.sn::after{
	content: ".";
}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_01{top: 3%;left: 2%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_02{top: 38%;left: 2%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_03{top: 26%;left: 23%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_04{top: 16%;left: 22%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_05{top: 10%;left: 36%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_06{top: 36%;left: 35%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_07{top: 30%;left: 58%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_08{top: 2%;left: 49%;}
.ear_tour .ear_tour_bg .ear_tour_desc.desc_09{top: 40%;left: 46%;}

.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1{
	display: block;
	overflow: hidden;
	margin: 0;
	list-style-type: disc;
}
.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1 li{
	margin: 0 0 10px 0;
}
.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1 li span.title,
.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1 li span.info{
	display: inline-block;
	vertical-align: top;
}
.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1 li.type_1 span.title{width: 3.3em;}
.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1 li.type_1 span.info{width: calc(100% - 5em);}
.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1 li.type_2 span.title{width: 5.35em;}
.ear_tour .ear_tour_bg .ear_tour_desc ul.step_1 li.type_2 span.info{width: calc(100% - 7em);}

.ear_tour .ear_tour_bg .ear_tour_desc ul.step_2{
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0 0 0 32px;
	list-style-type: decimal;
}
.ear_tour .ear_tour_bg .ear_tour_desc .btn_close_desc{
	position: absolute;
	top:20px;
	right: 20px;
	width: 29px;
	height: 29px;
	margin: 0 0 15px 0;
	cursor: pointer;
	transform: rotate(0turn);
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	transition: all 0.3s; -webkit-transition: all 0.3s;
	background: url('../images/icon_desc_close.svg') no-repeat;
	background-color: #706FB2;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.ear_tour .ear_tour_bg .ear_tour_desc .btn_close_desc:hover{
	transform: rotate(0.5turn);
	background-color: #FC8F6A;
}
.ear_tour .ear_tour_bg .ear_tour_desc .btn_detail{
	display: block;
	bottom:15px;
	right: 15px;
	text-align: right;
}
.ear_tour .ear_tour_bg .ear_tour_desc .btn_detail a{
	display: inline-block;
	text-decoration: unset;
	color: #fff;
	font-size: 0.8em;
	padding:0 8px 2px 8px;
	margin: 15px 0 0 0;
	background: #706FB2;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
}
.ear_tour .ear_tour_bg .ear_tour_desc .btn_detail a:hover{
	background-color: #FC8F6A;
}
.ear_tour .ear_tour_bg .ear_tour_desc .btn_detail a::before{
	content: "›› 詳情請見";
}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow{
	position: absolute;
	bottom:-15px;
	left: calc(50% - 15px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 15px 0 15px;
	border-color: #ffffff transparent transparent transparent;
}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_01{bottom:-15px;left: 59%;}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_02{bottom:-15px;left: 43%;}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_03{top: -15px;left: 47%;transform: rotate(180deg);}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_04{bottom:-15px;left: 47%;}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_05{bottom:-15px;left: 46%;}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_07{top: -15px;left: 84%;transform: rotate(180deg);}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_08{bottom:-15px; left: 81%;}
.ear_tour .ear_tour_bg .ear_tour_desc .arrow_09{bottom: calc(50% - 0px);left: calc(100% - 10px);transform: rotate(-90deg);}

.ear_btn_column{
	width: 100%;
	overflow: hidden;
}
.ear_btn_column .box{
	float: left;
	width: 33.333333333%;
}
.ear_btn_column .box .ear_pic{
	width: 100%;
	text-align: center;
	padding: 10px;
}
.ear_btn_column .box .ear_pic img{
	max-width: 100%;
}
.ear_btn_column .box .ear_btn{
	position: relative;
	width: 100%;
  color: #FFFFFF;
  background-color: #FC8F6A;
	text-align: center;
	font-size: 1.4em;
	line-height: 100px;
	-webkit-border-radius:0 0 40px 40px;
	-moz-border-radius:0 0 40px 40px;
	border-radius:0 0 40px 40px;
	font-weight: 500;
	/*cursor: pointer;*/
	z-index: 2;
	transition: all 0.3s; -webkit-transition: all 0.3s;
}
.ear_btn_column .box .ear_btn:hover{
	/*background-color: #E9DECC;*/
}
.ear_btn_column .box .ear_btn_hover{
	background-color: #E9DECC;
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 2px rgba(0,0,0,0.4);
	box-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.ear_btn_column .box .ear_desc{
	/*display: none;*/
	position: relative;
	top:-40px;
	width: 100%;
	padding: 60px 35px 20px 15px;
	background: #FFF8EE;
	-webkit-border-radius:0 0 40px 40px;
	-moz-border-radius:0 0 40px 40px;
	border-radius:0 0 40px 40px;
	z-index: 1;
}
.ear_btn_column .box .ear_desc ul.decimal{
	list-style-type: decimal;
}
.ear_btn_column .box .ear_desc ul.decimal li{
	margin: 0 0 15px 0;
  color: #583D2B;
}
.ear_btn_column .box .ear_desc ul.decimal li span.label{
	display: inline-block;
  color: #FFFFFF;
  background: #583D2B;
	vertical-align: text-top;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
	padding: 0 10px;
}
/*耳多樂園互動圖 end*/
/*耳朵問題知多少 star*/
.ear_problem_column{
	width: 100%;
	text-align: center;
}
.ear_problem_column .box{
	display: inline-block;
	width: 22%;
	margin: 0 1.25%;
}
.ear_problem_column .box .ear_problem_btn{
	position: relative;
	width: 100%;
	text-align: center;
	font-weight: 500;
	cursor: pointer;
	z-index: 2;
}
.ear_problem_column .box .ear_problem_btn:hover .pic{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceIn;
}
.ear_problem_column .box .ear_problem_btn .pic,
.ear_problem_column .box .ear_problem_btn .pic img{
	width: 100%;
	-webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;
}
.ear_problem_column .box .ear_problem_btn .pic_1{
	display: none;
}
.ear_problem_column .box .ear_problem_btn .title{
	width: 100%;
	text-align: center;
	letter-spacing: 1px;
}
.ear_problem_desc_column{
	position: relative;
	width: 100%;
	margin: 0 0 40px 0;
	padding: 30px 0 0 0;
}
.ear_problem_desc_column .ear_problem_desc{
  display: none;
	position: relative;
  background-color: #EDD0B4;
  width: 100%;
  -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
  color: #583D2B;
  padding:55px;
  font-size: 1em;
  z-index: 2;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.ear_problem_desc_column .ear_problem_desc.ear_problem_desc_01{width: 60%;}
.ear_problem_desc_column .ear_problem_desc.ear_problem_desc_02{width: 60%; margin: 0 0 0 20%;}
.ear_problem_desc_column .ear_problem_desc.ear_problem_desc_03{width: 100%;}
.ear_problem_desc_column .ear_problem_desc.ear_problem_desc_04{width: 60%; margin: 0 0 0 40%;}

.ear_problem_desc_column .ear_problem_desc ul.step_1{
  display: block;
  overflow: hidden;
  margin: 0;
  list-style-type: decimal;
}
.ear_problem_desc_column .ear_problem_desc ul.listinfo li,
.ear_problem_desc_column .ear_problem_desc ul.step_1 li{
  margin: 0 0 10px 0;
}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li span.title{
	color: #706FB2;
	font-weight: 500;
  display: inline-block;
  vertical-align: top;
}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li span.info{
  display: inline-block;
  vertical-align: top;
}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_1 span.title{width: 3.3em;}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_1 span.info{width: calc(100% - 5em);}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_2 span.title{width: 4.35em;}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_2 span.info{width: calc(100% - 6em);}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_3 span.title{width: 5.35em;}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_3 span.info{width: calc(100% - 7em);}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_4 span.title{width: 6.4em;}
.ear_problem_desc_column .ear_problem_desc ul.step_1 li.type_4 span.info{width: calc(100% - 8em);}
.ear_problem_desc_column .ear_problem_desc h3{
  width: 100%;
  font-size: 1.1em;
  margin: 10px auto 10px auto;
  color: #fff;
  background: #FC8F6A;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  padding: 8px 16px;
  text-align: center;
  font-weight: normal;
}
.ear_problem_desc_column .ear_problem_desc .ear_problem_btn_close_desc{
  position: absolute;
  top:20px;
  /*right: 20px;*/
  left: calc(50% - 14px);
  width: 29px;
  height: 29px;
  margin: 0 0 15px 0;
  cursor: pointer;
  transform: rotate(0turn);
  -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
  transition: all 0.3s; -webkit-transition: all 0.3s;
  background: url('../images/icon_desc_close.svg') no-repeat;
  background-color: #706FB2;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
.ear_problem_desc_column .ear_problem_desc .ear_problem_btn_close_desc:hover{
  transform: rotate(0.5turn);
  background-color: #FC8F6A;
}
.ear_problem_desc_column .ear_problem_desc .btn_detail{
  display: block;
  bottom:15px;
  right: 15px;
  text-align: right;
}
.ear_problem_desc_column .ear_problem_desc .btn_detail a{
  display: inline-block;
  text-decoration: unset;
  color: #fff;
  font-size: 0.8em;
  padding:0 8px 2px 8px;
  margin: 15px 0 0 0;
  background: #706FB2;
  -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
}
.ear_problem_desc_column .ear_problem_desc .btn_detail a:hover{
  background-color: #FC8F6A;
}
.ear_problem_desc_column .ear_problem_desc .btn_detail a::before{
  content: "›› 詳情請見";
}
.ear_problem_desc_column .ear_problem_desc .arrow{
  position: absolute;
  bottom:-15px;
  left: calc(50% - 15px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #EDD0B4 transparent transparent transparent;
}
.ear_problem_desc_column .ear_problem_desc .arrow_01{top:-15px;left: 18%; transform: rotate(0.5turn);}
.ear_problem_desc_column .ear_problem_desc .arrow_02{top:-15px;left: 27%; transform: rotate(0.5turn);}
.ear_problem_desc_column .ear_problem_desc .arrow_03{top:-15px;left: 61.5%; transform: rotate(0.5turn);}
.ear_problem_desc_column .ear_problem_desc .arrow_04{top:-15px;left: 77.5%; transform: rotate(0.5turn);}
/*耳朵問題知多少 end*/
/**********************************/
/*main_02*********************************/
/*聽力程度知多少？ star*/
.tip_desc{
	display: none;
	position: absolute;
	background-color: #fff;
	width: 90%;
	max-width: 450px;
	-webkit-border-radius:20px;	-moz-border-radius:20px; border-radius:20px;
	color: #583D2B;;
	padding:30px 20px 0px 20px;
	font-size: 0.9em;
	z-index: 10;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.tip_desc .btn_close_desc{
	position: absolute;
	top:12px;
	right: 12px;
	width: 29px;
	height: 29px;
	cursor: pointer;
	transform: rotate(0turn);
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	transition: all 0.3s; -webkit-transition: all 0.3s;
	background: url('../images/icon_desc_close.svg') no-repeat;
	background-color: #706FB2;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.tip_desc .btn_close_desc:hover{
	transform: rotate(0.5turn);
	background-color: #FC8F6A;
}
.tip_desc .arrow{
	position: absolute;
	bottom:-15px;
	left: calc(50% + 5px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 15px 0 15px;
	border-color: #ffffff transparent transparent transparent;
}
.lights_column{
	width: 100%;
	overflow: hidden;
	margin: 60px 0 40px 0;
}
.lights_column .bg_01,
.lights_column .bg_03{
	width: 100%;
	line-height: 0;
}
.lights_column .bg_01 img{
	width: 100%;
}
.lights_column .bg_03 img{
	position: relative;
	top:-2px;
	width: 100%;
}
.lights_column .bg_02{
	color: #583D2B;
	position: relative;
	top:-1px;
	width: 100%;
	background-image: url('../images/main_02_bg_area_01_02.svg');
	background-repeat: no-repeat;
	-moz-background-size:100% auto; -webkit-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto;
}
.lights_column .bg_02 .box_light{
	position: relative;
	top:-40px;
	width: calc(100% - 170px);
	padding:20px 40px;
	margin: 0 0 0 65px;
	border-bottom:1px solid #583D2B;
}
.lights_column .bg_02 .box_light:last-child{
	border-bottom:none;
}
.lights_column .bg_02 .box_light .icon{
	display: inline-block;
	width: 100px;
	margin: 0 20px 0 0;
	vertical-align: middle;
}
.lights_column .bg_02 .box_light .icon img{
	width: 100%;
}
.lights_column .bg_02 .box_light .info{
	display: inline-block;
	width: calc(95% - 140px);
	vertical-align: middle;
  text-align: justify;
}
.two_columns{
	width: 100%;
	overflow: hidden;
	text-align: center;
	padding: 0px 0 20px 0;
}
.two_columns .box_column{
	display: inline-block;
  width: 42%;
  vertical-align: top;
  text-align: left;
}
.two_columns .box_column:first-of-type{
	margin: 0 6% 0 0;
}
.two_columns .box_column:last-child{
	margin: 0 0 0 6%;
}
.two_columns .box_column .info{
	display: block;
	min-height: 100px;
}
.two_columns .box_column img{
	margin: 20px 0 0 0;
	width: 100%;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
}
/*聽力程度知多少？ end*/
/*聽損與健康 star*/
.three_columns{
	width: 100%;
	overflow: hidden;
	text-align: center;
	padding: 10px 0 60px 0;
}
.three_columns_noneflex{
  display: unset;
}
.three_columns .box_column{
	display: inline-block;
	width: 27%;
	margin: 0 8% 0 0;
	vertical-align: top;
}
.three_columns .box_column:last-child{
	margin: 0;
}
.three_columns .box_column .label{
	font-size: 1.2em;
	margin: 0 0 20px 0;
}
.three_columns .box_column .pic,
.three_columns .box_column .pic img{
	width: 100%;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
}
.three_columns .box_column .title{
  display: inline-block;
  color: #583D2B;
  font-size: 1.4em;
  font-weight: 500;
  background: #F2CC8F;
  vertical-align: text-top;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  padding: 0 10px;
  margin: 15px 0 10px 0;
}
.three_columns .box_column .info{
	text-align: left;
	text-align: justify
}
section a.three_steps_link{
	display: inline-block;
	text-decoration: unset;
	color: #fff;
	padding:4px 12px 6px 12px;
	margin: 0 0 5px 10px;
	background: #706FB2;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
section a.three_steps_link:hover{
	background: #FC8F6A;
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
section a.three_steps_link::before{
	position: relative;
	top:-1px;
	content: "›› ";
}
/*聽損與健康 end*/
/*《聽不好，會怎樣?》 star*/
.video_column{
	display: block;
	width: 96%;
	margin: 0 auto;
}
.video_column,
.video_column>div,
.video_column>div>div,
.video_column>div>div>iframe{
	overflow: hidden;
	-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;
}
/*《聽不好，會怎樣?》 end*/
/*聽覺照顧三部曲 star*/
.box_steps{
	width: 100%;
	margin: 10px 0 5% 0;
}
.box_steps .left_column{
	display: inline-block;
	vertical-align: top;
	width: 340px;
	text-align: center;
}
.box_steps .left_column .pic{
	display: block;
	width: 100%;
}
.box_steps .left_column .pic img{
	width: 100%;
	overflow: hidden;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
}
.box_steps .left_column .title{
  display: inline-block;
  color: #ffffff;
  font-size: 1.4em;
  font-weight: 500;
  background: #583D2B;
  vertical-align: text-top;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  padding: 0 10px;
  margin: 15px 0 10px 0;
}
.box_steps .right_column{
	display: inline-block;
	width: calc(100% - 350px);
	padding: 0 0 0 6%;
}
.box_steps .right_column .info ul{
	margin-top: 0;
}
.box_steps .right_column .info ul li{
	margin: 0 0 10px 0;
}
section a.btn_link{
	display: inline-block;
	text-decoration: unset;
	color: #ffffff;
	padding:4px 12px 6px 12px;
	margin: 0 0 5px 10px;
	background: #706FB2;
	font-size: 0.86em;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
section a.btn_link:hover{
	color: #fff;
	background: #FC8F6A;
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
section a.btn_link::before{
	position: relative;
	top:-1px;
	content: "›› ";
}
/*聽覺照顧三部曲 end*/
/**********************************/
/*main_03*********************************/
/*助聽輔具介紹 TAB分頁 star*/
section.area_link_main_03_area_01{
	padding: 30px 30px 50px 30px;
}
section.area_link_main_03_area_01 h2{
	padding: 0 6%;
}
.tab_column {
	clear:both;
	position:relative;
	width:100%;
	margin:0 auto;
}
/*頁籤選單*/
.tab_column ul.tabs {
  width: 100%;
  border: none;
  text-align: center;
  padding: 0 3%;
  margin: 0;
  letter-spacing:-5px;
  line-height: 0;
}
.tab_column ul.tabs li {
	width: 24%;
	position: relative;
	top:0;
	vertical-align: bottom;
	text-align:center;
	display:inline-block;
	letter-spacing:2px;
	color: #fff;
	line-height: 95px;
	font-weight: 700;
	font-size: 1.8em;
	background: #EDD0B4;
	-webkit-border-radius:30px 30px 0 0;
	-moz-border-radius:30px 30px 0 0;
	border-radius:30px 30px 0 0;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	cursor: pointer;
}
.tab_column ul.tabs li:hover{
	top:-15px;
}
.tab_column ul.tabs li a{
	width: 100%;
	display:block;
	padding:0 0 5px 0;
	color: #583D2B;
	text-decoration: unset;
}
.tab_column ul.tabs li.active{
	color: #583D2B;
	background: #FFF8EE;
}
.tab_column ul.tabs li.active a{
	color:#583D2B;
}

.tab_column .tab_container{
	position:relative;
	top:-15px;
	width:100%;
	background:#FFF8EE;
	-webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
}
.tab_column .tab_container .tab_content{
	padding:2% 5%;
	word-break:break-all;
	overflow: hidden;
}
.tab_column .tab_container .tab_content h3.mobile_show_label{
	display: none;
	color: #583D2B;
	font-size: 1.4em;
}
.tab_column .tab_container .tab_content .tab_column_full{
  float: left;
  width: 100%;
}
.tab_column .tab_container .tab_content .tab_column_full h4{
  font-size: 1.2em;
  margin: 20px 0 0 0;
}
.tab_column .tab_container .tab_content .tab_column_full h4~p{
  margin:20px 10px;
}
.tab_column .tab_container .tab_content .tab_column_left{
	float: left;
	width: 55%;
}
.tab_column .tab_container .tab_content .tab_column_right{
	float: right;
	width: 40%;
}
.tab_column .tab_container .tab_content .tab_column_full .list_column{
  margin:0;
  padding:0;
}
.tab_column .tab_container .tab_content .tab_column_right .list_column{
  border-bottom:3px solid #583D2B;
  margin:0 0 30px 0;
  padding:0 0 20px 0;
  min-height: 260px;
}
.tab_column .tab_container .tab_content .tab_column_full .list_column .box_list{
	width: 100%; margin: 0 0 30px 0;
}
.tab_column .tab_container .tab_content .tab_column_full .list_column .box_list .title{
	vertical-align: top; font-size: 1.2em;
}
.tab_column .tab_container .tab_content .tab_column_full .list_column .box_list .info{
	display: inline-block; width: calc(100% - 8em); vertical-align: top;
}
.tab_column .tab_container .tab_content .tab_column_full img{
	max-width: 100%;
}
section a.tab_info_link{
	display: inline-block;
	text-decoration: unset;
	color: #fff;
	padding:4px 12px 6px 12px;
	margin: 0 0 5px 10px;
	background: #706FB2;
	-webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
}
section a.tab_info_link:hover{
	background: #FC8F6A;
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
section a.tab_info_link::before{
	position: relative;
	top:-1px;
	content: "›› ";
}
.brand_column{
	width: 100%;
	float: left;
	clear: both;
	overflow: hidden;
	margin:30px 0;
}
.brand_column .title{
	text-align: center;
	color: #583D2B;
	border-bottom:3px solid #583D2B;
	width: 90%;
	font-size: 1.1em;
	max-width: 400px;
	margin: 0 auto 20px auto;
	line-height: 50px;
}
.brand_column .brand_list{
	text-align: center;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}
.brand_column .brand_list .box_brand{
	display: inline-block;
	width: 160px;
	height: 100px;
	padding: 10px 15px;
	overflow: hidden;
	-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;
	background: #fff;
	margin: 6px;
	transition: all 0.2s; -webkit-transition: all 0.2s;
}
.brand_column .brand_list .box_brand:hover{
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.brand_column .brand_list .box_brand a{
	width: 130px;
	height: 80px;
	display:table-cell;
	vertical-align: middle;
	line-height: 0;
}
.brand_column .brand_list .box_brand a img{
	max-width: 100%;
	max-height: 80%;
}
/*助聽輔具介紹 TAB分頁 end*/
/*租借聽覺輔具 star*/
.two_columns .main_03_area_02_left{
  float: left;
  width: 39%; /*43.9861%*/
  text-align: left;
}
.two_columns .main_03_area_02_right{
  float: right;
  width: 58%; /*56.0138%*/
  text-align: left;
}
.two_columns .main_03_area_02_left img,
.two_columns .main_03_area_02_right img{
	width: 100%;
}
/*租借聽覺輔具 end*/
/*聽覺復能 star*/
.two_columns_block{
	width: 100%;
	display: block;
	padding: 0px 0 20px 0;
}
.two_columns_block .main_03_area_03_left{
	display: inline-block;
	width: 58%;
	vertical-align: top;
	margin: 0 2% 0 0; 
}
.two_columns_block .main_03_area_03_right{
	display: inline-block;
	width: 36%;
	vertical-align: top;
	margin: 0 0 0 2%;
}
.two_columns_block .main_03_area_03_right img{
	width: 100%;
}
.hover_bounceIn a{
  display: block;
}
.hover_bounceIn a:hover img{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceIn;
}
/*聽覺復能 end*/
/*補助與相關資源 star*/
ol.main_03a_ol_list{
  list-style: none;
  padding-left: 5px;
}
ol.main_03a_ol_list>li{
  margin: 0 0 40px 0;
}
ol.main_03a_ol_list>li .title{
  padding: 2px 12px 4px 12px;
  font-size: 1.2em;
}
ol.main_03a_ol_list>li .info{
  width: 100%;
  display: block;
  padding: 0 0 0 12px;
}
ol.main_03a_ol_list ul{
  list-style: disc;
}
ol.main_03a_ol_list ul>li{
  margin: 0 0 15px 0;
}
ol.main_03a_ol_list ul>li img{
  position: relative;
  width: 100%;
}
ol.main_03a_ol_list a.tab_info_link{
  padding: 0 12px 2px 12px;
  margin: 0 0 5px 3px;
  font-size: 0.9em;
  position: relative;
  top:-1px;
}
/*補助與相關資源end*/
/*服務據點 star*/
.service_base_column{
	width: 100%;
	display: block;
	padding: 0px 0 20px 0;
}
.service_base_column .map_column{
	display: inline-block;
	width: 45%;
	vertical-align: top;
	margin: 0 3% 0 0; 
}
.service_base_column .map_column .bg_map{
	position: relative;
	width: 100%;
	padding-bottom: 115.3846%; 
	background-image: url('../images/main_03_area_05_map.svg');
	background-color: #B0D9FE;
	background-repeat: no-repeat;
	background-position: top center;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
}
.point_site{
  position: absolute;
	width: 22px;
	padding-bottom: 22px;
  background: #DE6F8E;
  -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
  /*cursor: pointer;*/
}
/*.point_site:hover{
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}*/
.point_site.show{
  animation: point_site 0.4s infinite alternate;
  -webkit-animation: point_site 0.4s infinite alternate;
}
@-webkit-keyframes point_site {
  from {
  	transform: scale(1);
    background: #ffda00;
  }
  to {
  	transform: scale(1.3);
    background: #DE6F8E;
  }
}
@keyframes point_site {
  from {
  	transform: scale(1);
    background: #ffda00;
  }
  to {
  	transform: scale(1.3);
    background: #DE6F8E;
  }
}
.cloud_service{
	position: absolute;
	width: 180px;
	height: 180px;
	left: 5%;
	bottom: 5%;
}
.point_site.point_site_keelung{left: 83%;top: 6%;}
.point_site.point_site_taipei{left: 77%;top: 8%;}
.point_site.point_site_newtaipei{left: 72%;top: 7%;}
.point_site.point_site_taoyuan{left: 65%;top: 10%;}
.point_site.point_site_hsinchu_city{left: 62%;top: 16%;}
.point_site.point_site_hsinchu{left: 67%;top: 19%;}
.point_site.point_site_miaoli{left: 56%;top: 22%;}
.point_site.point_site_taichung{left: 53%;top: 32%;}
.point_site.point_site_changhua{left: 46%;top: 36%;}
.point_site.point_site_nantou{left: 61%;top: 39%;}
.point_site.point_site_yunlin{left: 38%;top: 45%;}
.point_site.point_site_chiayi_city{left: 47%;top: 50%;}
.point_site.point_site_chiayi{left: 53%;top: 51%;}
.point_site.point_site_tainan{left: 44%;top: 58%;}
.point_site.point_site_kaohsiung{left: 54%;top: 62%;}
.point_site.point_site_pingtung{left: 52%;top: 78%;}
.point_site.point_site_yilan{left: 81%;top: 20%;}
.point_site.point_site_hualien{left: 74%;top: 40%;}
.point_site.point_site_taitung{left: 65%;top: 62%;}
.point_site.point_site_lienchiang{left: 35%;top: 10%;}
.point_site.point_site_kinmen{left: 15%;top: 27%;}
.point_site.point_site_penghu{left: 24%;top: 53%;}

.service_base_column .info_column{
	display: inline-block;
	width: 48%;
	vertical-align: top;
	margin: 0 0 0 2%;
}
.service_base_column .info_column .status_hide{
	display: none;
}
.master{
	width: 100%;
	padding: 0 0 10px 0;
	margin:0 0 10px 0;
}
.master .title{
	width: 100%;
}
.master .title .icon{
	display: inline-block;
	width: 23px;
	height: 23px;
	background-color: #DE6F8E;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	position: relative;
	top:2px;
	margin: 0 18px 0 0;
}
.master .title .text{
	display: inline-block;
	background-color: #91725D;
	color: #fff;
	font-weight: 500;
	font-size: 1.2em;
	padding:0 12px;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
.master .info{
	width: 100%;
	padding: 10px 0 0 60px;
	font-size: 1.1em;
}
.master .info a{
  display: block;
  width: fit-content;
  margin: 0 0 5px 0;
}
.master .info a::before{
	content: "›› ";
}
.master .info .tel,
.master .info .website,
.master .info .address{
	margin: 0 0 6px 0;
}
.master .info .website a{
  display: inline-block;
  text-decoration: unset;
  color: #fff;
  padding:2px 12px 4px 12px;
  margin: 0;
  background: #706FB2;
  -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
}
.master .info .website a:hover{
  background: #FC8F6A;
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
.partner{
	width: 100%;
}
.partner .category{
	margin: 0 0 15px 0;
  font-size: 1.1em;
}
.partner .box_partner{
	width: 100%;
	display: block;
	margin: 0 0 25px 0;
}
.partner .box_partner .title{
	width: 100%;
}
.partner .box_partner .title .icon{
	display: inline-block;
	width: 23px;
	height: 23px;
	background-color: #583D2B;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	position: relative;
	top:2px;
	margin: 0 18px 0 0;
}
.partner .box_partner .title .text{
	display: inline-block;
  background-color: #91725D;
  color: #fff;
	font-weight: 500;
	font-size: 1.1em;
	padding:0 12px;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
.partner .box_partner .info{
	width: 100%;
  display: block;
  overflow: hidden;
	padding: 10px 0 0 60px;
}
.partner .box_partner .info a{
	color: #583D2B;
	text-decoration: unset;
}
.partner .box_partner .info a::before{
	content: "›› ";
}
.partner .box_partner .info .row{
	margin: 0 0 3px 0;
  overflow: hidden;
  display: block;
  width: 100%;
}
.partner .box_partner .info .row .title{
  float: left;
  width: 110px;
  vertical-align: top;
}
.partner .box_partner .info .row .info{
  float: right;
  width: calc(100% - 110px);
  vertical-align: top;
  padding: 0;
}
/*服務據點 end*/
/*聽覺復能 star*/
.game_map_column{
	position: relative;
	width: 100%;
}
.game_map_column_4{margin: 20px 0 0 0;}
.game_map_column_5{margin: 20px 0 0 0;}
.game_map_column_6{margin: 60px 0 0 0;}
.game_map_column .title{
  position: absolute;
  font-size: 1.6em;
  font-weight: 500;
  color: #4D4D4D;
}
.game_map_column .pic{
	display: block;
	width: 100%;
	line-height: 0;
	overflow: hidden;
	-webkit-border-radius:40px 40px 0 0;
	-moz-border-radius:40px 40px 0 0;
	border-radius:40px 40px 0 0;
}
.game_map_column .pic img{
	width: 100%;
}

.game_map_column .game_map_btn_column{
	position: absolute;
	width: 100%;
	height: 795px;
}
.game_map_column .game_map_btn{
	position: absolute;
	background-color: #706FB2;
	-webkit-border-radius:50%;	-moz-border-radius:50%; border-radius:50%;
	width: 70px;
	height: 70px;
	cursor: pointer;
	background-repeat: no-repeat;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.game_map_column .game_map_btn.sn_1{background-image: url('../images/btn_sn_1.svg');}
.game_map_column .game_map_btn.sn_2{background-image: url('../images/btn_sn_2.svg');}
.game_map_column .game_map_btn.sn_3{background-image: url('../images/btn_sn_3.svg');}
.game_map_column .game_map_btn.sn_4{background-image: url('../images/btn_sn_4.svg');}
.game_map_column .game_map_btn.sn_5{background-image: url('../images/btn_sn_5.svg');}
.game_map_column .game_map_btn.sn_6{background-image: url('../images/btn_sn_6.svg');}

.game_map_column .game_map_btn_hover{
  background-color: #706FB2;
  background-image:unset !important;
  width: 50px;
  height: 50px;
  margin: 10px 0 0 10px;
}
.game_map_column .game_map_btn:hover{
  background-color: #FC8F6A;
  color: #fff;
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
.game_map_column .game_map_box{
  position: absolute;
  top: 69%;
  left: 30%;
  width: 28%;
  padding-bottom: 18.86%;
  background-image:url('../images/main_03_1_box_0.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 3;
  -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
}
.game_map_column .game_map_box_tip{
  position: absolute;
  top: 81%;
  left: 56%;
  display: inline-block;
  background-color: #706FB2;
  font-size: 0.9em;
  color: #fff;
  border: 5px solid #706FB2;
  padding: 2px 10px 2px 36px;
  margin: 3px;
  background-image: url('../images/icon_tip.svg');
  background-repeat: no-repeat;
  background-position: 6px center;
  z-index: 2;
  -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
  -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}

.game_map_column .game_map_desc{
	display: none;
	position: absolute;
	background-color: #fff;
	width: 80%;
	max-width: 370px;
	-webkit-border-radius:20px;	-moz-border-radius:20px; border-radius:20px;
	color: #706FB2;
	padding:55px 20px 20px 20px;
	font-size: 1em;
	z-index: 3;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.game_map_column .game_map_desc .btn_close_desc{
	position: absolute;
	top:20px;
	right: 20px;
	width: 29px;
	height: 29px;
	margin: 0 0 15px 0;
	cursor: pointer;
	transform: rotate(0turn);
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	transition: all 0.3s; -webkit-transition: all 0.3s;
	background: url('../images/icon_desc_close.svg') no-repeat;
	background-color: #706FB2;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.game_map_column .game_map_desc .btn_close_desc:hover{
	transform: rotate(0.5turn);
	background-color: #FC8F6A;
}
.game_map_column .game_map_desc h3{
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}
.game_map_column .game_map_desc p{
	margin-top: 0;
}
.game_map_column .game_map_desc .btn_detail{
	display: block;
	bottom:15px;
	right: 15px;
	text-align: right;
}
.game_map_column .game_map_desc .btn_detail a{
	display: inline-block;
	text-decoration: unset;
	color: #fff;
	padding:0 8px 2px 8px;
	margin: 0;
	font-size: 0.8em;
	background: #706FB2;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
}
.game_map_column .game_map_desc .btn_detail a:hover{
	background-color: #FC8F6A;
}
.game_map_column .game_map_desc .btn_detail a::before{
	content: "›› 詳見手冊 ";
}
.game_map_column .game_map_desc .arrow{
	position: absolute;
	bottom:-15px;
	left: calc(50% - 15px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 20px 0 20px;
	border-color: #ffffff transparent transparent transparent;
}

/*游四海 star*/
.game_map_column .title_4{top: 36%;left: 31%;}

.game_map_column .game_map_btn.btn_4_1{top: 44%;left: 33%;}
.game_map_column .game_map_btn.btn_4_2{top: 22%;left: 53%;}
.game_map_column .game_map_btn.btn_4_3{top: 43%;left: 75%;}
.game_map_column .game_map_btn.btn_4_4{top: 70%;left: 58%;}

.game_map_column .game_map_desc.desc_4_1{top: 25%;left: 1%;}
.game_map_column .game_map_desc.desc_4_2{top: 1%;left: 59%;}
.game_map_column .game_map_desc.desc_4_3{top: 51%;left: 74%;}
.game_map_column .game_map_desc.desc_4_4{top: 63%;left: 27%;}

.game_map_column .game_map_desc .arrow_4_1{top: 65%;left: calc(100% - 10px);transform: rotate(-90deg);}
.game_map_column .game_map_desc .arrow_4_2{top: 65%;left: calc(0% - 30px);transform: rotate(90deg);}
.game_map_column .game_map_desc .arrow_4_3{top: -30px;left: 9%;transform: rotate(180deg);}
.game_map_column .game_map_desc .arrow_4_4{top: 25%;left: calc(100% - 10px);transform: rotate(-90deg);}
/*游四海 end*/
/*過五關 star*/
.game_map_column .title_5{top: 38%;left: 46%;}

.game_map_column .game_map_btn.btn_5_1{top: 27%;left: 61%;}
.game_map_column .game_map_btn.btn_5_2{top: 31%;left: 32%;}
.game_map_column .game_map_btn.btn_5_3{top: 53%;left: 30%;}
.game_map_column .game_map_btn.btn_5_4{top: 72%;left: 39%;}
.game_map_column .game_map_btn.btn_5_5{top: 80%;left: 54%;}

.game_map_column .game_map_desc.desc_5_1{top: -3%;left: 47%;}
.game_map_column .game_map_desc.desc_5_2{top: 10%;left: 1%;}
.game_map_column .game_map_desc.desc_5_3{top: 39%;left: -1%;}
.game_map_column .game_map_desc.desc_5_4{top: 70%;left: 8%;}
.game_map_column .game_map_desc.desc_5_5{top: 66%;left: 59%;}

.game_map_column .game_map_desc .arrow_5_1{top: calc(100% - 15px);left: 50%;transform: rotate(0deg);}
.game_map_column .game_map_desc .arrow_5_2{top: 74%;left: calc(100% - 10px);transform: rotate(-90deg);}
.game_map_column .game_map_desc .arrow_5_3{top: 50%;left: calc(100% - 10px);transform: rotate(-90deg);}
.game_map_column .game_map_desc .arrow_5_4{top: 13%;left: calc(100% - 10px);transform: rotate(-90deg);}
.game_map_column .game_map_desc .arrow_5_5{top: 50%;left: calc(0% - 30px);transform: rotate(90deg);}
/*過五關 end*/
/*斬六將 star*/
.game_map_column .title_6{top: 26%;left: 42%;}

.game_map_column .game_map_btn.btn_6_1{top: 15%;left: 39%;}
.game_map_column .game_map_btn.btn_6_2{top: 23%;left: 27%;}
.game_map_column .game_map_btn.btn_6_3{top: 39%;left: 11%;}
.game_map_column .game_map_btn.btn_6_4{top: 47%;left: 44%;}
.game_map_column .game_map_btn.btn_6_5{top: 17%;left: 63%;}
.game_map_column .game_map_btn.btn_6_6{top: 50%;left: 80%;}

.game_map_column .game_map_desc.desc_6_1{top: 4%;left: 8%;}
.game_map_column .game_map_desc.desc_6_2{top: 19%;left: -4%;}
.game_map_column .game_map_desc.desc_6_3{top: 46%;left: 9%;}
.game_map_column .game_map_desc.desc_6_4{top: 54%;left: 39%;}
.game_map_column .game_map_desc.desc_6_5{top: 3%;left: 68%;}
.game_map_column .game_map_desc.desc_6_6{top: 57%;left: 75%;}

.game_map_column .game_map_desc .arrow_6_1{top: 65%;left: calc(100% - 10px);transform: rotate(-90deg);}
.game_map_column .game_map_desc .arrow_6_2{top: 21%;left: calc(100% - 10px);transform: rotate(-90deg);}
.game_map_column .game_map_desc .arrow_6_3{top: -30px;left: 9%;transform: rotate(180deg);}
.game_map_column .game_map_desc .arrow_6_4{top: -30px;left: 18%;transform: rotate(180deg);}
.game_map_column .game_map_desc .arrow_6_5{top: 73%;left: calc(0% - 30px);transform: rotate(90deg);}
.game_map_column .game_map_desc .arrow_6_6{top: -30px;left: 19%;transform: rotate(180deg);}
/*斬六將 end*/
/*手冊 右下角浮動連結 star*/
.manual{
  position: fixed;
  z-index: 20;
  right: 0;
  color: #fff;
  font-size: 0.9em;
  bottom: 210px;
  -webkit-border-radius:50px 0 0 50px; -moz-border-radius:50px 0 0 50px; border-radius:50px 0 0 50px;
  padding: 20px 20px 10px 25px;
  background-color: #6DCDE1;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.2); box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}
.manual .icon{
  width: 55px;
}
.manual .icon img{
  width: 100%;
}
.manual:hover .icon{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceIn;
}
.manual a{
  color: #fff;
  text-decoration: unset;
}
.manual .icon,
.manual .title{
  display: inline-block;
  vertical-align: middle;
}
.manual .icon{
  margin: 0 10px 0 0;
}
/*手冊 右下角浮動連結 end*/
/*載入音效 star*/
.box_sound,
.box_pic{
  display: none;
  width: 0;
  height: 0;
  overflow: hidden;
}
/*載入音效 end*/
/*聽覺復能 end*/
/**********************************/
/*main_04*********************************/
/*66 麥噪 star*/
.main_04_area_01_left_column{
  display: inline-block; vertical-align: top;
  padding-right: 10px;
  width: 70%;
  margin: 0 0 20px 0;
}
.main_04_area_01_right_column{
  display: inline-block; vertical-align: top;
  text-align: center;
  width: 29%;
}
.main_04_area_01_right_column img{
  width: 80%;
  max-width: 220px;
  transform: rotate(0.05turn);
}
.label_66{
  display: inline-block;
  font-weight: 500;
  -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
  padding:15px 25px;
  color: #3D405B;
  background-color: #F2CC8F;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.bar_column{
  text-align: center;
  width: 100%;
  display: inline-block;
  padding: 10px 0;
}
.bar_column_tip{
  vertical-align: top;
  display: inline-block;
  background-color: #706FB2;
  font-size: 0.9em;
  color: #fff;
  border: 5px solid #706FB2;
  padding: 2px 10px 2px 36px;
  margin: 30px 30px 0 30px;
  background-image: url('../images/icon_tip.svg');
  background-repeat: no-repeat;
  background-position: 6px center;
  z-index: 2;
  -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
  -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
.bar_column span{
  display: inline-block;
  vertical-align: top;
  padding-top: 35px;
  margin: 0 10px 0 0;
}
.bar_sound{display: none; width: 0; height: 0;}
.box_bar{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px;
  margin: 30px 0;
}
.box_bar .touch_area{
  display: none;
  position: absolute;
  top:-30px;
  left: -10px;
  width: calc(100% + 20px);
  height: 100px;
  background-image: url('../images/icon_finger_swipe.svg');
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
  background-color: #00000088;
  -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;
  z-index: 3;
  cursor: pointer;
}
.box_bar .arrow_point{
  position: absolute;
  bottom:-10px;
  left: calc(60% - 10px);
  transform: rotate(0.5turn);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #F2CC8F transparent transparent transparent;
}
.box_bar .min,
.box_bar .max{
  display: inline-block;
  font-size: 1.2em;
  color: #3D405B;
  line-height: 40px;
  vertical-align: top;
  pointer-events: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.box_bar .min::after,
.box_bar .max::after{
  content: "%";
}
output.bar_output{
  font-size: 0.8em;
  position: absolute;
  width: 50px;
  top:-35px;
  left: calc(100% - 40px);
  text-align: left;
}
output.bar_output::after{
  content: "%";
}
/*rangeslider star*/
.rangeslider,
.rangeslider__fill {
  display: block;
  -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
.rangeslider {
  display: inline-block;
  padding:10px 11px;
  background-color: #F2CC8F;
  position: relative;
}
.rangeslider--horizontal {
  height: 40px;
  width: calc(100%);
}
.rangeslider__fill {
  background-color: #6DCDE1;
  height: 20px;
}
.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 20px;
}
.rangeslider__handle {
  position: absolute;
  right: 0;
  top:-20px;
  background-color: #583D2B;
  -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
  width: 34px;
  height: 60px;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.rangeslider__handle:after {
  content: "";
  display: block;
  height: 20px;
  margin: 17px 0 0 0;
  border-top:3px solid #EDD0B4;
  border-bottom:3px solid #EDD0B4;
}
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
}
.rangeslider--horizontal .rangeslider__handle {
  top: -10px;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}
/*rangeslider end*/
/*66 麥噪 end*/
/**********************************/
/*聆聽的安全氣候 star*/
section.area_link_climate{
  padding: 30px 30px 50px 30px;
}
section.area_link_climate h2{
  padding: 0 6%;
}
.climate_html_info{
  overflow: hidden;
  width: 100%;
  padding: 0 6%;
  clear: both;
  display: block;
}
.climate_html_info img.icon_tip{
  display: inline-block;
  position: relative;
  top:3px;
  margin: 0 5px 0 0;
}
.climate_html_info .type_column{
  background-color: #3D405B;
  -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
  padding: 3% 3% 2% 5%;
  margin: 0 0 20px 0;
}
.climate_html_info .type_column .box_type{
  width: 100%;
  display: block;
  margin: 0 0 10px 0;
}
.climate_html_info .type_column .box_type img{
  vertical-align: top;
  width: 40px;
  margin: 0 10px 0 0;
  position: relative;
  top:-3px;
}

.climate_column_slider{
  width: 100%;
  clear: both;
  display: block;
  margin: 40px 0;
}
.climate_box{
  position: relative;
  width: 88%;
  margin:0 6%;
  display: block;
  overflow: hidden;
  -webkit-border-radius:40px; -moz-border-radius:40px; border-radius:40px;
}
.climate_box>img{
  -webkit-border-radius:40px; -moz-border-radius:40px; border-radius:40px;
}
.climate_box span.point{
  color: #F2CC8F;
}
.climate_card{
  line-height: 0;
}
.climate_box.climate_box_0{
  color: #fff;
  padding: 20px 3%;
  background-image: url('../images/climate_bg_0.jpg');
  background-position: center;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
.climate_box.climate_box_0 .middle_column{
  width: 100%;
  display: block;
  overflow: hidden;
}
.climate_box.climate_box_0 .middle_column .left_column{
  float: left;
  width: 37%;
}
.climate_box.climate_box_0 .middle_column .left_column .pic_doll{
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  text-align: center;
}
.climate_box.climate_box_0 .middle_column .left_column .pic_doll img{
  max-width: 100%;
}
table.decibel_hr{
  width: 100%;
  background-color: #FFF8EE;
  text-align: center;
  color: #000;
  -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;
  border: none;
  border-collapse:collapse; 
  overflow: hidden;
}
table.decibel_hr tr:nth-child(odd){
  background-color: #B6CEC1;
}
table.decibel_hr tr th{
  color: #fff;
  background-color: #2A776E;
  font-weight: 300;
  padding: 7px 0;
}
table.decibel_hr tr td{
  padding: 8px 0;
}
table.decibel_hr tr td:nth-child(odd){
  border-right:2px solid #2A776E;
}
.climate_box.climate_box_0 .middle_column .right_column{
  float: right;
  width: 60%;
}
.climate_box.climate_box_0 .middle_column .right_column .p_first{
  padding-top: 0;
  margin-top: 0; 
}
.climate_box.climate_box_0 .middle_column .right_column .type_column{
  background-color: #3D405B;
  -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
  padding: 3% 3% 1% 5%;
}
.climate_box.climate_box_0 .middle_column .right_column .type_column_end{
  position: relative;
  left: -4%;
  background-color: #6DCDE1;
  color: #3D405B;
  font-size: 1.2em;
  -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
  padding: 2% 4%;
}
.climate_box.climate_box_0 .middle_column .right_column .type_column .box_type{
  width: 100%;
  display: block;
  margin: 0 0 10px 0;
}
.climate_box.climate_box_0 .middle_column .right_column .type_column .box_type img{
  vertical-align: top;
  width: 40px;
  margin: 0 10px 0 0;
  position: relative;
  top:-3px;
}
.climate_box.climate_box_0 .bottom_column{
  width: 100%;
  display: block;
  margin: 30px 0;
  text-align: center;
}
.climate_box.climate_box_0 .bottom_column_end{
  width: 100%;
  padding: 0 4% 0 0;
  display: block;
  margin: 10px 0;
  text-align: right;
}
section a.btn_detail{
  display: inline-block;
  text-decoration: unset;
  color: #FC8F6A;
  padding:4px 12px 6px 12px;
  margin: 0 0 5px 10px;
  background: #fff;
  font-size: 0.86em;
  -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
section a.btn_detail:hover{
  background: #FC8F6A;
  color: #FFF8EE;
}
section a.btn_detail::before{
  position: relative;
  top:-1px;
  content: "›› ";
}
.climate_box.climate_box_0 .bottom_column .desc{
  display: inline-block;
  vertical-align: middle;
  margin: 0 40px 0 0;
}
.climate_box.climate_box_0 .bottom_column .btn_climate_start{
  position: unset;
  display: inline-block;
  background-color: #FFF8EE;
  color: #664C37;
  border: 4px solid #664C37;
  padding: 0 50px;
  line-height: 80px;
  font-weight: 500;
  background-image: unset;
  -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.3s; -webkit-transition: all 0.3s;
  opacity: 1;
  width: unset;
  height: unset;
  margin-top: unset;
}
.climate_box.climate_box_0 .bottom_column .btn_climate_start:hover{
  background-color: #FC8F6A;
  background-image: unset;
  color: #FFF8EE;
  border: 4px solid #FC8F6A;
  font-size: 1.2em;
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
/*圖卡1 star*/
.card_column_1 .card_box{
  position: absolute;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  cursor: pointer;
  -webkit-box-shadow:inset 0px 0px 0px 10px #ffffff00;
  -moz-box-shadow:inset 0px 0px 0px 10px #ffffff00;
  box-shadow:inset 0px 0px 0px 10px #ffffff00;
}
.card_column_1 .card_box:hover{
  -webkit-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  -moz-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  box-shadow:inset 0px 0px 0px 10px #ffffffff;
  z-index: 2;
}
.card_column_1 .card_1{
  background-image: url('../images/climate_bg_1_1_0.svg');
  width: 27.19298246%;
  padding-bottom: 19.29824561%;
  left: 0%; top:0%;
  -webkit-border-radius:40px 0 0 0;
  -moz-border-radius:40px 0 0 0;
  border-radius:40px 0 0 0;
}
.card_column_1 .card_2{
  background-image: url('../images/climate_bg_1_2_0.svg');
  width: 27.19298246%;
  padding-bottom: 32.10526316%;
  left: 0%; bottom:0%; 
  -webkit-border-radius:0 0 0 40px;
  -moz-border-radius:0 0 0 40px;
  border-radius:0 0 0 40px;
}
.card_column_1 .card_3{
  background-image: url('../images/climate_bg_1_3_0.svg');
  width: 34.8245614%;
  padding-bottom: 29.56140351%;
  left: 27.19%; top:0%; 
}
.card_column_1 .card_4{
  background-image: url('../images/climate_bg_1_4_0.svg');
  width: 48.85964912%;
  padding-bottom: 21.84210526%;
  left: 27.19%; bottom:0%; 
}
.card_column_1 .card_5{
  background-image: url('../images/climate_bg_1_5_0.svg');
  width: 38.15789474%;
  padding-bottom: 29.56140351%;
  right: 0%; top:0%; 
  -webkit-border-radius:0 40px 0 0;
  -moz-border-radius:0 40px 0 0;
  border-radius:0 40px 0 0;
}
.card_column_1 .card_6{
  background-image: url('../images/climate_bg_1_6_0.svg');
  width: 24.03508772%;
  padding-bottom: 21.84210526%;
  right: 0%; bottom:0%; 
  -webkit-border-radius:0 0 40px 0;
  -moz-border-radius:0 0 40px 0;
  border-radius:0 0 40px 0;
}

.card_column_1 .hover_btn_1_1,
.card_column_1 .hover_btn_1_2,
.card_column_1 .hover_btn_1_3,
.card_column_1 .hover_btn_1_4,
.card_column_1 .hover_btn_1_5,
.card_column_1 .hover_btn_1_6{
  -webkit-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  -moz-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  box-shadow:inset 0px 0px 0px 10px #ffffffff;
  z-index: 2;
}
.card_desc_column .card_desc_memo{
  position: absolute;
  line-height: 1.4em;
  display: block;
  width: 100%;
  font-size: 0.8em;
  margin: 20px 0;
  padding: 0 10px;
  z-index: 1;
  text-align: justify; text-justify:inter-word; 
}
.card_desc_column .card_desc_memo::before{
  content: "請點選上方情境圖中的物件查看相關資訊，或左右滑動切換不同的情境圖。";
}                       
                        
.card_desc_column .card_desc{
  display: none;
  position: absolute;
  z-index: 3;
  background-color: #fff;
  min-width: 320px;
  -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
  color: #706FB2;
  padding:55px 20px 20px 20px;
  font-size: 1em;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.card_desc_column .card_desc .info_column{
  width: 97%;
  margin: 0 0 0 3%;
  display: block;
  line-height: 1.4em;
  overflow: hidden;
}
.card_desc_column .card_desc .info_column .icon{
  float: left;
  width: 70px;
  height: 70px;
  margin: 0 15px 0 0;
  background-repeat: no-repeat;
  -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
}
.card_desc_column .card_desc .info_column .icon.icon_01{
  background-image: url('../images/iocn_climate_status_1.png');
}
.card_desc_column .card_desc .info_column .icon.icon_02{
  background-image: url('../images/iocn_climate_status_2.png');
}
.card_desc_column .card_desc .info_column .icon.icon_03{
  background-image: url('../images/iocn_climate_status_3.png');
}
.card_desc_column .card_desc .info_column .info{
  float: right;
  width: calc(100% - 85px);
}
.card_desc_column .card_desc .info_column .info h3,
.card_desc_column .card_desc .info_column .info ul{
  margin: 6px 0;
}
.card_desc_column .card_desc .card_box_btn_close_desc{
  position: absolute;
  top:15px;
  right: 15px;
  width: 29px;
  height: 29px;
  margin: 0 0 15px 0;
  cursor: pointer;
  transform: rotate(0turn);
  -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
  transition: all 0.3s; -webkit-transition: all 0.3s;
  background: url('../images/icon_desc_close.svg') no-repeat;
  background-color: #706FB2;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
.card_desc_column .card_desc .card_box_btn_close_desc:hover{
  transform: rotate(0.5turn);
  background-color: #FC8F6A;
}
.card_desc_column .card_desc .arrow{
  position: absolute;
  bottom:-15px;
  left: calc(50% - 15px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #ffffff transparent transparent transparent;
}

.card_desc_column .card_desc.desc_1_1{top: 18%;left: 14%;}
.card_desc_column .card_desc.desc_1_2{top: 44%;left: 17%;}
.card_desc_column .card_desc.desc_1_3{top: 27%;left: 33%;}
.card_desc_column .card_desc.desc_1_4{top: 49%;left: 35%;}
.card_desc_column .card_desc.desc_1_5{top: 33%;left: 60%;}
.card_desc_column .card_desc.desc_1_6{top: 64%;left: 52%;}

.card_desc_column .card_desc .arrow_1_1{top: 31%;left: -20px;transform: rotate(90deg);}
.card_desc_column .card_desc .arrow_1_2{top: 48%;left: -20px;transform: rotate(90deg);}
.card_desc_column .card_desc .arrow_1_3{top: -15px;left: 47%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_1_4{bottom:-15px;left: 50%;}
.card_desc_column .card_desc .arrow_1_5{top: -15px;left: 60%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_1_6{top: 72%;left: calc(100% - 10px);transform: rotate(-90deg);}
/*圖卡1 end*/
/*圖卡2 star*/
.card_column_2 .card_box{
  position: absolute;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  cursor: pointer;
}
.card_column_2 .card_1{
  background-image: url('../images/climate_bg_2_1_0.svg');
  width: 34.21052632%;
  padding-bottom: 47.63157895%;
  left: 10%;
  top: 4%;
}
.card_column_2 .card_2{
  background-image: url('../images/climate_bg_2_2_0.svg');
  width: 17.71929825%;
  padding-bottom: 32.01754386%;
  left: 40%;
  top: 3%;
}
.card_column_2 .card_3{
  background-image: url('../images/climate_bg_2_3_0.svg');
  width: 21.49122807%;
  padding-bottom: 23.85964912%;
  left: 72%;
  top: 7%;
}
.card_column_2 .card_1:hover{
  background-image: url('../images/climate_bg_2_1_1.svg');
}
.card_column_2 .card_2:hover{
  background-image: url('../images/climate_bg_2_2_1.svg');
}
.card_column_2 .card_3:hover{
  background-image: url('../images/climate_bg_2_3_1.svg');
}

.card_column_2 .hover_btn_2_1{
  background-image: url('../images/climate_bg_2_1_1.svg') !important;
}
.card_column_2 .hover_btn_2_2{
  background-image: url('../images/climate_bg_2_2_1.svg') !important;
}
.card_column_2 .hover_btn_2_3{
  background-image: url('../images/climate_bg_2_3_1.svg') !important;
}

.card_desc_column .card_desc.desc_2_1{top: 55%;left: 6%;}
.card_desc_column .card_desc.desc_2_2{top: 45%;left: 37%;}
.card_desc_column .card_desc.desc_2_3{top: 57%;left: 66%;}

.card_desc_column .card_desc .arrow_2_1{top: -15px;left: 47%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_2_2{top: -15px;left: 29%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_2_3{top: -15px;left: 31%;transform: rotate(180deg);}
/*圖卡2 end*/
/*圖卡3 star*/
.card_column_3 .card_box{
  position: absolute;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  cursor: pointer;
}
.card_column_3 .card_1{
  background-image: url('../images/climate_bg_3_1_0.svg');
  width: 29.8245614%;
  padding-bottom: 40.87719298%;
  left: 9%;
  bottom: 0;
}
.card_column_3 .card_2{
  background-image: url('../images/climate_bg_3_2_0.svg');
  width: 21.66666667%;
  padding-bottom: 23.85964912%;
  left: 43%;
  top: 36%;
}
.card_column_3 .card_3{
  background-image: url('../images/climate_bg_3_3_0.svg');
  width: 31.57894737%;
  padding-bottom: 35.43859649%;
  left: 65%;
  bottom: 0;
}
.card_column_3 .card_1:hover{
  background-image: url('../images/climate_bg_3_1_1.svg');
}
.card_column_3 .card_2:hover{
  background-image: url('../images/climate_bg_3_2_1.svg');
}
.card_column_3 .card_3:hover{
  background-image: url('../images/climate_bg_3_3_1.svg');
}

.card_column_3 .hover_btn_3_1{
  background-image: url('../images/climate_bg_3_1_1.svg') !important;
}
.card_column_3 .hover_btn_3_2{
  background-image: url('../images/climate_bg_3_2_1.svg') !important;
}
.card_column_3 .hover_btn_3_3{
  background-image: url('../images/climate_bg_3_3_1.svg') !important;
}

.card_desc_column .card_desc.desc_3_1{top: 61%;left: 6%;}
.card_desc_column .card_desc.desc_3_2{top: 9%;left: 37%;}
.card_desc_column .card_desc.desc_3_3{top: 61%;left: 63%;}

.card_desc_column .card_desc .arrow_3_1{top: -15px;left: 47%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_3_2{bottom: -15px;left: 48%;transform: rotate(0deg);}
.card_desc_column .card_desc .arrow_3_3{top: -15px;left: 47%;transform: rotate(180deg);}
/*圖卡3 end*/
/*圖卡4 star*/
.card_column_4 .card_box{
  position: absolute;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  cursor: pointer;
}
.card_column_4 .card_1{
  background-image: url('../images/climate_bg_4_1_0.svg');
  width: 46.22807018%;
  padding-bottom: 51.40350877%;
  left: 0%;
  bottom: 0%;
  -webkit-border-radius:40px 0 0 40px;
  -moz-border-radius:40px 0 0 40px;
  border-radius:40px 0 0 40px;
  -webkit-box-shadow:inset 0px 0px 0px 10px #ffffff00;
  -moz-box-shadow:inset 0px 0px 0px 10px #ffffff00;
  box-shadow:inset 0px 0px 0px 10px #ffffff00;
}
.card_column_4 .card_2{
  background-image: url('../images/climate_bg_4_2_0.svg');
  width: 17.28070175%;
  padding-bottom: 32.80701754%;
  left: 48%;
  top: 17%;
}
.card_column_4 .card_3{
  background-image: url('../images/climate_bg_4_3_0.svg');
  width: 28.59649123%;
  padding-bottom: 17.80701754%;
  left: 70%;
  top: 0%;
}
.card_column_4 .card_4{
  background-image: url('../images/climate_bg_4_4_0.svg');
  width: 31.75438596%;
  padding-bottom: 39.64912281%;
  left: 65%;
  bottom: 0;
}
.card_column_4 .card_1:hover{
  -webkit-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  -moz-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  box-shadow:inset 0px 0px 0px 10px #ffffffff;
}
.card_column_4 .card_2:hover{
  background-image: url('../images/climate_bg_4_2_1.svg');
}
.card_column_4 .card_3:hover{
  background-image: url('../images/climate_bg_4_3_1.svg');
}
.card_column_4 .card_4:hover{
  background-image: url('../images/climate_bg_4_4_1.svg');
}

.card_column_4 .hover_btn_4_1{
  -webkit-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  -moz-box-shadow:inset 0px 0px 0px 10px #ffffffff;
  box-shadow:inset 0px 0px 0px 10px #ffffffff;
}
.card_column_4 .hover_btn_4_2{
  background-image: url('../images/climate_bg_4_2_1.svg') !important;
}
.card_column_4 .hover_btn_4_3{
  background-image: url('../images/climate_bg_4_3_1.svg') !important;
}
.card_column_4 .hover_btn_4_4{
  background-image: url('../images/climate_bg_4_4_1.svg') !important;
}

.card_desc_column .card_desc.desc_4_1{top: 16%;left: 6%;}
.card_desc_column .card_desc.desc_4_2{top: 46%;left: 39%;}
.card_desc_column .card_desc.desc_4_3{top: 21%;left: 66%;}
.card_desc_column .card_desc.desc_4_4{top: 56%;left: 70%;}

.card_desc_column .card_desc .arrow_4_1{bottom: -15px;left: 48%;transform: rotate(0deg);}
.card_desc_column .card_desc .arrow_4_2{top: -15px;left: 47%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_4_3{top: -15px;left: 81%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_4_4{bottom: -15px;left: 21%;transform: rotate(0deg);}
/*圖卡4 end*/
/*圖卡5 star*/
.card_column_5 .card_box{
  position: absolute;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  cursor: pointer;
}
.card_column_5 .card_1{
  background-image: url('../images/climate_bg_5_1_0.svg');
  width: 60.52631579%;
  padding-bottom: 17.89473684%;
  left: 4%;
  top: 3.4%;
}
.card_column_5 .card_2{
  background-image: url('../images/climate_bg_5_2_0.svg');
  width: 81.40350877%;
  padding-bottom: 10.43859649%;
  left: 0%;
  top: 43%;
}
.card_column_5 .card_3{
  background-image: url('../images/climate_bg_5_3_0.svg');
  width: 36.84210526%;
  padding-bottom: 22.80701754%;
  left: 2%;
  top: 41%;
}
.card_column_5 .card_4{
  background-image: url('../images/climate_bg_5_4_0.svg');
  width: 26.14035088%;
  padding-bottom: 19.03508772%;
  left: 34%;
  top: 56%;
}
.card_column_5 .card_5{
  background-image: url('../images/climate_bg_5_5_0.svg');
  width: 28.07017544%;
  padding-bottom: 13.68421053%;
  left: 55%;
  top: 68%;
}
.card_column_5 .card_6{
  background-image: url('../images/climate_bg_5_6_0.svg');
  width: 15.78947368%;
  padding-bottom: 13.68421053%;
  left: 80%;
  top: 71%;
}
.card_column_5 .card_1:hover{
  background-image: url('../images/climate_bg_5_1_1.svg');
}
.card_column_5 .card_2:hover{
  background-image: url('../images/climate_bg_5_2_1.svg');
}
.card_column_5 .card_3:hover{
  background-image: url('../images/climate_bg_5_3_1.svg');
}
.card_column_5 .card_4:hover{
  background-image: url('../images/climate_bg_5_4_1.svg');
}
.card_column_5 .card_5:hover{
  background-image: url('../images/climate_bg_5_5_1.svg');
}
.card_column_5 .card_6:hover{
  background-image: url('../images/climate_bg_5_6_1.svg');
}

.card_column_5 .hover_btn_5_1{
  background-image: url('../images/climate_bg_5_1_1.svg') !important;
}
.card_column_5 .hover_btn_5_2{
  background-image: url('../images/climate_bg_5_2_1.svg') !important;
}
.card_column_5 .hover_btn_5_3{
  background-image: url('../images/climate_bg_5_3_1.svg') !important;
}
.card_column_5 .hover_btn_5_4{
  background-image: url('../images/climate_bg_5_4_1.svg') !important;
}
.card_column_5 .hover_btn_5_5{
  background-image: url('../images/climate_bg_5_5_1.svg') !important;
}
.card_column_5 .hover_btn_5_6{
  background-image: url('../images/climate_bg_5_6_1.svg') !important;
}

.card_desc_column .card_desc.desc_5_1{top: 17%;left: 6%;}
.card_desc_column .card_desc.desc_5_2{top: 5.5%;left: 55%;}
.card_desc_column .card_desc.desc_5_3{top: 63%;left: 2%;}
.card_desc_column .card_desc.desc_5_4{top: 29%;left: 28%;}
.card_desc_column .card_desc.desc_5_5{top: 35%;left: 50%;}
.card_desc_column .card_desc.desc_5_6{top: 56%;left: 72%;}

.card_desc_column .card_desc .arrow_5_1{top: -15px;left: 47%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_5_2{bottom:-15px;left: 29%;}
.card_desc_column .card_desc .arrow_5_3{top: -15px;left: 47%;transform: rotate(180deg);}
.card_desc_column .card_desc .arrow_5_4{bottom:-15px;left: 50%;}
.card_desc_column .card_desc .arrow_5_5{bottom:-15px;left: 50%;}
.card_desc_column .card_desc .arrow_5_6{bottom:-15px;left: 50%;}
/*圖卡5 end*/
/*聆聽的安全氣候 end*/
/**********************************/
/*soundof star*/
.soundof_column{
  width: 100%;
  display: block;
  margin: 40px 0;
}
.soundof_column .box_soundof{
  width: 100%;
  display: block;
  margin: 0 0 50px 0;
}
.soundof_column .box_soundof .pic{
  display: inline-block;
  width: 30%;
  margin: 0 2% 0 0;
  vertical-align: top;
  line-height: 0;
}
.soundof_column .box_soundof .pic img{
  width: 100%;
  overflow: hidden;
  -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;
  line-height: 0;
}
.soundof_column .box_soundof .desc{
  display: inline-block;
  color: #4D4D4D;
  background-color: #EDD0B4;
  width: calc(68% - 8px);
  padding:5%; 
  overflow: hidden;
  -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;
  vertical-align: top;
}
/*soundof end*/
/**********************************/
/*main_05*********************************/
/*專欄好文 search star*/
.main_05_search_column{
	display: block;
	width: 100%;
}
.main_05_search_column .icon{
	display: inline-block;
	width: 45px;
	height: 45px;
	vertical-align: top;
	background: url('../images/icon_mobile_search_main.svg') no-repeat center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.main_05_search_column .main_05_search_input{
	font-size: 1em;
	border: 3px solid #706FB2;
	padding:6px 12px;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
	vertical-align: top;
}
.main_05_search_column .main_05_search_input:focus{
	outline: none;
}
/*專欄好文 search end*/
/*專欄好文 category star*/
.good_article_column{
	width: 100%;
	display: block;
	margin: 50px 0;
}
.good_article_column .box_category{
	position: relative;
	overflow: hidden;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
	background-color: #F4F1DE;
	margin: 0 0 80px 0;
}
.good_article_column .box_category .pic{
	display: inline-block;
	width: 36%;
	padding-bottom: 26%;
	background-repeat: no-repeat;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	background-position: center;
	vertical-align: top;
	line-height: 0;
	overflow: hidden;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
.good_article_column .box_category .pic img{
	width: 100%;
	line-height: 0;
}
.good_article_column .box_category .pic.pic_01{
	background-image: url('../images/main_05_category_01.png');
}
.good_article_column .box_category .pic.pic_02{
	background-image: url('../images/main_05_category_02.png');
}
.good_article_column .box_category .pic.pic_03{
	background-image: url('../images/main_05_category_03.png');
}
.good_article_column .box_category .pic.pic_04{
	background-image: url('../images/main_05_category_04.png');
}
.good_article_column .box_category .pic.pic_05{
	background-image: url('../images/main_05_category_05.png');
}
.good_article_column .box_category .desc{
	position: relative;
	display: inline-block;
	width: calc(64% - 10px);
	vertical-align: top;
	padding: 5%;
}
.good_article_column .box_category .desc .title{
	font-size: 1.4em;
	font-weight: 500;
	color: #583D2B;
	width: 100%;
	margin: 0 0 2% 0;
}
.good_article_column .box_category .desc .info{
	width: 100%;
	margin: 0 0 40px 0;
}
.good_article_column .box_category .desc .btn{
	width: 100%;
	text-align: right;
}
.good_article_column .box_category .desc a{
	display: inline-block;
	text-decoration: unset;
	color: #fff;
	padding:4px 12px 6px 12px;
	background: #706FB2;
	-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
.good_article_column .box_category .desc a:hover{
	background: #FC8F6A;
}
.good_article_column .box_category .desc a::before{
	position: relative;
	top:-1px;
	content: "›› 更多文章";
}
/*專欄好文 category end*/
/*專欄好文 list star*/
.good_article_list{
  width: 100%;
  display: block;
  margin: 40px 0 0 0;
  text-align: center;
}
.good_article_list .box_link{
  width: 28%;
  display: inline-block;
  background-color: #706FB2;
  background-position: top center;
  background-repeat: no-repeat;
  vertical-align: top;
  margin: 0 2.3% 60px 2.3%;
  -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
  -moz-background-size:100.5% auto; -webkit-background-size:100.5% auto; -o-background-size:100.5% auto; background-size:100.5% auto;
}
.good_article_list .box_link.bg_01{background-image: url('../images/bg_paper_link_01.png');}
.good_article_list .box_link.bg_02{background-image: url('../images/bg_paper_link_02.png');}
.good_article_list .box_link.bg_03{background-image: url('../images/bg_paper_link_03.png');}
.good_article_list .box_link.bg_04{background-image: url('../images/bg_paper_link_04.png');}
.good_article_list .box_link.bg_05{background-image: url('../images/bg_paper_link_05.png');}

.good_article_list .box_link:hover{
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}

.good_article_list .box_link a{
  display: block;
  width: 100%;
  padding: 60% 15px 20px 15px;
  vertical-align: bottom;
  text-align: center;
  color: #fff;
  text-decoration: unset;
}
.good_article_list .box_link a .title{
  width: 100%;
  display: block;
  word-break: break-all;
}
/*專欄好文 list end*/
/*專欄好文 info star*/
section.main_05_area_top{
	font-size: 1.1em;
	position: relative;
	z-index: 2;
  width: calc(100% - 20px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 1% 6%;
  -webkit-border-radius:40px;	-moz-border-radius:40px; border-radius:40px;
}
section.main_05_area_top h2{
	position: relative;
	font-size: 2.5em;
	letter-spacing: 2px;
	margin: 50px 0 10px 0;
}
section.main_05_area_top h2::before{
	content: " ";
	position: absolute;
	display: inline-block;
	top:6px;
	left: -90px;
	width: 80px;
	height: 80px;
	background: url('../images/main_05_info_title.png') no-repeat center;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
}
section.main_05_area_top .hashtag_column{
	width: 100%;
}
section.main_05_area_top .hashtag_column span.hashtag{
	display: inline-block;
	margin: 0 5px 0 0;
  cursor: pointer;
}
section.main_05_area_top .hashtag_column span.hashtag:hover{
  color: #FC8F6A;
}
section.main_area_top .hashtag_column{
  width: 100%;
  padding: 20px 0 0 60px;
  display: block;
}
section.main_area_top .hashtag_column span.hashtag{
  display: inline-block;
  margin: 0 5px 0 0;
  cursor: pointer;
}
section.main_area_top .hashtag_column span.hashtag:hover{
  color: #FC8F6A;
}
section.main_05_area_top .editor_column{
	width: 100%;
	font-size: 0.9em;
	text-align: right;
	margin-top: 20px; 
}
section.main_05_area_top .editor_column span.date,
section.main_05_area_top .editor_column span.author{
	display: inline-block;
}
section.main_05_area_top .editor_column span.date::before{
	content: "時間：";
}
section.main_05_area_top .editor_column span.date::after{
	content: "；";
}
section.main_05_area_top .editor_column span.author::before{
	content: "作者：";
}
.text_column{
	font-size: 1em;
	line-height: 1.8em;
}
.text_column img{
	max-width: 100%;
}
.text_column .ref{
	margin: 40px 0 0 0;
	font-size: 0.9em;
	color: #4D4D4D;
}
.text_column .ref::before{
	content: "參考資料來源：";
}
/*專欄好文 info end*/
/*專欄好文 share star*/
.main_05_float_column{
  position: fixed;
  z-index: 99999;
  bottom: 120px;
  left: 5%;
  transition: all 0.3s; -webkit-transition: all 0.3s;
}
.main_05_float_column .option{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 0 20px 0;
  cursor: pointer;
}
.main_05_float_column .option img.icon:hover{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
.main_05_float_column .option .qrcode{
  position: absolute;
  top: 20px;
  left:-140px;
  width: 133px;
  height: 100px;
}
.main_05_float_column .option .qrcode img{
  width: 100%;
}
/*專欄好文 share end*/
article.main_05_info{
	padding: 60px 0 12% 0;
}
/**********************************/
/*main_06*********************************/
/*Line@護耳小當家朵朵 star*/
.main_06_area_01_left_column{
	display: inline-block; vertical-align: top;
	padding-right: 10px;
	width: 70%;
}
.main_06_area_01_right_column{
	display: inline-block; vertical-align: top;
	text-align: center;
	width: 29%;
}
.main_06_area_01_right_column img{
	width: 80%;
}
/*Line@護耳小當家朵朵 end*/
/*PSA 華科基金會 star*/
.doll_column{
	width: 100%;
	text-align: center;
	margin-top: 40px;
}
.box_doll{
	display: inline-block;
	width: 27%;
	vertical-align: top;
	text-align: center;
	margin-bottom: 60px;
	margin-left: 4%;
	margin-right: 4%;
}
.box_doll:first-child{
	margin-left: 0;
	margin-right: 4%;
}
.box_doll:nth-child(3n){
	margin-left: 4%;
	margin-right: 0;
}
.box_doll a .pic,
.box_doll a .pic img{
	width: 100%;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
	line-height: 0;
}
.box_doll a:hover .pic{
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
.box_doll a .title{
  display: inline-block;
  color: #ffffff;
  font-size: 1.1em;
  font-weight: 500;
  background: #583D2B;
  vertical-align: text-top;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  padding: 0 15px;
  margin: 15px 0 6px 0;
}
.box_doll a{
	color: #583D2B;
	text-decoration: unset;
}
/*PSA 華科基金會 end*/
/*專家顧問群 star*/
.advisor_column{
	width: 100%;
	text-align: center;
	margin-top: 40px;
}
.box_advisor{
	display: inline-block;
	width: 27%;
	vertical-align: top;
	text-align: center;
	margin-bottom: 60px;
	margin-left: 2.8%;
	margin-right: 2.8%;
}
.box_advisor a .pic{
	width: 100%;
	max-width: 180px;
	padding-bottom: 150px;
	margin: 0 auto;
	background-position: top center;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.box_advisor a:hover .pic{
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
.box_advisor a .title{
	width: 100%;
  display: block;
  font-size: 1.4em;
  color: #583D2B;
  border-bottom: 2px solid #583D2B; 
  padding: 0 6px 6px 6px;
  margin: 15px 0 6px 0;
}
.box_advisor a{
	color: #4D4D4D;
	text-decoration: unset;
}
/*專家顧問群 end*/
/*合作單位 star*/
.collaboration_column{
	width: 100%;
	text-align: center;
	margin-top: 40px;
}
.box_collaboration{
	display: inline-block;
	width: 27%;
	vertical-align: top;
	text-align: center;
	margin-bottom: 60px;
	margin-left: 2.8%;
	margin-right: 2.8%;
}
.box_collaboration a .pic{
	width: 100%;
	max-width: 180px;
	padding-bottom: 150px;
	margin: 0 auto;
	background-position: top center;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
}
.box_collaboration a:hover .pic{
  -webkit-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  -moz-box-shadow: 0 0 15px rgba(255,248,238,0.75);
  box-shadow: 0 0 15px rgba(255,248,238,0.75);
}
.box_collaboration a .title{
	width: 100%;
  display: block;
  color: #583D2B;
  font-size: 1.4em;
  padding: 0 6px 0px 6px;
  margin: 15px 0 0px 0;
}
.box_collaboration a{
	color: #4D4D4D;
	text-decoration: unset;
}
/*合作單位 end*/
/*search star*/
.result_column{
  width: 100%;
  display: block;
}
.box_result{
	width: 100%;
	display: block;
	margin: 0 0 10px 0;
}
.box_result a{
	width: 100%;
	text-decoration: unset;
	color: #706FB2;
	display: block;
	background-color: #FFF8EE;
	padding: 10px 20px;
	-webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
	transition: all 0.3s; -webkit-transition: all 0.3s;
}
.box_result a:hover{
	color: #FC8F6A;
	font-weight: 500;
}
/*search end*/