body { font-size: 18px;}
body:before { content: ""; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1; background-image: url(../images/bg.jpg); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; }
a.label { position: absolute; }

/*--HEADER--*/
header {z-index: 100; position: fixed; top: 0; left: 0; width: 100%; background-color: #FFF; box-shadow: 0 0 5px rgba(0,0,0,.2);}
/*header:before { content: ""; background: -moz-linear-gradient(top, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9ffffff', endColorstr='#00ffffff',GradientType=0 ); position: fixed; left: 0; top: -100px; z-index: 11; width: 100%; height: 100px; transition: all .3s ease-out; }
header.scroll:before { top: 0; }*/
.logo img { height: 36px; width: auto; }
.logo .cw img { height: 30px; width: auto; margin-right: 24px; }
.logo { /*position: fixed; left: 0; top: 0; z-index: 950; */padding-top: 18px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; align-items: center;}
/*header.scroll .logo img { height: 44px; }
header.scroll .logo { padding-top: 30px; padding-left: 44px; }*/
.nav { display: none; }
nav {/* position: fixed; top: 0; right: 0; z-index: 950; padding-right: .5rem; padding-top: .5rem;*/}
/*header.scroll nav { padding-top: 0; }*/
nav ul { display: flex; justify-content: center; margin: 0 auto; padding: 0; }
nav ul li { list-style: none; padding: 1rem .5rem; margin: 0 .5rem; cursor: pointer; }
nav ul li:hover { /*color: #fff;*/ }
nav ul li:before { content: ""; width: 0%; height: 60%; background-color: #fff1c1; position: absolute; left: 50%; margin-left: 0; bottom: 20%; transition: all .3s ease-out; }
nav ul li:nth-child(even):before {background-color: #ffc05e;}
nav ul li:hover:before {  width: 100%; margin-left: -50%;}
nav ul li:after { content: ""; width: 1px; height: 34%; position: absolute; left: -.5rem; top: 33%; background-color: #000; }
nav ul li:first-child:after { display: none; }

/*--MAIN--*/
main section { min-height: 70vh; overflow-x: hidden; padding: 60px 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; overflow: hidden; }
main .contentBox { width: 75%; max-width: 1400px; margin: auto; }
main h2 { color: #8d3d0f; font-size: 222.22%; text-align: center; margin-top: .25rem; margin-bottom: 4rem;}
main h2 span:before,main h2 span:after { content: ""; background-image: url(../images/h2_after.png); width: 148px; height: 111px; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; left: -70px; top: 10%; }
main h2 span:after { left: 75%; top: -110%; }

section.articleBox { background-color: #FFF; }
section.articleBox:after { content: ""; background-image: url(../images/article_right.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 130px; height: 302px; position: absolute; right: -25px; top: 580px; z-index: 11; }
.articleBox .articleList:after { content: ""; background-image: url(../images/article_left.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 84px; height: 77px; position: absolute; left: -60px; top: -24px; z-index: 20; }
.articleBox .articleList { display: flex; justify-content: space-between; flex-wrap: wrap; }
.articleBox .articleList > div { flex: 0 0 32%; margin-bottom: 1.5rem; line-height: 0; overflow: hidden; }
.articleBox .articleList > div.txtBox { background-color: #fff1c1; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; }
.articleBox .articleList > div#txt2 { background-color: #ffd59e; }
.articleBox .articleList > div#txt3 { background-color: #fef5d8; }
.articleBox .articleList > div#txt4 { background-color: #ffc05e; }
.articleBox .articleList > div.txtBox p { width: 90%; }
.articleBox .articleList p.name {text-align: center; line-height: 1; font-size: 120%; font-weight: 600; letter-spacing: .1rem;}
.articleBox .articleList p.wording { margin-top: 8px; line-height: 1.52; text-align:justify; }
.articleBox .articleList >div p.title { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; z-index: 13; background-color: rgba(0,0,0,.7); text-align: center; display: flex; justify-content: center; align-items: center; color: #FFF; line-height: 1.4; transition: .4s ease-out;}
.articleBox .articleList >div:hover p.title { top: 0;}
.articleBox .articleList >div.opinion:after { content: ""; background-image: url(../images/logo_opinion.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 90px; height: 30px; position: absolute; left: 12px; top: 12px; z-index: 15; }
.articleBox .articleList >div.cw:after { content: "本文選自天下雜誌653期"; background-image: url(../images/CW_RED@2x.png); background-color: #d70c19; background-position: 10px 5px; background-repeat: no-repeat; -webkit-background-size: 80px; background-size: 80px; width: 100%; height: 42px; padding: 5px 5px 5px 98px; position: absolute; left: 0; top: 0; z-index: 15; color: #FFF; line-height: 35px; font-size: 15px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.articleBox .articleList >div a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; }

section.speakerBox { background-image: url(../images/speaker_bg.jpg); -webkit-background-size: 100%; background-size: 100%; }
section.speakerBox:before { content: ""; background-image: url(../images/speaker_before.png); width: 295px; height: 222px; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; left: -3%; top: 130px; animation: rollingspoon 1.5s infinite linear; transform-origin: left center; }
section.speakerBox:after { content: ""; background-image: url(../images/icon_dofu.png); width: 80px; height: 70px; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; left: 170px; top: 70px; animation: reversedofu 1.5s infinite linear;}
.speakerBox .speakerList { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; }
.speakerBox .speakerList > div { flex: 0 0 23%; text-align: center; cursor: pointer; }
.speakerBox .speakerList > div img { max-width: 225px; }
.speakerBox .speakerList > div p { line-height: 1.4; margin-bottom: 5px; }
.speakerBox .speakerList > div p.name { font-size: 116.67%; font-weight: 500; line-height: 1.2; }
.speakerBox .speakerList > div:hover p.name { color: #8d3d0f; }
.speakerBox .speakerList > div p.more { position: relative; background-image: url(../images/morebg.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 110px; height: 39px; margin: auto; }
.speakerBox .speakerList > div p.more:before { content: ""; background-image: url(../images/morebg_hover.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: .3s ease-out; }
.speakerBox .speakerList > div:hover p.more:before { opacity: 1; }
.speakerBox .speakerList > div p.more:after { content: "more"; color: #FFF; font-size: 16px; font-weight: 200; line-height: 36px; position: relative; z-index: 11; display: block; }

/*講者介紹popup*/
.lightBox { width: 100%; height: 100%; position: fixed; top:0; left: 0; z-index: 999; display: none; justify-content: center; align-items: center; }
.lightBox.show { display: flex;}
.lightBox:before { content: ""; background-color: rgba(0,0,0,.9); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.lightBox .fulllink { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; }
.lightBox .content { width: 750px; /*min-height: 350px;*/ background-color: #FFF;}
.lightBox .content:before { content: ""; background-image: url(../images/h2_after.png); width: 95px; height: 67px; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; left: 8px; top: 8px; transform: rotate(135deg); }
.lightBox .close { position: absolute; right: 0; top: -45px; width: 40px; height:40px; cursor: pointer;}
.lightBox .close:hover { transform: rotate(180deg);}
.lightBox .close:before, .lightBox .close:after { content: ""; width: 30px; height: 2px; background-color: #fff; transform: rotate(45deg); position: absolute; top: 19px; left: 5px; }
.lightBox .close:after { transform: rotate(-45deg); }
.iframewording { display: flex; align-items: center; padding: 30px; line-height: 1.8; text-align:justify; height: 100%; overflow-y: auto; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.iframewording.hide { display: none; }
.iframewording .img { flex: 0 0 250px; margin-right: 30px; line-height: 0; }
.iframewording .img:before { content: ""; background-image: url(../images/icon_ball.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 64px; height: 64px; position: absolute; right: 5px; bottom: -2px; z-index: 20; animation: rollingball 1.7s infinite linear; }
.iframewording h2 {font-size: 188.89%; margin: 0; line-height: 1;}
.iframewording p.title { color: #c56e3b; font-size: 127.78%; font-weight: 600; }

section.agendaBox { background-color: #FFF; }
section.agendaBox:before,section.agendaBox:after,section.agendaBox .icon { content: ""; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; z-index: 11;}
section.agendaBox:before { background-image: url(../images/agenda_before1.png); width: 153px; height: 291px; right: 0; top: 0;}
section.agendaBox:after { background-image: url(../images/agenda_before2.png); width: 114px; height: 64px; left: -1%; top: 40%; animation: rollingball 2.2s infinite linear; transform-origin: left center;}
section.agendaBox .icon { background-image: url(../images/agenda_before3.png); width: 183px; height: 182px; right: 0; bottom: 4%;}
.agendaList .tr { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; background-color: #fffae8; margin-bottom: 1px; align-items: center; }
.agendaList .tr:nth-child(even) { background-color: #ffe8bc; }
.agendaList .tr .time { flex: 0 0 200px; text-align: center; line-height: 1.3; }
.agendaList .tr .txt { padding: 1rem 1rem 1rem 0; }
.agendaList .tr .txt h3 { font-size: 116.67%; line-height: 1.3; margin: 0; }
.agendaList .tr .txt h4 { font-size: 111.11%; font-weight: 400; color: #8d3d0f; line-height: 1.4; margin: .4rem 0 0 0; }
.agendaList .tr .txt p,.agendaList .tr .txt li { color: #c56e3b; line-height: 1.7;  }
.agendaList .tr .txt ul { margin: 0; padding: 0; list-style-type: none; }
.agendaList .tr .txt li { padding-left: 18px; background-image: url(../images/dot.png); background-repeat: no-repeat; -webkit-background-size: 8px; background-size: 8px; background-position: 3px 10px; }
.agendaList .notice { text-align: center; margin-top: 1.5rem; }

section.registerBox { background-image: url(../images/bg_register.jpg); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; background-color: #4b928b; overflow: hidden; }
section.registerBox:before,section.registerBox:after { content: ""; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute;}
section.registerBox:before { background-image: url(../images/register_before1.png); width: 174px; height: 309px; left: 0; bottom: -10px;}
section.registerBox:after { background-image: url(../images/register_before2.png); width: 135px; height: 242px; right: 0; bottom: -1.5%;}
section.registerBox h2 {color: #FFF;}
main section.registerBox h2 span:before, main section.registerBox h2 span:after { background-image: url(../images/h2_after_register.png); }
main section.registerBox h2 span:after { left: 82%; }
.flexBox { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; /*flex-wrap: wrap;*/ justify-content: space-between; align-items: flex-start; }
.registerList .infoBox { flex: 0 0 475px; margin-right: 30px; }
.registerList .infoBox iframe { height: 500px; }
.registerList .mapBox { width: 100%; height: 660px; }
.registerList .licenseBox { color: #FFF; text-shadow: 0 0 5px rgba(0,0,0,.8); font-size: 15px; line-height: 1.7; text-align:justify; margin-top: 1.5rem; font-weight: 300; }
.registerList .licenseBox .title { text-align: center; font-size: 1rem; }
.registerList .info { line-height: 1.2; background-image: url(../images/register_infobg.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; padding: 24px 0 0 22px; min-height: 160px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.registerList .info:before { content: ""; background-image: url(../images/icon_gyoza.png); width: 114px; height: 73px; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; right: 12px; top: -30px; animation: rollingball 2s infinite linear; }
.registerList .info .date strong { font-size: 222.22%; font-weight: 400; }
.registerList .info .address strong { font-size: 140%; font-weight: 400; }

main section.kvBox { height: 100vh; min-height: 640px; overflow: hidden; padding: 110px 0 20px 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; display: flex; justify-content: center; align-items: center; }
main section.kvBox .txtInfo { display: none; }
main section.kvBox .sloganBox { width: 514px; height: 455px; background-image: url(../images/table@2x.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; display:flex; align-items: center; justify-content: center; animation: fadeInTable 1.2s 1.5s backwards; }
main section.kvBox .sloganBox .sloganImg { width: 354px; margin: auto; }
main section.kvBox .sloganBox .subsloganImg { width: 158px; margin: auto; }
main section.kvBox .arrow { background-image: url(../images/arrow.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 67px; height: 66px; position: absolute; left: 50%; bottom: 15px; margin-left: -33px; animation: goArrow 1.2s infinite; cursor: pointer;}
main section.kvBox .arrow:hover { animation-play-state: paused; }
main section.kvBox .animationbg { position: fixed; left: 50%; margin-left: -650px; bottom: 0; width: 1300px; height: 640px; animation: fadeInAnimation 1.2s 1.5s backwards;}
main section.kvBox .animationbg > div { background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 90px; height: 475px; position: absolute; bottom: -12%; }
main section.kvBox .animationbg .spoon1 { background-image: url(../images/A@2x.png); left: 2%;/*animation: mSpoon1 2.4s 2.7s infinite linear;*/ -webkit-transform-origin: center bottom;transform-origin: center bottom; }
main section.kvBox .animationbg .spoon2 { background-image: url(../images/B@2x.png); bottom: -24%;left: 12%; /*animation: mSpoon2 2.6s 2.7s infinite linear;*/-webkit-transform-origin: center bottom;transform-origin: center bottom;}
main section.kvBox .animationbg .spoon3 { background-image: url(../images/C@2x.png); bottom: -36%; left: 22%; /*animation: mSpoon3 4.8s 2.7s infinite linear;*/-webkit-transform-origin: center bottom;transform-origin: center bottom; }
main section.kvBox .animationbg .spoon4 { background-image: url(../images/D@2x.png); bottom: -20%; right: 22%; /*animation: mSpoon4 4.2s 2.7s infinite linear;*/-webkit-transform-origin: center bottom;transform-origin: center bottom; }
main section.kvBox .animationbg .spoon5 { background-image: url(../images/E@2x.png); bottom: -32%; right: 12%; /*animation: mSpoon5 3.6s 2.7s infinite linear;*/-webkit-transform-origin: center bottom;transform-origin: center bottom; }
main section.kvBox .animationbg .spoon6 { background-image: url(../images/F@2x.png); bottom: -8%; right: 2%; /*animation: mSpoon6 3.2s 2.7s infinite linear;*/-webkit-transform-origin: center bottom;transform-origin: center bottom;}
main section.kvBox .animationbg .dots { background-image: url(../images/dots_white.png); width: 78px; height: 96px; bottom: inherit; top: 2%; margin-top: 158px; left: 2%; }
main section.kvBox .animationbg .meatball { background-image: url(../images/icon_ball.png); width: 78px; height: 78px; bottom: inherit; top: 2%; margin-top: 120px; left: 8%; animation: rollingball 1.2s infinite linear;}
main section.kvBox .animationbg .gyoza { background-image: url(../images/icon_gyoza.png); width: 114px; height: 73px; bottom: 39%; left: 14%; animation: mgyoza 2.6s 2.7s infinite linear; }

main section.aboutBox { padding: 40px 0; }
main section.aboutBox .contentBox { text-align: center; font-size: 111.11%; font-weight: 500; line-height: 1.8; }
main section.aboutBox .contentBox p { margin-bottom: 1rem; }
main section.aboutBox .contentBox .spotBox { display: flex; justify-content: center; margin: 2rem auto 5rem auto; }
main section.aboutBox .contentBox .spotBox dl { margin: 0 40px; }
main section.aboutBox .contentBox .spotBox dl:before { content: ""; background-image: url(../images/dots_white.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 62px; height: 77px; position: absolute; left: -38%; bottom: 0; }
main section.aboutBox .contentBox .spotBox dl:nth-child(1):before { left: -58%; bottom: 22%; transform: rotate(170deg) scaleX(-1); }
main section.aboutBox .contentBox .spotBox dl:nth-child(3):before { left: inherit; right: -52%; bottom: -19%; transform: rotate(233deg); }
main section.aboutBox .contentBox .spotBox dl:after { content: ""; background-image: url(../images/icon_ball.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; width: 78px; height: 78px; animation: rollingball 1.5s infinite linear;}
main section.aboutBox .contentBox .spotBox dl:nth-child(1):after { background-image: url(../images/icon_gyoza.png); width: 114px; height: 73px; left: -81%; bottom: 72%; }
main section.aboutBox .contentBox .spotBox dl:nth-child(2):after { background-image: url(../images/icon_dofu.png); width: 80px; height: 70px; left: -19%; bottom: -41%; }
main section.aboutBox .contentBox .spotBox dl:nth-child(3):after { right: -96%; bottom: 22%; }
main section.aboutBox .contentBox .spotBox dt { width: 135px; height: 135px; display: flex; justify-content: center; align-items: center; color: #FFF; font-size: 155%; line-height: 1; margin: auto; padding: 0; }
main section.aboutBox .contentBox .spotBox dt:before { content: ""; width: 100%; height: 100%; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; background-image: url(../images/spotbg1.png); position: absolute; left: 0; top: 0; animation: mSpotbg 8s infinite linear; }
main section.aboutBox .contentBox .spotBox dl:nth-child(2) dt:before { background-image: url(../images/spotbg2.png); animation-name: mSpotbg2;}
main section.aboutBox .contentBox .spotBox dl:nth-child(3) dt:before { background-image: url(../images/spotbg3.png);}
main section.aboutBox .contentBox .spotBox dd { text-align: center; margin: auto; margin-top: 5px; padding: 0; }

/*--FOOTER--*/
footer { background-color: #FFF; color: #3c3c3c; width: 100%; padding:30px 20px; text-align: center; font-size: 15px; font-weight: 300; line-height: 1.6; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; box-shadow: 0 0 5px rgba(0,0,0,.2);}

.goTop { width: 50px; height: 50px; position: fixed; right: 35px; bottom: 35px; cursor: pointer; overflow: hidden; z-index: 900; background-image: url(../images/gotop.png); -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat;}
.goTop:hover { opacity: .7; margin-bottom: 5px;}
.goRegister { width: 130px; height: 155px; z-index: 901; position: fixed; right: 35px; bottom:105px; cursor: pointer; }
.goRegister span { display: none; }
.goRegister:before { content: ""; background-image: url(../images/icon_dofu.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 80px; height: 70px; position: absolute; right: 0; bottom: 0;-webkit-transition: 0.3s;-moz-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.goRegister:hover:before { transform: rotate(15deg); }
.goRegister:after { content: ""; background-image: url(../images/talk.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; width: 85px; height: 90px; position: absolute; left: 0; top: 0; -webkit-transition: 0.3s;-moz-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s; animation: fly 1.4s infinite; }
.goRegister:hover:after { animation-play-state: paused; }

/* 視窗寬度大於1900時的 CSS。*/
@media screen and (min-width: 1900px) {
	main section.kvBox { min-height: 750px; }
	main section.kvBox .animationbg { height: 750px; margin-left: -850px; width: 1700px;}
	main section.kvBox .sloganBox { width: 617px; height: 546px; }
	main section.kvBox .sloganBox .sloganImg { width: 425px; }
	main section.kvBox .sloganBox .subsloganImg { width: 190px; }
	main section.kvBox .animationbg > div { width: 108px; height: 570px; }
	main section.kvBox .animationbg .dots { width: 94px; height: 115px; top: 0; }
	main section.kvBox .animationbg .meatball { width: 94px; height: 94px; top: -2%;}
	main section.kvBox .animationbg .gyoza { width: 137px; height: 88px; bottom: 43%; }
}


/* 視窗寬度小於1299時的 CSS。*/
@media screen and (max-width: 1299px) {
	main section.kvBox .animationbg { margin-left: -50%; bottom: 0; width: 100%; height: 640px; }

}
/* 視窗寬度小於1024時的 CSS。*/
@media screen and (max-width: 1024px) {
	nav ul li { font-size: 15px; padding: 1rem .25rem; }

	main section { padding: 50px 0; }
	main h2 { font-size: 180%; margin-bottom: 3rem; }
	main h2 span:before, main h2 span:after { width: 104px; height: 78px; }
	main h2 span:before { left: -50px; top: 25%;}
	main h2 span:after { left: 69%; }
	main .contentBox { width: 84%; }
	section.articleBox:after { width: 104px; height: 242px; right: -8px; top:420px; }
	.articleBox .articleList:after { width: 67px; height: 62px; left: -47px; }
	.articleBox .articleList p.name { font-weight: 500; font-size: 110%; }
	.articleBox .articleList p.wording { font-weight: 300; font-size: 16px; line-height: 1.4; }
	.articleBox .articleList >div:hover p.title { line-height: 1.4; }
	.articleBox .articleList >div:hover p.title span { padding: 0 10px; }

	section.speakerBox:before { width: 207px; height: 155px; top:50px; }
	section.speakerBox:after { width: 56px; height: 49px; left: 100px; top: 20px; }
	.speakerBox .speakerList > div { flex: 0 0 22%; }
	.speakerBox .speakerList > div img { max-width: 165px; }
	.speakerBox .speakerList > div p { font-size: 16px; }
	.speakerBox .speakerList > div p.name { font-size: 110%; }
	.speakerBox .speakerList > div p.more { width: 77px; height: 27px; }
	.speakerBox .speakerList > div p.more:after { font-size: 15px; line-height: 25px;}

	.lightBox .content { width: 650px; min-height: inherit; }
	.lightBox .content:before { width: 67px; height: 47px; }
	.iframewording { padding: 20px; }
	.iframewording .img { flex: 0 0 200px; margin-right: 20px; }
	.iframewording .img:before { width: 48px; height: 48px; }
	.iframewording h2 { font-size: 150%; }
	.iframewording p.title { font-size: 120%; }

	section.agendaBox:before { width: 95px; height: 204px; top: 4%;}
	section.agendaBox:after { width: 80px; height: 45px;}
	section.agendaBox .icon { width: 128px; height: 128px; bottom: 2.5%;}
	.agendaList .tr .time { font-size: 15px; flex: 0 0 150px; }
	.agendaList .tr .txt h3 { font-size: 110%; }
	.agendaList .tr .txt h4 { font-size: 100%; margin-top: .15rem; }
	.agendaList .tr .txt p, .agendaList .tr .txt li,.agendaList .notice { font-size: 16px; }
	.agendaList .tr .txt li { padding-left: 16px; -webkit-background-size: 6px; background-size: 6px; background-position: 4px 9px;}

	section.registerBox:before { width: 122px; height: 216px; bottom: 9%;}
	section.registerBox:after { width: 95px; height: 346px; bottom: -12%;}
	.registerList .infoBox { flex: 0 0 390px; margin-right: 20px; }
	.registerList .info { padding-left: 17px; padding-top: 20px; min-height: 135px; font-size: 16px; }
	.registerList .info:before { width: 80px; height: 51px; top: -20px; }
	.registerList .info .date strong { font-size: 200%; }
	.registerList .info .address strong { font-size: 120%; }
	.registerList .infoBox iframe { height: 300px; }
	.registerList .mapBox { height: 436px; }
	.registerList .licenseBox { margin-top: 1rem; }
	
	main section.kvBox { /*height: auto;*/ min-height: 620px; padding-top: 107px; }
	main section.kvBox .sloganBox { width: 386px; height: 341px; }
	main section.kvBox .sloganBox .sloganImg { width: 266px; }
	main section.kvBox .sloganBox .subsloganImg { width: 119px; }
	main section.kvBox .animationbg { height: 470px; }
	main section.kvBox .animationbg > div { width: 63px; height: 333px; }
	main section.kvBox .animationbg .dots { width: 59px; height: 72px; }
	main section.kvBox .animationbg .meatball { width: 59px; height: 59px; }
	main section.kvBox .animationbg .gyoza { width: 86px; height: 55px; }
	main section.kvBox .arrow { width: 58px; height: 58px; margin-left: -29px; }

	main section.aboutBox .contentBox { font-size: 100%; }
	main section.aboutBox .contentBox .spotBox { margin-bottom: 2.5rem; margin-top: 1rem; }
	main section.aboutBox .contentBox .spotBox dl:before { width: 47px; height: 58px; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(1):before { left: -38%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(2):before { left: -30%; bottom: 4%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(3):before { right: -34%; bottom: -15%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(1):after { width: 86px; height: 55px; left: -69%; bottom: 56%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(2):after { width: 60px; height: 53px; left: -22%; bottom: -28%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(3):after { width: 59px; height: 59px;right: -65%; bottom: 14%; }

	footer {font-size: 14px; padding: 20px 10px;}
	.goTop { width: 44px; height: 44px; right: 15px; bottom: 25px; }
	.goRegister { width: 90px; height: 108px; right: 15px; bottom: 80px; }
	.goRegister:before { width: 56px; height: 49px; }
	.goRegister:after { width: 60px; height: 63px; }
}

/* 視窗寬度小於800時的 CSS。*/
@media screen and (max-width:800px) {
	body { font-size: 17px; }
	.articleBox .articleList p.wording { font-size: 100%; font-weight: 400; }
	.articleBox .articleList > div { margin-bottom: 1rem; }
	.articleBox .articleList >div.opinion:after { width: 63px; height: 21px; }
	.articleBox .articleList >div.cw:after { background-position: 7px 4px; -webkit-background-size: 57px; background-size: 57px; height: 32px; padding: 4px 4px 4px 70px; line-height: 27px; font-size: 13px; font-weight: 300;}
	.registerList .flexBox { display: block; }
	.registerList .infoBox { margin-right: 0; margin-bottom: 1rem; }
	.registerList .infoBox .info { max-width: 390px; margin: auto; }
	.registerList .mapBox { height: 300px; }

	main section.kvBox { min-height: 540px; }
	main section.kvBox .animationbg .spoon3,main section.kvBox .animationbg .spoon4 { display: none; }
	main section.aboutBox { padding: 20px 0; }
	main section.aboutBox .contentBox .spotBox dl { margin: 0 15px; }
	main section.aboutBox .contentBox .spotBox dt { width: 120px; height: 120px; font-size: 130%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(3):before { right: -39%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(1):after { left: -75%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(2):after { bottom: -34%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(3):after { right: -75%; }
}


/* 視窗寬度768-(MOBILE)時的 CSS。*/
@media screen and (max-width: 768px) {
	.ifpc { display: none !important; }
	.ifmobile { display: block !important; }
	.mbr { display: block; }
	header { z-index: 999; box-shadow: none; background-color: transparent; }
	.logo { display: block; padding: 0 0 15px 0; background-color: #FFF; box-shadow: 0 0 5px rgba(0,0,0,.3); }
	.logo > div { margin: auto; text-align: center; padding-top: 15px; line-height: 0; }
	.logo img { height: 30px; }
	.logo .cw img { margin: auto; height: 24px; }
	nav { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; overflow-y: auto; display: none; }
	nav ul { display: block; padding-top: 105px; }
	nav ul li { font-size: 100%; text-align: center; padding: 1rem 0; margin: 0 auto; border-bottom: 1px solid #eee; }
	nav ul li:before,nav ul li:after { display: none; }
	/*-------------漢堡圖標----------*/
	/*控制圖標的位置*/
	.nav { display: block !important; position:fixed; z-index:999; right:5px; top:5px; width:45px; padding-top:0; }

	/*控制漢堡的感應區尺寸*/
	.hamburger {font-size:50px; display: inline-block; width:45px; height:45px; padding:10px; padding-top: 11px; cursor:pointer; -webkit-transition: transform .2s ease-in-out; transition: transform .2s ease-in-out; vertical-align:middle; border: none; background-color: transparent; background-color: transparent;}

	/*** Button height fix for Firefox*/
	.hamburger::-moz-focus-inner { padding:0;border:0 none;}

	/*** Focus fix for Chrome*/
	.hamburger:focus {outline: 0;}

	/*** Styling the icon*/
	.hamburger:before,.hamburger:after { content:""; box-sizing:border-box;}
	/*控制漢堡的三條線的顏色和寬度*/
	.hamburger:before,.hamburger .icon,.hamburger:after { display:block; width:100%; height:2px; margin:0 0 5px; -webkit-transition: transform .2s ease-in-out; transition: transform .2s ease-in-out; background-color:#444; -moz-border-radius:20px; -webkit-border-radius:0px; border-radius:0px;}
	.nav.scroll .hamburger:before,.nav.scroll .hamburger .icon,.nav.scroll .hamburger:after { background-color: #FFF; }

	/*** Styles for the active `.hamburger` icon*/
	.hamburger.active:before,.hamburger.active .icon,.hamburger.active:after { background:#444;}
	.nav.scroll .hamburger.active:before,.nav.scroll .hamburger.active .icon,.nav.scroll .hamburger.active:after { background:#FFF;}

	/*** VERTICAL HAMBURGER*/
	.hamburger.hamburger-vertical.active { transform:rotate(270deg);-moz-transform: rotate(270deg);-webkit-transform: rotate(270deg);}

	/*** CLOSE/CANCEL/CROSS*/
	.hamburger.hamburger-cancel.active .icon {transform: scale(0);-moz-transform: scale(0);-webkit-transform: scale(0);}
	.hamburger.hamburger-cancel.active:before {transform: translateY(8px) rotate(135deg);-moz-transform: translateY(8px) rotate(135deg);-webkit-transform: translateY(8px) rotate(135deg);}
	.hamburger.hamburger-cancel.active:after {transform: translateY(-6px) rotate(-135deg);-moz-transform: translateY(-6px) rotate(-135deg);-webkit-transform: translateY(-6px) rotate(-135deg);}
	
	main section { padding: 35px 0; }
	main h2 { margin-bottom: 2rem; }
	main .contentBox { width: 85%; max-width: 440px; }
	section.articleBox:after { z-index: 9; top: 50%; }
	.articleBox .articleList > div { flex: 0 0 100%; min-height: 200px; }
	.articleBox .articleList >div p.title { top: 0; background-color: transparent; align-items: flex-end; }
	.articleBox .articleList >div p.title span { flex: 0 0 100%; line-height: 1.4; font-weight: 300; text-shadow: 0 0 5px rgba(0,0,0,.7); letter-spacing: .05rem; padding: 15px 10px 10px 10px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 86%, rgba(0,0,0,0.85) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 86%,rgba(0,0,0,0.85) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 86%,rgba(0,0,0,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 ); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
	.articleBox .articleList >div.cw:after { line-height: 25px; font-size: 15px;}

	section.speakerBox:before { left: -40px; top: 85px; width: 148px; height: 111px; }
	section.speakerBox:after { width: 40px; height: 35px; left: 40px; top: 60px; z-index: 11; }
	.speakerBox .speakerList { display: block; }
	.speakerBox .speakerList > div { width: 85%; margin: 0 auto 1.5rem auto; }
	.speakerBox .speakerList > div p { font-size: 100%; }

	.lightBox .content { width: 90%; height: auto; min-height: inherit; }
	.iframewording { display: block; height: auto; max-height: 65vh; overflow-y: auto; }
	.iframewording .img { width: 200px; margin: auto; }
	.iframewording h2 { text-align: center; margin: .5rem auto; }
	.iframewording p.title { font-size: 100%; text-align: center; line-height: 1.3; font-weight: 400; }

	section.agendaBox:before { width: 77px; height: 145px; right: -2%; top: 0;}
	section.agendaBox:after { width: 57px; height: 32px; }
	section.agendaBox .icon { width: 91px; height: 91px; right: -3%; bottom: 45px;}
	.agendaList .tr { display: block; margin-bottom: 5px; }
	.agendaList .tr .time { padding: .5rem 0; border-bottom: 1px dotted #f7c793; }
	.agendaList .tr:nth-child(even) .time { border-bottom-color: #FFF; }
	.agendaList .tr .txt { padding: .8rem; text-align: center; }
	.agendaList .tr .txt h3 { font-size: 115%; }
	.agendaList .tr .txt h3 span { font-size: 17px; font-weight: 400; display: block; margin-bottom: .25rem; }
	.agendaList .tr .txt h4 { line-height: 1.5; }
	.agendaList .tr .txt p, .agendaList .tr .txt li, .agendaList .notice { font-size: 100%; }
	.agendaList .tr .txt li { padding-left: 0; background-image: none; }
	.agendaList .notice { margin-top: 1rem; font-size: 16px; }
	
	footer { padding-bottom: 70px; }
	.goTop { bottom: 70px; }
	.goRegister { width: 100%; height: auto; bottom: 0; right: inherit; left: 0; background-color: #fff5d7; border-top: 2px solid #c6703d; }
	.goRegister span { display: block; text-align: center; padding: .8rem 0; color: #c6703d; }
	.goRegister:after { display: none; }
	.goRegister:before { bottom: 10px; right: 10px; }
	
	main section.kvBox { padding-top: 125px; align-items: flex-start; min-height: 460px; padding-bottom: 0; flex-wrap: wrap; position: relative; }
	main section.kvBox .arrow { position: fixed; bottom: 60px; }
	main section.kvBox .sloganBox { width: 334px; height: 296px; }
	main section.kvBox .sloganBox .sloganImg { width: 220px; margin-top: -13px; }
	main section.kvBox .sloganBox .subsloganImg { width: 125px; }
	main section.kvBox .animationbg { height: 350px; margin-top: -60px; position: relative; flex: 0 0 100%; order: 2; left: 0; margin-left: 0; overflow: hidden; }
	main section.kvBox .animationbg .spoon1 { left: 5%; }
	main section.kvBox .animationbg .spoon2 { left: 28%; }
	main section.kvBox .animationbg .spoon5 { right: 28%; }
	main section.kvBox .animationbg .spoon6 { right: 5%; }
	main section.kvBox .animationbg .meatball { top:-29%; width: 55px; height: 55px; }
	main section.kvBox .animationbg .gyoza { width: 80px; height: 51px; bottom: 63%; left: 31% }
	main section.kvBox .animationbg .dots { display: none; }

	main section.aboutBox .contentBox .spotBox dl:nth-child(1):after { width: 80px; height: 51px;}
	main section.aboutBox .contentBox .spotBox dl:nth-child(2):after { width: 56px; height: 49px;}
	main section.aboutBox .contentBox .spotBox dl:nth-child(3):after { width: 55px; height: 55px;}
	main section.aboutBox { padding: 30px 0;}
	main section.aboutBox .contentBox { font-weight: 400; }



}
/* 視窗寬度540-(手機)時的 CSS。*/
@media screen and (max-width: 540px) {
	main section.aboutBox .contentBox .spotBox { display: block; margin-top: 2rem; }
	main section.aboutBox .contentBox .spotBox dl { width: 120px; margin: 0  auto 1rem auto; }
	main section.aboutBox .contentBox .spotBox dl:before { display: none; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(1):after { left: -54%; bottom: 82%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(2):after { bottom: 20%; left: 102%; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(3):after { right: 95%;}
}
/* 視窗寬度414-(手機)時的 CSS。*/
@media screen and (max-width: 414px) {
	main h2 { font-size: 160%; font-weight: 600; }
	section.registerBox:before { width: 87px; height: 155px; bottom: 25%;}
	section.registerBox:after { width: 68px; height: 121px; bottom: -3%;}
	.registerList .infoBox .info { background-image: url(../images/SVG/register_infobg_m.svg); width: 270px; padding-left: 0; text-align: center; min-height: 130px; }
	.registerList .info:before { width: 68px; height: 44px; top: -22px; right: -5px; }
	.registerList .info .date strong { font-size: 150%; font-weight:600; }
	.registerList .info .address strong { display: block; font-size: 125%; font-weight: 500; margin-bottom: 3px; margin-top: 2px; }

}

/* 視窗寬度375-(手機)時的 CSS。*/
@media screen and (max-width: 375px) {
	main section.kvBox { position: relative; padding-top: 120px; /*padding-bottom: 400px; min-height: 790px;*/ }
	main section.kvBox .sloganBox { width: 283px; height: 250px; }
	main section.kvBox .sloganBox .sloganImg { width: 190px; }
	main section.kvBox .sloganBox .subsloganImg { width: 107px; }
	main section.kvBox .animationbg { height: 300px; margin-top: -75px; }
	main section.kvBox .animationbg > div { width: 54px; height: 285px; }
	main section.kvBox .animationbg .meatball { width: 40px; height: 40px; }
	main section.kvBox .animationbg .gyoza { width: 68px; height: 44px; }
	main section.kvBox .arrow { width: 50px; height: 50px; margin-left: -25px; /*bottom: 125px;*/ }

	main section.aboutBox .contentBox .spotBox dl:nth-child(1):after { width: 68px; height: 44px; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(2):after { width: 47px; height: 47px; }
	main section.aboutBox .contentBox .spotBox dl:nth-child(3):after { width: 40px; height: 40px;}


}
/* 視窗寬度320-(手機)時的 CSS。*/
@media screen and (max-width: 320px) {
	.speakerBox .speakerList > div img { max-width: 150px; }
	.iframewording .img { width: 180px; }
	.iframewording .img:before { width: 42px; height: 42px; }
	section.agendaBox .icon { bottom: 58px;}
	section.registerBox:before { bottom: 28%;}
	main section.kvBox { min-height: 620px; padding-bottom: 260px; }
	main section.kvBox .sloganBox { width: 257px; height: 228px; }
	main section.kvBox .sloganBox .sloganImg { width: 160px; }
	main section.kvBox .animationbg { height: 260px; /*margin-bottom: -40px;*/ }
	main section.kvBox .animationbg > div { width: 45px; height: 238px; }
	main section.aboutBox .contentBox { font-size: 16px; width: 90%; }

}

/*vera 1128*/
*{
	/* outline: 1px solid #f00; */
}
.outer{
	position: absolute;
	left: -20px;
	bottom: 28px;
	width: 300px;
	z-index: 1;
}
.inner{
	position: absolute;
	left: -20px;
	bottom: 28px;
	width: 300px;
	-webkit-transform: rotate(-130deg);
	-moz-transform:rotate(-130deg);
	-ms-transform:rotate(-130deg);
	transform:rotate(-130deg);
	z-index: 0;	
}
.innerAnimate{
	-webkit-animation: rotate 1s 1 forwards;
	-moz-transform: rotate 1s 1 forwards;
	-ms-transform: rotate 1s 1 forwards;
	transform: rotate 1s 1 forwards;
}
@keyframes rotate {
	0%{
		-webkit-transform: rotate(-130deg);
		-moz-transform:rotate(-130deg);
		-ms-transform:rotate(-130deg);
		transform:rotate(-130deg);
	}
	100%{
		-webkit-transform: rotate(0deg);
		-moz-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
}
@-webkit-keyframes rotate {
	0%{
		-webkit-transform: rotate(-130deg);
		-moz-transform:rotate(-130deg);
		-ms-transform:rotate(-130deg);
		transform:rotate(-130deg);
	}
	100%{
		-webkit-transform: rotate(0deg);
		-moz-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
}
.chart{
	background:url('./../images/chartBg.jpg');
	background-size: 100%;
	width: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #fff;
}
.chart2{
	border-radius: 50%;
	width: 200px;
	height: 200px;
	width: 100%;
	position: relative;
	margin-top: 160px;
}
.chartCon{
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	position: relative;
}
svg{
	position: relative;
	margin-top: -110px;
	background-color: rgb(253,238,207);
	border-radius: 50%;
	margin-left: -5px;
	overflow: hidden;
}
.chart2::after{
	position: absolute;
	content: '';
	background-image: url('./../images/circle.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 276px;
	height: 276px;
	left: -10px;
	top: -90px;
	z-index: 3;
}
.chart1:before,.chart3:before{
	margin: 100px auto;
	content: '';
	display: block;
}
.chart2::before{
	position: absolute;
	content: '';
	background-image: url('./../images/icon_dofu.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 80px;
	height: 80px;
	-webkit-transform: scaleX(-1) rotate(0) translateX(-30%);
	-moz-transform:scaleX(-1) rotate(0) translateX(-30%);
	-ms-transform:scaleX(-1) rotate(0) translateX(-30%);
	transform:scaleX(-1) rotate(0) translateX(-30%);
	z-index: 100;
	bottom: 50px;
	left: -30px;
	animation: iconTofu 1.5s 0s infinite alternate  linear;
}
@keyframes iconTofu{
	0%{
		-webkit-transform: scaleX(-1) rotate(0) translateX(-30%);
		bottom: 50px;
	}
	100%{
		-webkit-transform: scaleX(-1) rotate(-30) translateX(-30%);
		bottom: 40px;
	}
}
.chartBox{
	text-align: center;
	font-size: 15px;
	width: 90%;
	line-height: 28px;
	margin-left: auto;
	margin-right: auto;
}
.chartBox span{
	color: #e43600;
	font-size: 90px;
	font-weight: 800;
}
.chartBox{
	text-align: center;
	padding: 0;
	font-size: 16px;
	width: 280px;
	line-height: 28px;
}
.chart2W{
	font-size: 25px;
}
@media screen and (min-width:359px){
	.outer{
		position: absolute;
		left: 0px;
		bottom: 40px;
		width: 300px;
		z-index: 1;
	}
	.inner{
		position: absolute;
		left: 0px;
		bottom: 40px;
		width: 300px;
		-webkit-transform: rotate(-130deg);
		-moz-transform:rotate(-130deg);
		-ms-transform:rotate(-130deg);
		transform:rotate(-130deg);
		z-index: 0;	
	}
	.chart2::after{
		position: absolute;
		content: '';
		background-image: url('./../images/circle.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 276px;
		height: 276px;
		left: 10px;
		top: -105px;
	}
}
@media screen and (min-width:376px){
	.chartBox span{
		color: #e43600;
		font-size: 120px;
		font-weight: 800;
	}
	.outer{
		position: absolute;
		left: 10px;
		bottom: 28px;
		width: 315px;
		z-index: 0;
	}
	.inner{
		position: absolute;
		left: 10px;
		bottom: 28px;
		width: 315px;
		z-index: 0;
	}
	svg{
		position: relative;
		margin-top: -110px;
		background-color: rgb(253,238,207);
		border-radius: 50%;
		margin-left: 5px;
	}
	.chart2::after{
		position: absolute;
		content: '';
		background-image: url('./../images/circle.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 288px;
		height: 288px;
		left: 22px;
		top: -105px;
	}
	.chart2::before{
		position: absolute;
		content: '';
		background-image: url('./../images/icon_dofu.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 80px;
		height: 80px;
		z-index: 100;
		bottom: 50px;
		left: 0%;
	}
	.chartBox{
		width: 350px;
	}
}
@media screen and (min-width:420px){
	.outer{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 348px;
		z-index: 0;
	}
	.inner{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 348px;
		z-index: 0;
	}
	svg{
		position: relative;
		margin-top: -110px;
		background-color: rgb(253,238,207);
		border-radius: 50%;
		margin-left: 50%;
		transform: translateX(-50%)
	}
	.chart2::after{
		position: absolute;
		content: '';
		background-image: url('./../images/circle.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 320px;
		height: 320px;
		left: 50%;
		transform: translateX(-50%);
		top: -130px;
	}
	.chart2::before{
		position: absolute;
		content: '';
		background-image: url('./../images/icon_dofu.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 80px;
		height: 80px;
		z-index: 100;
		bottom: 50px;
		left: 0%;
	}
}
@media screen and (min-width:768px){
	.chart2{
		border-radius: 50%;
		width: 200px;
		height: 200px;
		width: 100%;
		position: relative;
		margin-top: 200px;
	}
	.chartBox span{
		color: #e43600;
		font-size: 100px;
		font-weight: 800;
	}
	.outer{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 230px;
		z-index: 0;
	}
	.inner{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 230px;
		z-index: 0;
	}
	svg{
		position: relative;
		margin-top: -110px;
		background-color: rgb(253,238,207);
		border-radius: 50%;
		margin-left: 50%;
		transform: translateX(-50%);
	}
	.chart2::after{
		position: absolute;
		content: '';
		background-image: url('./../images/circle.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 210px;
		height: 210px;
		left: 50%;
		transform: translateX(-50%);
		top: -30px;
	}
	.chart1:before,.chart3:before{
		margin: 100px auto;
		content: '';
		display: block;
	}
	.chart2::before{
		position: absolute;
		content: '';
		background-image: url('./../images/icon_dofu.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 60px;
		height: 60px;
		z-index: 100;
		bottom: 50px;
		left: 0%;
	}
	.chart1:before,.chart3:before{
		margin: 0px auto;
		content: '';
		display: block;
	}
	.chart1,.chart3{
		margin-top: 200px;
	}
	.chartCon{
		display: flex;
		width: 90%;
		margin: auto;
		margin-top: 160px;
	}
	.chartBox{
		width: 230px;
	}
	.chartBox span{
		color: #e43600;
		font-size: 70px;
		font-weight: 800;
	}
	.chart2{
		margin-top: 0px;
	}
}
@media screen and (min-width:1000px){
	.chart2::before{
		width: 80px;
		height: 80px;
	}
	.chart2::after{
		position: absolute;
		content: '';
		background-image: url('./../images/circle.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 276px;
		height: 276px;
		left: 54%;
		transform: translateX(-50%);
		top: -90px;
	}
	.chartBox{
		width: 280px;
	}
	.outer{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 300px;
		z-index: 0;
	}
	.inner{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 300px;
		z-index: 0;
	}
}
@media screen and (min-width:1170px){
	.outer{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 345px;
		z-index: 0;
	}
	.inner{
		position: absolute;
		left: 2px;
		bottom: 28px;
		width: 345px;
		z-index: 0;
	}
	svg{
		position: relative;
		margin-top: -110px;
		background-color: rgb(253,238,207);
		border-radius: 50%;
		margin-left: 50%;
		transform: translateX(-50%);
	}
	.chart2::after{
		position: absolute;
		content: '';
		background-image: url('./../images/circle.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 315px;
		height: 315px;
		left: 54%;
		transform: translateX(-50%);
		top: -130px;
	}
	.chart1:before,.chart3:before{
		margin: 100px auto;
		content: '';
		display: block;
	}
	.chart2::before{
		position: absolute;
		content: '';
		background-image: url('./../images/icon_dofu.png');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 80px;
		height: 80px;
		z-index: 100;
		bottom: 50px;
		left: 0%;
	}
	.chart1:before,.chart3:before{
		margin: 0px auto;
		content: '';
		display: block;
	}
	.chart1,.chart3{
		margin-top: 200px;
	}
	.chartCon{
		display: flex;
		width: 90%;
		margin: auto;
		margin-top: 160px;
	}
	.chartBox{
		width: 320px;
	}
	.chartBox span{
		color: #e43600;
		font-size: 120px;
		font-weight: 800;
	}
	.chart2{
		margin-top: 0px;
	}
	@media screen and (min-width:1300px){
		.chartBox span{
			color: #e43600;
			font-size: 130px;
			font-weight: 800;
		}
		.chartBox{
			width: 400px;
		}
		.outer{
			position: absolute;
			left: 40px;
			bottom: 28px;
			width: 345px;
			z-index: 0;
		}
		.inner{
			position: absolute;
			left: 40px;
			bottom: 28px;
			width: 345px;
			z-index: 0;
		}
		.chart2::after{
			width: 315px;
			height: 315px;
			left: 53%;
			transform: translateX(-50%);
			top: -130px;
		}
		.chart2::before{
			width: 90px;
			height: 90px;
			z-index: 100;
			bottom: 50px;
			left: 30px;
		}
	}
}

iframe{
	width: 100%;
	height: 100%;
}