/*------MOBILE FIRST------*/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif);
.wf-loading main { opacity: 0; visibility: hidden;}
.ie.wf-loading main { visibility: hidden; }
.ie.wf-active main { visibility: visible;}
.wf-active main { visibility: visible; opacity: 1; -webkit-transition: opacity 0.64s ease-in-out; -moz-transition: opacity 0.64s ease-in-out; transition: opacity 0.64s ease-in-out;}
strong { color: #e32b2b; font-weight: 500; font-size: 1.2rem; }
.sword { font-size: .8824rem; font-style: normal; font-weight: 100; }
a.link { color: #094; border-bottom: 1px solid #094; }
a.link:hover { color: #e32b2b;  border-bottom-color: transparent;}
a.download { background-image: url(../images/download-button.svg); background-repeat: no-repeat; -webkit-background-size: 1.1rem; background-size: 1.1rem; padding-left: 1.7rem; background-position: .3rem center; }
.adSlider { max-width: 300px; margin: auto; text-align: center; }
.adSlider:after { content: ""; width: 100%; height: 1rem; display: block; }
.messageBox { background-color: #fff5df; padding: 1.5rem 0; }
.pconly { display: none; }
/*--ARTICLE--*/
article h1 { font-family: "source-han-serif-tc", sans-serif; font-style: normal; position: relative; color: #ff7506; font-size: 2rem; line-height: 1.4; font-weight: 700; padding: 0 1.4rem; margin: .5rem 0; }
article h1:before { content: ""; background-color: #ff7506; height: 3rem; width: .9rem; position: absolute; left: 0; top: 0; }
article h2 { color: #e32b2b; font-weight: 800; font-size: 1.3529rem; line-height: 1.3; margin-bottom: .8rem; }
article .author { display: flex; justify-content: flex-end; font-style: normal; font-weight: 100; }
article .author li { margin-left: 1rem; }
article .noticeLine { background-image: url(../images/noticeline.png); background-repeat: repeat-x; -webkit-background-size: 120px; background-size: 120px; background-position: left bottom;}
article blockquote { background: #fff5e5; margin: 1rem 0; padding: 1rem; quotes: "\201C""\201D""\2018""\2019";}
blockquote:before { color: #f39800; content: open-quote; font-size: 3rem; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; }
blockquote:after { color: #f39800; content: close-quote; font-size: 3rem; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; }
.imgBox { font-size: .8824rem; font-style: normal; font-weight: 100; text-align: center; color: #888; line-height: 1.5; margin-bottom: .5rem; }
.imgBox > div { line-height: 0; margin: auto; margin-bottom: .2rem; }
.pieChart { margin-bottom: 1rem; }
.pieChart svg { display: block; margin:auto;}
.pieChart path { stroke-width:0 !important; }
.chartColorCube { display: inline-block; vertical-align: middle; margin:0 .3rem 2px .3rem; width: 1rem; height: 1rem; background-color: #CCC; }
.chartColorCube.blue { background-color: #2e84da; }
.chartColorCube.orange { background-color: #fb9932; }
.chartColorCube.green { background-color: #6ab61f; }
.gogoBox { display: flex; justify-content: space-between; max-width: 1180px; margin: auto; margin-bottom: 1rem; letter-spacing: .005rem;}
.gogoBox > div { flex:0 0 49.9%; }
.gogoBox > div div.img { line-height: 0; max-height: 230px; overflow: hidden; }
.gogoBox > div div.img:before { content: ""; background-image: url(../images/go_prev.png); -webkit-background-size: 30px; background-size: 30px; background-position: 50% center; background-repeat: no-repeat; background-color: rgba(0,0,0,.65); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all .3s; }
.gogoBox > div:hover div.img:before { background-position: 47% center; background-color: rgba(0,0,0,.25); }
.gogoBox > div div.txt { padding:.5rem; line-height: 1.5; }
.gogoBox > div div.txt .sword { color: #ff7506; }
.gogoBox > div:hover div.txt { color: #094; }
.gogoBox > div.goNext { text-align: right; }
.gogoBox > div.goNext div.img:before { background-image: url(../images/go_next.png); }
.gogoBox > div.goNext:hover div.img:before { background-position: 53% center; }

.stepSlider { padding: 0 1rem; margin-bottom: 1rem; }
.stepSlider .stepBox { border: 1px solid #eee; padding: .5rem; margin: 0 .5rem; line-height: 1.6; }
.stepSlider .stepBox p { margin-bottom: 0; margin-top: .3rem; }
.stepSlider .slick-next { right: -15px; }
.stepSlider .slick-prev { left: -15px; }
.stepSlider .slick-prev.slick-disabled:before, .stepSlider .slick-next.slick-disabled:before { opacity: 0; }

.case2selectBox ul { display: flex; flex-wrap: wrap; justify-content: center;}
.case2selectBox li { margin: .3rem; line-height: 40px; height: 40px; text-align: center; width: 80px; -webkit-border-radius: 4px; border-radius: 4px; color: #888; background-color: #ffedd5;border:1px solid #f0ca97;}
.case2selectBox li.on { color: #FFF; background-color: #2e84da; border-color: #225e9a;}
.infowording { margin-top: .5rem; -webkit-border-radius: 4px; border-radius: 4px; padding: .5rem; border:1px solid #ddd; }
.infowording:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 12px 9px 0 9px; border-color: #ddd transparent transparent transparent; position: absolute; bottom: -12px; left: 40px; }
.infowording:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 12px 9px 0 9px; border-color: #FFF transparent transparent transparent; position: absolute; bottom: -10px; left: 40px; }
.northmapBox { margin-bottom:1rem; }
.svgBox { line-height: 0; }
.hospitalBox { margin-top: -2.2rem; /*position: absolute; z-index: 40; background-color: #fff;*/ background-image: url(../images/hospital.svg); -webkit-background-size: 4rem; background-size: 2.5rem; background-repeat: no-repeat;}
.hospitalBox p { margin-bottom: 0; }
.hospitalBox p.name { font-weight: 500; font-size: 1.2rem; padding-left: 2.65rem; margin-bottom: .5rem; text-shadow: 0 0 15px #FFF,0 0 15px #FFF,0 0 15px #FFF,0 0 15px #FFF;}
.hospitalBox li { display: inline; background-image: url(../images/hospital_plus.svg); background-repeat: no-repeat; -webkit-background-size: 1rem; background-size: 1rem; background-position: 0 .3rem; padding-left: 1.2rem; }
.hospitalBox li:after { content: "、"; }
.hospitalBox li:last-child:after { content: "";}

.carBox { width: 100%; font-size: 0.9rem; text-align: center; position: absolute; bottom:2.1rem; left: 0; text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;}
.carBox p { position: relative; background-image: url(../images/transport.svg); background-repeat: no-repeat;-webkit-background-size: 50px; background-size: 50px; background-position: top center; padding-top: 50px;}
.carBox p:before,.carBox p:after { content: ""; width: 0; height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent #334D5C transparent transparent; position: absolute; left: 0; top:21px; }
.carBox p:after { -webkit-transform: rotate(180deg);transform: rotate(180deg); left: inherit; right: 0; }
.carBox:before { content: ""; width: 98%; border-bottom: 2px dotted #334D5C; position: absolute; top:25px; left: 1%; }
.supportHospitals ul { display: flex; justify-content: center;}
.supportHospitals li { flex: 0 0 33%; font-size: 0.9rem; background-color: #2e84da; color: #FFF; text-align: center; font-weight: 400; line-height: 1.4; padding: .2rem 0; }
.supportHospitals li span { display: block; font-weight: 200; }
.supportHospitals li:nth-child(2) { background-color: #fb9932; }
.supportHospitals li:nth-child(3) { background-color: #6ab61f;}
.mapwording { padding-top: .5rem; margin-bottom: 1rem;}
.mapwording h2,.mapwording p { margin-bottom: 0; }
.mapwording strong { color: #094; }
.mapwording .fa { margin-right: 0.2rem; }
.mapwording ul { display: flex; flex-wrap: wrap;}
.mapwording li { padding: .2rem .4rem; line-height: 1.4; background-color: #FFE780; -webkit-border-radius: 4px; border-radius: 4px; margin-right: .3rem; margin-bottom: .3rem; font-size: .9rem;}

.zoneBox { margin-bottom: 0.1rem;}
.zoneBox:last-child { margin-bottom: 1rem; }
.selectBar { color: #FFF; padding:.5rem 3rem .5rem .5rem; background: #ff6c2d;background: -moz-linear-gradient(top, #ff6c2d 38%, #ff6c2d 38%, #ffac38 98%);background: -webkit-linear-gradient(top, #ff6c2d 38%,#ff6c2d 38%,#ffac38 98%);background: linear-gradient(to bottom, #ff6c2d 38%,#ff6c2d 38%,#ffac38 98%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6c2d', endColorstr='#ffac38',GradientType=0 );}
.selectBar:before,.selectBar:after { content: ""; width: 12px; height: 1px; background-color: #FFF; position: absolute; right: .8rem; top:50%; margin-top: -4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 1px;}
.selectBar:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: 8px;}
.selectBar.check:before,.selectBar.check:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -1px;}
.selectBar.check:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.zone_detail { padding: .5rem .8rem; border:1px solid #ccc; border-top: none; margin-bottom: 1rem; display: none;}
.zone_detail .blockBox { border-bottom: 1px dotted #ccc; margin-bottom: 1rem; padding: 0 .3rem; }
.zone_detail .blockBox:last-child { border:none; margin-bottom: 0; }
.zone_detail .blockBox .location { font-size: 1.3rem; font-weight: 600; color: #094; margin-left: -.3rem; }
.zone_detail .blockBox .fa { width: 2.2rem; height: 2.2rem; font-size: 1.6rem; line-height: 1.4; text-align: center; background-color: #094; color: #FFF; -webkit-border-radius: 20px; border-radius: 20px; display: inline-block; vertical-align: middle; margin-right: .2rem; }
.zone_detail .blockBox .close { width: 220px; margin: auto; text-align: center; padding: .6rem 0; margin-bottom: 1rem; color: #FFF; background: #ff7506; background: -moz-linear-gradient(-45deg, #ff7506 0%, #cb1b23 100%); background: -webkit-linear-gradient(-45deg, #ff7506 0%,#cb1b23 100%); background: linear-gradient(135deg, #ff7506 0%,#cb1b23 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7506', endColorstr='#cb1b23',GradientType=1 );}

.videoBox_fb { width:100%; max-width: 720px; margin: auto; margin-bottom: 1rem; }

.compareBox { margin-bottom: 1rem; }
.compareBox .pconly { display: none; }
.unvisibleBtn { position: absolute; width: 100%; height: 100%; left: 0; top:0; }
.unvisibleBtn div { width: 44%; height: 10%; position: absolute; left: 0;}
.unvisibleBtn div#unbtn1 { top:39%; }
.unvisibleBtn div#unbtn2 { top:56%; }
.unvisibleBtn div a { position: relative; display: block; width: 100%; height: 100%; }
.unvisibleBtn div:before { content: ""; background-image: url(../images/i_left.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 30px; height: 30px; position: absolute; top:1%; left:2%; animation-name: flash; animation-iteration-count: infinite; animation-duration: 2s; }

.zone_detail #person1 { background-image: url(../images/girl.png); background-repeat: no-repeat; -webkit-background-size: 150px; background-size: 153px; padding-top: 160px; background-position: center top; }
.zone_detail #person2 { background-image: url(../images/man.png); background-repeat: no-repeat; -webkit-background-size: 150px; background-size: 153px; padding-top: 160px; background-position: center top; }
.zone_detail #person1 .location,.zone_detail #person2 .location { text-align: center; }
.zone_detail #person1 .location .sword,.zone_detail #person2 .location .sword { display: block; }

/*.s_hospital { background-image: url(../images/hospital.svg); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 26px; height: 26px; position: absolute; top:19.5%; left:58.3%; margin-left: -13px; margin-top: -13px;}*/

.path {
  stroke-dasharray: 15;
  animation: dash 13s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

.tipsWording { background-image: url(../images/013-warning.svg); background-repeat: no-repeat; -webkit-background-size: 1.7rem; background-size: 1.7rem; padding-left: 2rem; background-position: 0 .1rem; font-weight: 500;}

.mainPieChart { width: 240px; height: 240px; margin: auto; margin-bottom: 1rem; }
.mainPieChart .pie { top:0px; left:0px; margin-left:120px; position:absolute; width:120px; height:240px; overflow:hidden; border-radius:0 120px 120px 0; transform-origin: center center; /*-webkit-animation:a 3s linear forwards;*/ }
.mainPieChart .pie:before,.mainPieChart .pie:after { content:"";box-sizing:border-box;position:absolute;top:0;right:0; width:240px;height:120px;border-radius:120px 120px 0 0;transform-origin:120px 120px;}
.mainPieChart .pie:before { z-index:1; transform:rotate(-90deg); }
/*超過180才需要控制after*/
.mainPieChart .pie:after { opacity:0; z-index:2; transform:rotate(-90deg); /*-webkit-animation:a2 3s linear forwards;*/}
.mainPieChart #pie1:before,.mainPieChart #pie1:after { background:#2e84da; }
.mainPieChart.aniGo #pie1:before { -webkit-animation: animation1 1.2s linear forwards; animation-delay: 1s;}
.mainPieChart #pie2 { transform: rotate(131deg); left: -98px; top:43px;  }
.mainPieChart #pie2:before,.mainPieChart #pie2:after { background:#fb9932; }
.mainPieChart.aniGo #pie2:before { -webkit-animation: animation2 1.2s linear forwards; animation-delay: 2.7s;}
.mainPieChart #pie3 { transform: rotate(-78deg); left: -47px; top:-59px;  }
.mainPieChart #pie3:before,.mainPieChart #pie3:after { background:#6ab61f; }
.mainPieChart.aniGo #pie3:before { -webkit-animation: animation3 1.2s linear forwards; animation-delay: 4.4s;}
.mainPieChart .info { position: absolute; text-align: center; color: #FFF; z-index: 50; line-height: 1.4; }
.mainPieChart #info1 { left: 59%; top:30%; }
.mainPieChart #info2 { left: 29%; top:62%; }
.mainPieChart #info3 { left: 11.5%; top:18%; }


@-webkit-keyframes animation1{
  0%{ 
    transform:rotate(-90deg);
  }
  100%{ 
    /*transform:rotate(131.04deg);*/
    transform:rotate(41deg);
    /*360*0.364-90*/
  }
}
@-webkit-keyframes animation2{
  0%{ 
    transform:rotate(-90deg);
  }
  100%{ 
    /*transform:rotate(131.04deg);*/
    transform:rotate(61deg);
    /*360*0.419-90*/
  }
}
@-webkit-keyframes animation3{
  0%{ 
    transform:rotate(-90deg);
  }
  100%{ 
    /*transform:rotate(131.04deg);*/
    transform:rotate(-12deg);
    /*360*0.217-90*/
  }
}
@-webkit-keyframes a2{
  0%{
    opacity:0;
  }
  49.99%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:1;
  }
}
@-webkit-keyframes a{
  0%{
    margin-left:100px;
    width:50px;
    border-radius:0 100px 100px 0;
  }
  100%{
    margin-left:100px;
    width:100px;
    border-radius:0 100px 100px 0;
  }
  /*50%{
    margin-left:0;
    width:100px;
    border-radius:0;
  }
  100%{
    margin-left:0;
    width:100px;
    border-radius:0;
  }*/
}

/*大於653時%*/
@media screen and (min-width: 653px){
	.zone_detail #person1,.zone_detail #person2 { background-position: left 3px; padding-top: 0; padding-left: 165px;}
	.zone_detail #person1 .location,.zone_detail #person2 .location { text-align: left; }
	.zone_detail #person1 .location .sword,.zone_detail #person2 .location .sword { display: inline; }
}
/*大於768時%*/
@media screen and (min-width: 768px){
	article .kvBox { max-height: 400px; overflow: hidden; display: flex; justify-content: center; align-items: center; }
	.imgBox > div { width: 80%; max-width: 720px; }
	.adSlider { max-width: inherit; display: flex; justify-content: center; margin-bottom: 1rem; }
	.adSlider > div { max-width: 300px; margin: 0 1rem;}
	.adSlider:after { display: none; }
	.stepSlider { padding: 0 1rem; margin-bottom: 1rem; }
	.stepSlider .stepBox { margin: 0 1rem; }
	.stepSlider .stepBox p { margin-bottom: .3rem; margin-top: .1rem; padding: 0 .5rem; }
	.stepSlider .stepBox >div:after { content: ""; background-image: url(../images/case_arrow.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 40px; height: 67px; position: absolute; right: -50px; top:50%; margin-top: -33px; z-index: 60; animation-name: fadeInLeft; animation-duration: 1.4s; animation-iteration-count: infinite;}
	.stepSlider .stepBox:last-child >div:after { display: none; }
	
	.case2selectBox { border-bottom:1px solid #f0ca97; }
	.case2selectBox li { position: relative; margin: 0; flex: 0 0 14%; width: auto; -webkit-border-radius: 0; border-radius: 0; color: #888; border-bottom: none; border-left-width:0; transition: none;}
	.case2selectBox li:first-child { border-left-width:1px;}
	.case2selectBox li.on { border-color: #2e84da;}
	.case2selectBox li.on:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 12px 9px 0 9px; border-color: #2e84da transparent transparent transparent; position: absolute; bottom: -10px; left: 50%; margin-left: -9px;}
	.infowording { border:none; display: none; }
	.infowording:before,.infowording:after { display: none; }
	.hospitalBox { width: 70%; max-width: 340px; margin-top: 0; position: absolute; bottom: 0; left: 0; z-index: 40; background-color: rgba(255,255,255,.75); -webkit-background-size: 10rem; background-size: 8rem; padding: .5rem; background-position: .5rem 1rem; padding-left: 9rem; -webkit-border-radius: 4px; border-radius: 4px;}
	.hospitalBox p { margin-bottom: 0; }
	.hospitalBox p.name { padding-left: 0; margin-bottom:0; text-shadow:none;}
	.hospitalBox ul { display: flex; flex-wrap: wrap; }
	.hospitalBox li { flex: 0 0 150px; display: block; padding-left: 1.2rem; background-position: 0 .6rem; }
	.hospitalBox li:after { content: ""; }
	
	.carBox { font-size: 1rem; bottom:2rem; }
	.carBox p { -webkit-background-size: 100px; background-size: 100px; padding-top: 100px;}
	.carBox p:before,.carBox p:after { border-style: solid;border-width: 8px 14px 8px 0; top:42px; }
	.carBox:before { border-bottom: 4px dotted #334D5C; top:48px; }
	.supportHospitals li { font-size: 1rem; padding: .7rem 0; }
	.supportHospitals li span { display: inline-block; margin-left: .2rem; }
	.mapwording { position: absolute; bottom: 45px; left: 5%; margin-left: -12px; width: 90%; background-color: rgba(255,255,255,.9); padding: 10px; border:2px solid #ccc; border-radius: 8px;}
	.mapwording ul { display: flex; flex-wrap: wrap;}
	.mapwording li { padding: .2rem .6rem; font-size: 1rem;}
	.case1Box { max-width: 800px; margin: auto; }
	.mapwording .close { position: absolute; right: 3px; top: 3px; width: 45px; height: 45px; cursor: pointer;}
	.mapwording .close:hover {opacity: .65;}
	.mapwording .close:before, .mapwording .close:after { content: ""; position: absolute; top:21px; left: 5px; width: 75%; height: 4px; background-color: #888; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	.mapwording .close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

	.taiwanMap { flex:0 0 400px; background-image: url(../images/map.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 400px; height: 693px; margin: auto; }
	.taiwanMap .dot { position: absolute; background-image: url(../images/map_dot.png);  background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 30px; height: 45px; animation-name: bounce; animation-duration: 2s; animation-iteration-count: infinite; }
	.taiwanMap .dot:hover { animation-name: none; cursor: pointer; }
	.taiwanMap .dot a { display: block; width: 100%; height: 100%; }
	#dot_taipei { left: 72%; top:1.5%; }
	#dot_newtaipei { left: 69%; top:8.5%; }
	#dot_taichung { left: 32%; top:28%; }
	#dot_nantou { left: 42%; top:39%; }
	#dot_kaoshoung { left: 12%; top:69%; }
	#dot_pintong { left: 26%; top:78%; }
	#dot_taitong { left: 48%; top:66%; }
	.taiwanContent {display: none;}
	.pcflex { display: flex; }

	.pconly { display: block; }
	.unvisibleBtn div { width: 18%; height: 17%; }
	.unvisibleBtn div#unbtn1 { top:21%; left: 31%; }
	.unvisibleBtn div#unbtn2 { top:21%; left: 49.5%; }
	.unvisibleBtn div:before { top:0; left:10%;}
	.unvisibleBtn div#unbtn2:before { background-image: url(../images/i_right.png); left:64%; }

	.tipsWording { background-position: 0 .25rem; }

	.mainPieChart { width: 500px; height: 500px; }
	.mainPieChart .pie { margin-left:250px; width:250px; height:500px; border-radius:0 250px 250px 0;}
	.mainPieChart .pie:before,.mainPieChart .pie:after { width:500px; height:250px; border-radius:250px 250px 0 0; transform-origin:250px 250px;}
	.mainPieChart #pie2 { left: -207px; top:94px;  }
	.mainPieChart #pie3 { left: -99px; top:-122px;  }
	.mainPieChart #info1 { left: 65%; top:34%; }
	.mainPieChart #info2 { left: 33%; top:67%; }
	.mainPieChart #info3 { left: 20%; top:23%; }
  .compareBox .pconly { display: block; }

}
/*大於1180時%*/
@media screen and (min-width: 950px){
	.northmapBox .svgBox { max-width: 900px; margin: auto;}
	.hospitalBox { background-color: transparent; bottom: inherit; top:10px; left: inherit; right: 0; }
	.unvisibleBtn div:before { width: 50px; height: 50px;}
	
}