/*------MOBILE FIRST------*/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif);
.wf-loading body { opacity: 0; visibility: hidden;}
.ie.wf-loading body { visibility: hidden; }
.ie.wf-active body { visibility: visible;}
.wf-active body { 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;}
.pconly { display: none; }
strong { color: #094; font-weight: 500; font-size: 1.2rem; }
.sword { font-size: .8824rem; font-style: normal; font-weight: 100; }
.btn { background-image: url(../images/btn_shadow.png); background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: 265px; background-size: 265px; padding-top: 24px; min-height: 78px; }
.btn > a { display: block; width: 225px; margin:auto; padding: .6rem 0; padding-right: 24px; font-weight: 400; text-align: center; color: #FFF; box-shadow: 0 0 9px -1px rgba(0,0,0,.5); transition: all .3s; 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 );}
.btn > a:hover { background: #cb1b23;background: -moz-linear-gradient(-45deg, #cb1b23 0%, #ff7506 100%);background: -webkit-linear-gradient(-45deg, #cb1b23 0%,#ff7506 100%);background: linear-gradient(135deg, #cb1b23 0%,#ff7506 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb1b23', endColorstr='#ff7506',GradientType=1 );}
.btn > a:after { content: ""; background-image: url(../images/icon_btn.png); -webkit-background-size: 100%; width: 20px; height: 20px;background-size: 100%; background-repeat: no-repeat; position: absolute; margin-left: .25rem; margin-top: .25rem; animation-name: tada; animation-duration: 2s; animation-iteration-count: infinite; transform-origin: center center;}
/*--KVBOX--*/
.kvBox { height: 370px; overflow: hidden;}
.bigSlider { display: flex; justify-content: center; align-items: center;}
.bigSlider .full { min-width: 640px;}
.kvBox:before { content: ""; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffedd5+0,ffedd5+100&0+65,1+80 */ background: -moz-linear-gradient(top, rgba(255,237,213,0) 0%, rgba(255,237,213,0) 35%, rgba(255,237,213,1) 78%, rgba(255,237,213,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,237,213,0) 0%,rgba(255,237,213,0) 35%,rgba(255,237,213,1) 78%,rgba(255,237,213,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,237,213,0) 0%,rgba(255,237,213,0) 35%,rgba(255,237,213,1) 78%,rgba(255,237,213,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffedd5', endColorstr='#ffedd5',GradientType=0 ); /* IE6-9 */ position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 45;}
.kvBox:after { content: ""; background-image: url(../images/kvmask.png); background-repeat: no-repeat; background-position: center bottom; -webkit-background-size: 100%; background-size: 100%; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 45; }
.bigSlider .full .slick-slide { animation-name: zoomIn; animation-duration: 12s; animation-iteration-count: infinite;}
.sloganBox { width: 235px; height: 115px; background-image: url(../images/slogan.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; bottom: 2.4rem; right: 1rem; z-index: 50;}
.sloganBox h1 { display: none; }
.sloganBox .arrowSlider { width: 129px; position: absolute; bottom: 2px; right: 0; }
.sloganBox .sharesBox { position: absolute; bottom:-23px; right: 0; align-items: flex-end; }
.sloganBox .sharesBox > div:first-child { top:-2px; }
h2 { font-style: normal; position: relative; color: #ff7506; font-size: 2.2rem; line-height: 1.2; letter-spacing: .05rem; font-weight: 100; padding: 0 1.4rem; padding-top: .2rem; margin: .5rem 0; }
h2 span.headword { font-family: "source-han-serif-tc","PMingLiU", sans-serif; font-weight: 700; margin-right: .2rem;}
h2 span.headword.block { display: block; }
h2:before { content: ""; background-color: #ff7506; height: 3.08rem; width: .9rem; position: absolute; left: 0; top: 0; }
h2 span.arrow { background-image: url(../images/h2_arrow.gif); background-repeat: no-repeat; background-position: center bottom; -webkit-background-size: 100%; background-size: 100%; width: 42px; height: 13px; display: inline-block; vertical-align: text-bottom; margin-bottom: .6rem; margin-left: .2rem; }

/*--ARTICLE--*/
article h3 { color: #e32b2b; font-weight: 800; font-size: 1.3529rem; line-height: 1.3; margin-bottom: .8rem; }
article blockquote { background: #fff5e5; margin-bottom: 1rem; 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; }
section.entro article { padding-top: .8rem; }
.graphBox { text-align: center; margin: auto; margin-bottom: 1rem; max-width: 550px; }
.graphBox p { margin-bottom: 0; }
.pcTitle { display: none; }
.showHideBox { margin-bottom: 1rem;}
.showHideBox .objectBox { margin-bottom: .1rem; }
.showHideBox .objectBox .title { color: #FFF; font-size: 1.1rem; font-weight: 500; padding:.7rem 3rem .5rem .7rem; 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 );}
.showHideBox .objectBox .title span { display: block; font-weight: 800; font-size: 1.5rem; line-height: 1.1;}
.showHideBox .objectBox .title span:after {content: ""; margin-left: .5rem; background-image: url(../images/entro_arrow.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width:35px; height: 12px; display: inline-block;}
.showHideBox .objectBox .title p { margin-bottom: 0; }
.showHideBox .objectBox .title p:after { content: "..."; }
.showHideBox .objectBox .title:before,.showHideBox .objectBox .title: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;}
.showHideBox .objectBox .title:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: 8px;}
.showHideBox .objectBox .title.check:before,.showHideBox .objectBox .title.check:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -1px;}
.showHideBox .objectBox .title.check:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.showHideBox .objectBox .detail { display: none; padding: .7rem; border: 1px solid #ddd; border-top: none;}
.showHideBox .objectBox .close { width: 220px; margin: auto; text-align: center; padding: .6rem 0; margin-bottom: 1rem; color: #FFF; box-shadow: 0 0 9px -1px rgba(0,0,0,.5); 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 );}

/*--CHANGE--*/
.change .block { letter-spacing: .02rem; padding-top: 270px; background-color: #fff; background-image: url(../images/index_change1.jpg); /*background-attachment: fixed;*/ -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center top;/* position: absolute; top:0; width: 100%; height: 200px;*/ }
.change .block .title { background-color: #895019; color: #FFF; padding: .5rem; text-align: right; font-size: 1.17rem; font-weight: 100; line-height: 1.3; position: absolute; right: 1rem; top: -3.7rem;}
.change .block .title p:last-child { font-weight: 500; font-size: 1.7rem; }
.change .block .txt { background-color: #fff; background-image: url(../images/block_end.png); background-repeat: no-repeat; background-position: center bottom; -webkit-background-size: 100%; background-size: 100%; padding-top: .5rem; padding-bottom: 2.5rem;}
.change .block .word { padding: 1.2rem; line-height: 1.6; }
.change .block .subtitle { text-align: right; font-size: 1.3529rem; line-height: 1.4; font-weight: 500; color:#895019; margin-bottom: .3rem; }

.change #change2 .title { background-color: #088ecc; }
.change #change2 .subtitle {color: #088ecc;}
.change #change2 { background-image: url(../images/index_change2.jpg); }
.change #change3a .title,.change #change3b .title { background-color: #fc8e19; }
.change #change3a .subtitle,.change #change3b .subtitle {color: #fc8e19;}
.change #change3a { background-image: url(../images/index_change3a.jpg); }
.change #change3b { background-image: url(../images/index_change3b.jpg); }
.change #change4 .title { background-color: #de3076; }
.change #change4 .subtitle {color: #de3076;}
.change #change4 { background-image: url(../images/index_change4.jpg); }

/*--INFOGRAPH--*/
.infograph .sampleBox { line-height: 1.6; letter-spacing: .01rem; background-image: url(../images/index_case_ntpbg.jpg); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%;}
.infograph .sampleBox.tc { background-image: url(../images/index_case_tcbg.jpg); }
.infograph .sampleBox .titleBox { background-color: #2d9136; color: #FFF; text-align: center; padding: 1rem 0;  font-weight: 100; font-size: 1.706rem; line-height: 1.3;}
.infograph .sampleBox.tc .titleBox { background-color: #f43756;}
.infograph .sampleBox .titleBox .sword { font-size: 1.176rem; }
.infograph .sampleBox .titleBox .blod { font-weight: 500;}
.infograph .sampleBox .caseBox .block { margin-bottom: 1rem; }
.infograph .sampleBox .caseBox .kimg { width: 90%; max-width: 310px; margin: auto; line-height: 0;}
.infograph .sampleBox.tc .caseBox .kimg { max-width: 335px;}
.infograph .sampleBox.tc .caseBox .ground { padding-top: 1rem; background: #ffe6b0;background: -moz-linear-gradient(top, #ffe6b0 0%, #ffffff 77%);background: -webkit-linear-gradient(top, #ffe6b0 0%,#ffffff 77%);background: linear-gradient(to bottom, #ffe6b0 0%,#ffffff 77%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6b0', endColorstr='#ffffff',GradientType=0 );}

/*--STORY--*/
.story .txtBox { padding:.3rem 1.2rem 1.2rem 1.2rem; line-height: 1.4; }
.story .txtBox a.hashtag { color: #485fb5; }
.story .txtBox p { margin-bottom: .5rem; }
.story .txtBox p:first-child { font-size: 105%; text-align: center; }

/*--articleList--*/
.articleList > section .articleBox { display: flex; border-bottom: 1px solid #ccc; padding-bottom: 1rem; margin-bottom: 1rem; }
.articleList > section .articleBox .imgBox { padding: 0 .5rem 0 1.3rem; }
.articleList > section .articleBox .txtBox { flex: 0 0 50%; line-height: 1.4; padding-right: 1.3rem; }
.articleList .adBanner { border-bottom: 1px solid #ccc; padding-bottom: 1rem; margin-bottom: 1rem; }
.articleList .adBanner img { display: block; margin: auto; max-width: 300px; }

/*--bookSlider--*/
.bookSlider .bookBox { width: 80%; margin: 1rem auto; text-align: center; }
.bookSlider .bookBox .underline { display: inline-block; padding: 0 .1rem; border-bottom: 2px solid #f43756; }
.bookSlider .bookBox p { line-height: 1.4; }


/*--ENTRO圖表重製--*/
.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;}
.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 #pie1 {/*-webkit-animation:a 3s linear forwards;*/}
.mainPieChart .pie:after { opacity:0; z-index:2; transform:rotate(-90deg); /*-webkit-animation:a2 3s linear forwards;*/}
.mainPieChart #pie1:before,.mainPieChart #pie1:after,.mainPieChart #pie1plus:before,.mainPieChart #pie1plus:after { background:#2e84da; }
.mainPieChart.aniGo #pie1:before { -webkit-animation: animation1 0.6s linear forwards; -webkit-animation-delay: .5s;}
.mainPieChart.aniGo #pie1plus:before { -webkit-animation: animation1plus 0.6s linear forwards; -webkit-animation-delay: 1.1s;}
.mainPieChart #pie1plus { transform: rotate(108deg); left: -78px; top:56px;  }
.mainPieChart #pie2 { transform: rotate(198deg); left: -116px; top:-20px; }
.mainPieChart #pie2:before,.mainPieChart #pie2:after { background:#fb9932; }
.mainPieChart.aniGo #pie2:before { -webkit-animation: animation2 0.8s linear forwards; -webkit-animation-delay: 1.9s;}
.mainPieChart #pie3 { transform: rotate(-54deg); left: -24px; top:-49px; }
.mainPieChart #pie3:before,.mainPieChart #pie3:after { background:#6ab61f; }
.mainPieChart.aniGo #pie3:before { -webkit-animation: animation3 0.5s linear forwards; -webkit-animation-delay: 3.1s;}
.mainPieChart .info { position: absolute; text-align: center; color: #FFF; z-index: 50; line-height: 1.4; font-size: .9rem; }
.mainPieChart #info1 { left: 67%; top:37%; max-width: 3.6rem; }
.mainPieChart #info2 { left: 9%; top:49%; max-width: 3.6rem;}
.mainPieChart #info3 { left: 23.5%; top:9%; max-width: 3.6rem; }
.mainPieChart:after { content: ""; width: 60px; height: 60px; -webkit-border-radius: 120px; border-radius: 120px; position: absolute; left: 50%; top:50%; margin-top: -30px; margin-left: -30px; background-color: #fff; z-index: 30;  }

.straightChartBox { margin-bottom: 1rem; font-size: .9rem;}
.mainStraightChart { width: 95%; max-width: 500px; height: 320px; margin: auto;}
.mainStraightChart .chartBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.mainStraightChart .chartBg ul { border-top: 1px solid #ddd; }
.mainStraightChart .chartBg li { border-bottom: 1px solid #ddd; height: 79px;}
.mainStraightChart .chartBg li:last-child { border-bottom:2px solid #888; height: 78px; }
.straightChartBox .chartTitle { width: 95%; max-width: 500px; margin: auto;}
.straightChartBox .chartTitle ul,.mainStraightChart .straight ul,.mainStraightChart .chartDetail ul { display: flex; justify-content: center; text-align: center; }
.straightChartBox .chartTitle li { flex: 0 0 33%; margin-bottom: .5rem; }
.mainStraightChart .straight ul,.mainStraightChart .straight { height: 100%; width: 100%; align-items: flex-end; }
.mainStraightChart .straight li { flex: 0 0 25%; margin: 0 4%; display: block; height: 0%; margin-bottom: 1px; }
.mainStraightChart .straight li#straight1 { background:#2e84da; /*height: 100%;*/}
.mainStraightChart .straight li#straight2 { background:#fb9932; /*height: 7.79%;*/}
.mainStraightChart .straight li#straight3 { background:#6ab61f; /*height: 5.6277%;*/}
.mainStraightChart.aniGo .straight li#straight1 {-webkit-animation: aniS1 .7s ease-out forwards; -webkit-animation-delay: 1s;}
.mainStraightChart.aniGo .straight li#straight2 {-webkit-animation: aniS2 .7s linear forwards; -webkit-animation-delay: 1s;}
.mainStraightChart.aniGo .straight li#straight3 {-webkit-animation: aniS3 .7s linear forwards; -webkit-animation-delay: 1s;}
.mainStraightChart .chartDetail { position: absolute; width: 100%; left: 0; bottom: 0px; color: #FFF; }
.mainStraightChart .chartDetail ul { align-items: flex-end;}
.mainStraightChart .chartDetail li { flex: 0 0 33%; opacity: 0;}
.mainStraightChart .chartDetail li:last-child { color: #6ab61f; padding-bottom: 18px; }
.mainStraightChart.aniGo .chartDetail li {-webkit-animation: aniShow .5s linear forwards; -webkit-animation-delay: 1.5s;}
.mainStraightChart .ps { position: absolute; background-color: rgba(0,0,0,.75); color: #FFF; padding: .2rem .7rem; -webkit-border-radius: 4px; border-radius: 4px; min-width: 5.4rem; opacity: 0; }
.mainStraightChart #ps1 { left: 34%; top:6%;}
.mainStraightChart #ps1:before { content:""; width: 0;height: 0;border-style: solid;border-width: 8px 12px 8px 0;border-color: transparent rgba(0,0,0,.75) transparent transparent; position: absolute; left: -12px; top:50%; margin-top: -8px;}
.mainStraightChart #ps3 { left: 83%; top:73%; margin-left: -3.4rem;}
.mainStraightChart #ps3:before { content:""; width: 0; height: 0; border-style: solid; border-width: 12px 8px 0 8px; border-color: rgba(0,0,0,.75) transparent transparent transparent; position: absolute; left: 50%; bottom:-12px; margin-left: -8px;}
.mainStraightChart.aniGo .ps {-webkit-animation: aniShow .6s linear forwards; -webkit-animation-delay: 2s;}

.mixChartBox { margin-bottom: 1rem; font-size: .9rem;}
.mixChartBox .svgBox { width: 95%; max-width: 500px; margin: auto; line-height: 0;}
/*.mixChartBox .bounce { -webkit-animation: bounce 1.5s infinite;}*/
.mixChartBox .infoBox ul { display: flex; justify-content: center; }
.mixChartBox .infoBox li:before { content: ""; width: 1rem; height: 1rem; display: inline-block; vertical-align: text-top; margin-top: 4px; margin-right: .2rem; background-color: #2e84da; }
.mixChartBox .infoBox li:last-child { margin-left: 1rem; }
.mixChartBox .infoBox li:last-child:before { background-color: #fb9932; }

.indexVideo { line-height: 1.6; }
.indexVideo .videoImgBox { max-width: 1180px; margin: auto; }
.indexVideo .videoImgBox:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: url(../images/icon_play.png); background-repeat: no-repeat; background-position: center center; -webkit-background-size: 100px; background-size: 100px; }
.indexVideo .videoWord { max-width: 1180px; margin: auto; padding: 1.2rem; padding-top: .5rem; }
.indexVideo .videoWord p:first-child { text-align: center; line-height: 1.4; margin-bottom: .7rem;}
.indexVideo .videoWord p:first-child strong {font-size: 1.706rem; color: #313131; }
.indexVideo h3 { text-align: center; font-weight: 100; font-size: 1.176rem; }
.indexVideo h3:after { content: ""; width: 2.3rem; height: 4px; display: block; background-color: #313131; margin: auto; }


@-webkit-keyframes aniBar{
  0%{ height: 0%;}
  100%{ height: 90%; }
}
@-webkit-keyframes aniS1{
  0%{ height: 0%;}
  100%{ height: 100%; }
}
@-webkit-keyframes aniS2{
  0%{ height: 0%;}
  100%{ height: 7.79%; }
}
@-webkit-keyframes aniS3{
  0%{ height: 0%;}
  100%{ height: 5.6277%; }
}
@-webkit-keyframes aniShow{
  0%{ opacity: 0;}
  100%{ opacity: 1; }
}

@-webkit-keyframes animation1{
  0%{ 
    transform:rotate(-90deg);
  }
  100%{ 
    /*transform:rotate(131.04deg);*/
    transform:rotate(18deg);
    /*360*0.30-90*/
  }
}
@-webkit-keyframes animation1plus{
  0%{ 
    transform:rotate(-90deg);
  }
  100%{ 
    /*transform:rotate(131.04deg);*/
    transform:rotate(0deg);
    /*360*0.25-90*/
  }
}
@-webkit-keyframes animation2{
  0%{ 
    transform:rotate(-90deg);
  }
  100%{ 
    /*transform:rotate(131.04deg);*/
    transform:rotate(18deg);
    /*360*0.30-90*/
  }
}
@-webkit-keyframes animation3{
  0%{ 
    transform:rotate(-90deg);
  }
  100%{ 
    /*transform:rotate(131.04deg);*/
    transform:rotate(-36deg);
    /*360*0.15-90*/
  }
}
@-webkit-keyframes a2{
  0%{
    opacity:0;
  }
  49.99%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:1;
  }
}
@-webkit-keyframes a{
  0%{
    margin-left:240px;
    width:120px;
    border-radius:0 240px 240px 0;
  }
  49.99%{
    margin-left:120px;
    width:120px;
    border-radius:0 120px 120px 0;
  }
  50%{
    margin-left:0;
    width:240px;
    border-radius:0;
  }
  100%{
    margin-left:0;
    width:240px;
    border-radius:0;
  }
}



/*大於600時*/
@media screen and (min-width: 600px){
	.kvBox:before { background: -moz-linear-gradient(top, rgba(255,237,213,0) 0%, rgba(255,237,213,0) 36%, rgba(255,237,213,1) 75%, rgba(255,237,213,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,237,213,0) 0%,rgba(255,237,213,0) 36%,rgba(255,237,213,1) 75%,rgba(255,237,213,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,237,213,0) 0%,rgba(255,237,213,0) 36%,rgba(255,237,213,1) 75%,rgba(255,237,213,1) 100%); }
	h2 span.headword.block { display: inline-block; }
}
/*大於768時*/
@media screen and (min-width: 768px){
	h2 { font-size: 4rem; padding:2.5rem 0 1.5rem 0; text-align: center; margin:0; }
	h2 span.headword {margin-right: .2rem;}
	h2:before {display: none;}
	h2 span.arrow { display: none;}
	
	section.video { background-color: #fffae4; }
	section.story { padding-bottom: 3rem; }
	section.articleList { background-color: #fbf2ff; padding-bottom: 3rem;  }

	.kvBox { height: 600px;}
	.kvBox .goDown { position: absolute; left: 50%; margin-left: -40px; bottom: 20px; width: 80px; height: 60px; z-index: 50; animation-name: bounce; animation-duration: 2.4s; animation-iteration-count: infinite; }
	.kvBox .goDown:hover { animation-name: none; cursor: pointer;}
	.kvBox .goDown:before,.kvBox .goDown:after { content: ""; width: 34px; height: 3px; background-color: #666; position: absolute; left: 50%; top:30px; margin-left: -3px; -webkit-transform: rotate(-35deg); transform: rotate(-35deg);}
	.kvBox .goDown:after { -webkit-transform: rotate(35deg); transform: rotate(35deg); margin-left: -30px;}
	.kvBox .goDown:hover:before,.kvBox .goDown:hover:after { background-color: #ff5c1c; }
	.kvBox:after { background-image: url(../images/kvmask_pc.png);}
	.kvBox:before { background: -moz-linear-gradient(top, rgba(255,237,213,0) 0%, rgba(255,237,213,0) 42%, rgba(255,237,213,1) 89%, rgba(255,237,213,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,237,213,0) 0%,rgba(255,237,213,0) 42%,rgba(255,237,213,1) 89%,rgba(255,237,213,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,237,213,0) 0%,rgba(255,237,213,0) 42%,rgba(255,237,213,1) 89%,rgba(255,237,213,1) 100%); }
	.bigSlider .full { min-width: 1100px; }
	.sloganBox { width: 350px; height: 205px; background-image: url(../images/slogan_pc.png); bottom: 4rem; right: 2%;}
	.sloganBox .arrowSlider { bottom: 28px; right: 185px; }
	.sloganBox .sharesBox { bottom:-18px; right: 13px; }
	.pcTitle { display: flex; justify-content: center; border-bottom: 1px solid #ccc; }
	.pcTitle p { margin-bottom: 0; }
	.pcTitle > div { border: 1px solid #CCC; border-bottom: none; cursor: pointer; flex: 0 0 47%; padding: .5rem 0; text-align: center; transition: 0s; background: rgb(255,255,255);background: -moz-linear-gradient(top, rgba(255,255,255,1) 53%, rgba(221,221,221,1) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,1) 53%,rgba(221,221,221,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,1) 53%,rgba(221,221,221,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );}
	.pcTitle > div.on { border: none; cursor: default; color:#FFF; 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 );}
	.pcTitle > div.on:after { content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 12px 10px 0 10px; border-color: #ffac38 transparent transparent transparent; }
	.pcTitle > div span { font-weight: 700; color: #ff7506;}
	.pcTitle > div span:after {content: "／"; font-weight: 200; margin:0 .1rem;}
	.pcTitle > div.on span { color: #FFF; }
	.showHideBox { margin-bottom: 0; }
	.showHideBox .objectBox { border-bottom: none; }
	.showHideBox .objectBox .title { display: none;}
	.showHideBox .objectBox .detail { width: 90%; padding:1rem 2.5% .2rem 2.5%; margin: auto; margin-bottom: 1rem; /*border: none;*/ }
	.showHideBox #obj1 .detail { display: block; }
	.showHideBox .objectBox .close { display: none; }
	/*--CHANGE--*/
	.change .block { padding-top: 42%; background-attachment: fixed;}
	.change .block .txt { background-image: url(../images/block_end_pc.png); min-height: 220px;}
	.change .block .txt .fixwidth { max-width:1180px; margin: auto;}
	.change .block .txt .title { text-align: left; right: inherit; left: 1rem; top: -4rem; }
	.change .block .txt .subtitle { text-align: left; font-size: 1.8rem; }
	.change .block .txt .btn { margin-top: 100px; margin-bottom: 50px; }
	.change #change1 { background-image: url(../images/index_change1_pc.jpg); }
	.change #change2 { background-image: url(../images/index_change2_pc.jpg); }
	.change #change3a { background-image: url(../images/index_change3a_pc.jpg); }
	.change #change3b { background-image: url(../images/index_change3b_pc.jpg); }
	.change #change4 { background-image: url(../images/index_change4_pc.jpg); }

	/*--INFOGRAPH--*/
	.infograph .sampleBox.ntp,.infograph .sampleBox.tc { background-image: none; }
	.infograph > section { max-width: 1180px; margin: auto;  }
	.infograph .sampleBox .caseBox { padding-top: 2rem;}
	.infograph .sampleBox.ntp .caseBox { display: flex; }
	.infograph .sampleBox.ntp .caseBox > div { flex: 0 0 50%; }
	.infograph .sampleBox.tc .caseBox .kimg { padding-top: 2rem; }
	.infograph .sampleBox .titleBox { width: 300px; margin: auto;}
	.infograph .sampleBox .titleBox:before { content: ""; width: 300%; height: 2px; background-color: #2d9136; position: absolute; top:10px; left: -100%;}
	.infograph .sampleBox.tc .titleBox:before { background-color: #f43756;}
	.infograph .sampleBox .titleBox:after { content: ""; position: absolute; right: -8px; top:0; width: 0;height: 0;border-style: solid;border-width: 10px 0 0 8px; border-color: transparent transparent transparent #18631e;}
	.infograph .sampleBox.tc .titleBox:after{ border-color: transparent transparent transparent #b41731;}

	/*--STORY--*/
	.story .storySlider { width:90%; max-width: 1180px; margin: auto; padding: 0 1rem;}
	.story .storySlider .storyBox { /*display: flex;*/ justify-content: space-between; background-color: #FFF; border: 1px solid #ffe4e5; padding: 1.5rem; margin: 1rem;}
	.story .storySlider .storyBox:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top:0; border: 1px solid #ffd6d8; margin: .2rem; background-color: rgba(255,255,255,.5); }
	.story .storySlider .slick-dots { bottom:-25px; }

	/*--articleList--*/
	.articleList > section { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1180px; margin: auto; }
	.articleList > section .articleBox { background-color: #fff; width: 320px; border:1px solid #FFF; display: block; padding: .5rem; margin:0 .5rem 1.2rem .5rem; box-shadow: 0 0 7px -1px rgba(0,0,0,0.3);}
	.articleList > section .articleBox .imgBox { padding: 0;}
	.articleList > section .articleBox .txtBox { padding: 0 45px .5rem 0; }
	.articleList > section .articleBox:after { content: ""; background-image: url(../images/icon_btn.png); background-repeat: no-repeat; -webkit-background-size: 20px; background-size: 20px; background-position: center center; background-color: #094; width: 38px; height: 38px; -webkit-border-radius: 40px;border-radius: 40px; position: absolute; right: .5rem; bottom:.5rem;}
	.articleList > section .articleBox:hover { border-color: #c9b9cf; }
	.articleList > section .articleBox:hover:after {background-color: #ff6c2d;}
	.articleList .adBanner { display: none;}
	.articleList .ecbannerBox { flex: 0 0 100%; display: flex; justify-content: center; margin-bottom: 1rem;}
	.articleList .ecbannerBox > div { width: 300px; flex: 0 0 300px; margin: 0 1rem; }

	/*--bookSlider--*/
	.bookSlider { width: 80%; padding: 0 50px; max-width: 1000px; margin: auto;}
	.bookSlider .bookBox { flex: 0 0 26%; width: 80%; margin: 1rem auto; text-align: center; }
	.bookSlider .bookBox .underline { display: inline-block; padding: .25rem .1rem; border-bottom: 2px solid #f43756; }
	.bookSlider .bookBox:hover .underline { border-color: #094; color: #094; }
	.bookSlider .slick-dots { left: 0; }

	/*--ENTRO圖表重製--*/
	.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 #pie1plus { left: -163px; top:117px;  }
	.mainPieChart #pie2 { left: -242px; top:-40px;  }
	.mainPieChart #pie3 { left: -51px; top:-101px;  }
	.mainPieChart .info { font-size: 1.1rem; }
	.mainPieChart #info1 { left: 76.3%; top:48%; max-width:inherit; }
	.mainPieChart #info2 { left: 6.5%; top:54%; max-width: 5rem; }
	.mainPieChart #info3 { left: 25.5%; top:11%; max-width: 5rem; }
	.mainPieChart:after { width: 240px; height: 240px; -webkit-border-radius: 120px; border-radius: 120px; margin-top: -120px; margin-left: -120px; }

	.straightChartBox { font-size: 1rem;}
	.mainStraightChart { height: 480px; }
	.mainStraightChart .chartBg li { height: 119px;}
	.mainStraightChart .chartBg li:last-child { height: 118px; }
	.mainStraightChart .straight li { flex: 0 0 19%; margin: 0 7%; margin-bottom: 1px; }
	.mainStraightChart .chartDetail li { opacity: 1;}
	.mainStraightChart .chartDetail li:last-child { color: #FFF; padding-bottom: 0; }
	.mainStraightChart.aniGo .chartDetail li { -webkit-animation-name: none;}
	.mainStraightChart .ps { padding: .4rem .7rem .6rem .7rem; -webkit-border-radius: 6px; border-radius: 6px; line-height: 1.4; }
	.mainStraightChart #ps1 { left: 30%;}
	.mainStraightChart #ps3 { left: 83%; top:83%; margin-left: -3.7rem;}
	
	.mixChartBox { font-size: 1rem;}
	.mixChartBox .infoBox li:before { margin-top: 5px; }

}
/*大於1180時*/
@media screen and (min-width: 1180px){
	/*--INFOGRAPH--*/
	.infograph > section { display: flex; }
	.infograph > section  > .sampleBox.ntp { flex: 0 0 62%; /*border-right:2px solid #FFF;*/ background-image: none; }
	.infograph > section  > .sampleBox.tc { flex: 0 0 38%; background-image: none;  }
	.infograph .sampleBox.tc .caseBox .kimg { padding-top: 7rem; }
	.infograph .sampleBox.tc .caseBox .ground { padding-top: 2.2rem; }
	.infograph .sampleBox .titleBox:before { width: 160%; left: -30%;}

	/*--STORY--*/
	.story .storySlider .storyBox { display: flex;}
	.story .storySlider .storyBox .imgBox { flex: 0 0 38%; order: 3;}
	.story .storySlider .storyBox .txtBox p:first-child { text-align: right; }
	.story .storySlider .storyBox .txtBox { flex: 0 0 60%; padding: .5rem 0 0 0; }

	/*.video { background-color: #f9ffec; }*/
	.indexVideo .videoWord { padding-right: 0; padding-left: 0; text-align: center; }
}
/*大於1600時*/
@media screen and (min-width: 1600px){
	.kvBox { height: 850px;}
	.sloganBox { width: 490px; height: 287px; bottom: 12%; right: 4%;}
	.sloganBox .arrowSlider { width: 170px; bottom: 43px; right: 255px; }
	.flexBox { display: flex; justify-content: center; align-items:flex-start; }
	.flexBox .graphBox { flex: 0 0 50%; }

}