body { font-size: 18px; background-image: url(../images/kvbg_1920.jpg); -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed;}
body.fix { overflow: hidden; }
a.label { position: absolute; display: block; }
.ifmobile { display: none !important; }
.ifpc { display: block !important; }
.videoIframeBox { margin: auto; }
.video-container { position:relative; padding-bottom:48.5%; padding-top:30px;height:0;overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}
.goJoin { position: fixed; z-index: 995; right: -30px; top: 50%; margin-top: -61px; width: 100px; padding-right: 25px; height: 120px; -webkit-border-radius: 14px; border-radius: 14px; border: 1px solid #00b2b3; background-color: rgba(255,255,255,.8); cursor: pointer; }
.goJoin:hover { background-color: #FFF; right: -20px; }
.goJoin:before { content: ""; width: 50px; height: 50px; -webkit-border-radius: 50px; border-radius: 50px; background-color: #00b2b3; background-image: url(../images/SVG/icon_sign_w.svg); background-repeat: no-repeat; -webkit-background-size: 24px; background-size: 24px; background-position: center center; position: absolute; left: 50%; margin-left: -35px; top: 13px; }
.goJoin span { display: block; width: 100%; height: 100%; color: #00b2b3; text-align: center; padding-top: 72px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.goJoin span i { font-weight: 200; font-size: 14px; }

/*--HEADER--*/
header { height: 100%; /*min-height: 675px;*/ display: flex; justify-content: center; overflow: hidden;}
header .topBox { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; background-color: #FFF; /*border-bottom: 2px solid #e2e2e2;*/}
header .topBox.scroll { background: rgb(0,123,120); background: -moz-linear-gradient(left, rgba(0,123,120,1) 6%, rgba(0,177,178,1) 100%); background: -webkit-linear-gradient(left, rgba(0,123,120,1) 6%,rgba(0,177,178,1) 100%); background: linear-gradient(to right, rgba(0,123,120,1) 6%,rgba(0,177,178,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007b78', endColorstr='#00b1b2',GradientType=1 ); }
header .topBox .content { width: 97vw; max-width: 1320px; margin: auto; display: flex; justify-content: space-between; align-items: center; }
header .logoBox { display: flex; align-items: center; }
header .logoBox.scroll { padding: .4rem 0;}
header .logoBox > div img { height: 32px; width: auto;}
header .logoBox > div.itri { width: 196px; height: 35px; margin-right: 2rem; background-image: url(../images/2x/logo_itri.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%;}
header .logoBox > div.itri a { display: block; width: 100%; height: 100%; }
header .topBox.scroll .logoBox > div.itri { background-image: url(../images/2x/logo_itri_w.png); }
header .logoBox >div:hover { opacity: .7; }

header .nav {display: none;}

header .menu { }
header .menu ul { display: flex; justify-content: flex-end; }
header .menu ul li { position: relative; display: flex; align-items: center; padding: 15px; cursor: pointer; }
header .menu ul li:before { content: ""; background-color: #00b2b3; position: absolute; width: 100%; height: 75px; left: 0; top: -80px; box-shadow: 0 0 4px 1px rgba(0,0,0,.3); transition: .2s ease-out; }
header .topBox.scroll .menu ul li:before { background-color: #FFF; }
header .menu ul li span { position: relative; }
header .menu ul li .txt { font-size: 94.44%; font-weight: 300; line-height: 1.3;}
header .menu ul li .txt span { display: block; font-size: 12px; opacity: .4; }
header .menu ul li .icon { width: 24px; height: 24px; margin-right: 8px; }
header .menu ul li .icon:before,header .menu ul li .icon:after { content: ""; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: .2s ease-out; }
header .menu ul li.about .icon:before { background-image: url(../images/SVG/icon_about_w.svg);}
header .menu ul li.about .icon:after { background-image: url(../images/SVG/icon_about.svg);}
header .menu ul li.speaker .icon:before { background-image: url(../images/SVG/icon_speaker_w.svg);}
header .menu ul li.speaker .icon:after { background-image: url(../images/SVG/icon_speaker.svg);}
header .menu ul li.agenda .icon:before { background-image: url(../images/SVG/icon_agenda_w.svg);}
header .menu ul li.agenda .icon:after { background-image: url(../images/SVG/icon_agenda.svg);}
header .menu ul li.signup .icon:before { background-image: url(../images/SVG/icon_sign_w.svg);}
header .menu ul li.signup .icon:after { background-image: url(../images/SVG/icon_sign.svg);}
header .menu ul li.activity .icon:before { background-image: url(../images/SVG/icon_activity_w.svg);}
header .menu ul li.activity .icon:after { background-image: url(../images/SVG/icon_activity.svg);}
header .topBox.scroll .menu ul li .icon:before { z-index: 30; }
header .menu ul li:hover,header .topBox.scroll .menu ul li { color: #FFF; }
header .topBox.scroll .menu ul li:hover { color: inherit; }
header .menu ul li:hover:before { top: 0; }
header .menu ul li:hover .icon:after,header .topBox.scroll .menu ul li:hover .icon:before,header .topBox.scroll .menu ul li .icon:after { opacity: 0; }
header .topBox.scroll .menu ul li:hover .icon:after { opacity: 1; }

header .sloganBox { width: 750px; margin-top: 15.5vh; }
header .sloganBox > div { margin: 5px auto; }
header .sloganBox .slogan { width: 505px; animation: fadeInDown 1.1s 2s backwards; }
header .sloganBox .sloganDown { animation: fadeInUp 1.1s 2s backwards;}
header .sloganBox .slogan_info { width: 450px; margin: 5px auto;}
header .sloganBox .spotlightBox { width: 400px; height: 400px; overflow: hidden; position: absolute; left: 12px; top: -173px; z-index: 94; animation: fadeInMotion .8s 3s backwards;}
header .sloganBox .spotlightBox .inner { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; animation: zoomInTrue .8s 3s ease-out backwards; }
header .sloganBox .spotlightBox .inner2 { width: 280px; height: 280px; position: absolute; left: 50%; top: 50%; margin-left: -140px; margin-top: -140px; animation: fadeIn .8s 3s ease-out backwards; }
header .sloganBox .spotlightBox .inner2 img { animation: flash 5s 3s linear infinite backwards;}
header .sloganBox .spotlightBox .outter { animation: rotateIn 1.3s 3.5s ease-out backwards; }

header .house { width: 100%; line-height: 0; overflow: hidden; -webkit-mask-image: url(../images/2x/kv_mask.png); mask-image: url(../images/2x/kv_mask.png); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-position: center bottom; position: center bottom; position: fixed; left: 0; bottom: 0; z-index: 3; }
header .house div { /*animation: fadeInUp 2.2s 2s ease-out backwards;*/ margin-bottom: 2px; }

header .arrow { position: fixed; bottom: 30px; left: 50%; z-index: 5; margin-left: -25px; width: 50px; height: 50px; background-color: #FFF; -webkit-border-radius: 50px; border-radius: 50px; opacity: .8; cursor: pointer; animation: GOarrow 1.2s infinite; }
header .arrow.scroll { display: none; }
header .arrow:before,header .arrow:after { content: ""; width: 17px; height: 2px; background-color: #00b2b3; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; left: 50%; top: 49%; margin-left: -3px; }
header .arrow:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: -14px; }
header .arrow:hover { opacity: 1; animation-name: none; }

/*--MAIN--*/
main { background-color: #FFF; display: block; z-index: 20; }
main > section { padding-top: 50px; padding-bottom: 100px; overflow: hidden; }
main > section:nth-child(even) { background-color: #f5f5f5; }
main > section:before { content: ""; width: 700px; height: 530px; background-image: url(../images/SVG/mainbg_gray.svg); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; right: -40px; top: -40px; animation: rorobg 6s infinite forwards linear; -webkit-transform-origin: 89% 47%; transform-origin: 89% 47%; }
main > section:nth-child(even):before {  background-image: url(../images/SVG/mainbg_blue.svg); right: inherit; left: -40px; top: inherit; bottom: -40px; -webkit-transform-origin: 11% 53%; transform-origin: 11% 53%; }
main > section a.label { margin-top: -50px; }
main > section .content { width: 80%; min-width: 900px; margin: auto; }
main h2 { text-align: center; font-size: 194.44%; font-weight: 200; color: #686868; margin-bottom: 40px; }
main h2 > span { display: block; color: #00b2b3; font-size: 1rem; font-weight: 300; margin-top: 10px; }
main h2:before { content: ""; width: 35px; height: 35px; display: block; margin: auto; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; margin-bottom: 8px;}
main p { line-height: 1.7; color: #141414; font-weight: 300;}
main .about h2:before { background-image: url(../images/SVG/icon_about_blue.svg);}
main .speaker h2:before { background-image: url(../images/SVG/icon_speaker_blue.svg);}
main .agenda h2:before { background-image: url(../images/SVG/icon_agenda_blue.svg);}
main .signup h2:before { background-image: url(../images/SVG/icon_sign_blue.svg);}
main .activity h2:before { background-image: url(../images/SVG/icon_activity_blue.svg);}
main .signupBtn a { border: 1px solid #00b2b3; background-color: #00b2b3; color: #FFF; font-size: 138.89%; line-height: 56px; text-align: center; display: block; width: 200px; -webkit-border-radius: 56px; border-radius: 56px; margin: auto; margin-top: 45px; }
main .signupBtn a:hover { color: #00b2b3; background-color: transparent; }
main .signupBtn a span { position: relative; display: inline-block; width: 20px; height: 22px; animation: GOsignup 1.1s ease-out infinite; }
main .signupBtn a span:before,main .signupBtn a span:after { content: ""; width: 14px; height: 1px; background-color: #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 0; top: 50%; margin-top: -4px; }
main .signupBtn a span:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 6px; }
main .signupBtn a:hover span:before,main .signupBtn a:hover span:after { background-color: #00b2b3; }

main .about .wording p { margin-bottom: 14px; text-align: center; }

main .speakerList { display: flex;}
main .speakerBox { flex: 0 0 25%; text-align: center; font-size: 88.89%; line-height: 1.5; cursor: pointer; }
main .speakerBox .img { width: 190px; height: 190px; margin: 10px auto; line-height: 0; overflow: hidden; -webkit-border-radius: 190px; border-radius: 190px; transition: .15s ease-out; }
main .speakerBox:hover .img { width: 200px; height: 200px; margin: 5px auto; box-shadow: 0 0 7px 1px rgba(0,0,0,.3); }
main .speakerBox .txt h3 { font-size: 156.25%; font-weight: 600; color: #00b2b3; }
main .speakerBox:after { content: "MORE"; width: 100px; border: 1px solid #00b2b3; color: #00b2b3; display: block; line-height: 35px; font-weight: 200; transition: .2s ease-out; margin: auto; margin-top: 25px; }
main .speakerBox:hover:after { background-color: #00b2b3; color: #FFF; }

/*講者介紹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,.8); 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: 80%; min-width: 700px; height: 520px; background-color: #FFF; margin: 50px auto;}
.lightBox.tks .content { max-width: 450px; min-width: inherit; height: 240px; }
.lightBox .content iframe { height: 100%; overflow: scroll; }
.lightBox.tks .content iframe { overflow: hidden; }
.lightBox .close { position: absolute; right: 0; top: -45px; width: 45px; height:45px; cursor: pointer;}
.lightBox .close:hover { transform: rotate(180deg);}
.lightBox .close:before, .lightBox .close:after { content: ""; width: 37px; height: 1px; background-color: #fff; transform: rotate(45deg); position: absolute; top: 22px; left: 4px; }
.lightBox .close:after { transform: rotate(-45deg); }
.iframewording { display: flex; justify-content: space-between; background-color: #FFF; padding: 40px 55px; padding-right: 20px; line-height: 1.7; color: #141414; font-weight: 300; text-align:justify; height: 520px; }
.iframewording .fixBox { flex: 0 0 360px; text-align: center; }
.iframewording .wording { width: 100%; text-align: center; overflow: hidden;}
.iframewording .wording strong {color: #00b2b3; font-size: 156.25%; font-weight: 500;}
.iframewording .img { width: 200px; height: 200px; line-height: 0; -webkit-border-radius: 200px; border-radius: 200px; overflow: hidden; margin: auto; }
.iframewording h1 { font-weight: bold; font-size: 156.25%; color: #00b2b3; }
.iframewording .fixBox p { font-size: 94.44%; line-height: 1.4; }
.iframewording .scrollBox { position: relative; height: 100%; overflow: hidden; padding: 0 55px; }
.iframewording .scrollBox:before { content: ""; width: 6px; height: 100%; background-color: #e8e8e8; position: absolute; right: 0; top: 0; }
.iframewording .scrollBox h2 { color: #141414; font-size: 94.44%; font-weight: 500; }
.iframewording .scrollBox p { font-size: 94.44%; line-height: 1.9; margin-bottom: 14px;}
.iframewording .scrollBox .eng { margin-top: 30px; }
.iframewording .scrollBox .eng p { color: #4c4c4c; font-size: 88.24%; line-height: 1.7; margin-bottom: 10px; }
.iframewording .scrollBox .eng h2 { font-weight: 600; }
.ps__rail-x,.ps__rail-y { opacity: 1; background-color: #e8e8e8; }
.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { background-color: #e8e8e8;}
.ps__rail-y,.ps__thumb-y { width: 6px; right: 0; border-radius: 0; background-color: #00b2b3; }
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { width: 6px; right: 0; border-radius: 0; background-color: #00b2b3; }

main .selectorBox { display: flex; justify-content: center; border-bottom: 1px solid #00b2b3; margin-bottom: 50px; }
main .selectorBox li { position: relative; width: 40%; border: 1px solid #00b2b3; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: none; text-align: center; color: #7a7a7a; font-weight: 200; padding: 18px 0; cursor: pointer; }
main .selectorBox li.on,main .selectorBox li:hover { background-color: #00b2b3; color: #FFF;}
main .selectorBox li:hover { opacity: .7; }
main .selectorBox li.on:hover { opacity: 1; }
main .selectorBox li.on:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 7.5px 0 7.5px; border-color: #00b2b3 transparent transparent transparent; position: absolute; left: 50%; margin-left: -7.5px; bottom: -11px; }

main .timeTable > div { display: none; }
main .timeTable > div.on { display: block; }
main .timeTable .tr { display: flex; align-items: center; border-bottom: 1px dotted #cdcdcd; }
main .timeTable .tr:nth-last-child(-n+2) { border-bottom: none; }
main .timeTable .tr > div { padding: 20px 3vw; }
main .timeTable .tr > div.time { font-size: 94.44%; text-align: center; font-weight: 300; }
main .timeTable .tr > div.time:after { content: ""; width: 11px; height: 11px; -webkit-border-radius: 11px; border-radius: 11px; background-color: #FFF; border: 1px solid #00b2b3; position: absolute; right: -7.5px; top: 50%; margin-top: -7.5px; z-index: 30; }
main .timeTable .tr > div.txt { border-left: 1px solid #00b2b3; }
main .timeTable .tr > div.txt p { line-height: 1.5; }
main .timeTable .eng .tr > div.txt p { font-size: 94.44%; color: #565656; font-weight: 200;}
main .timeTable .eng .tr > div.txt p strong {font-weight: 600;}
main .timeTable .tr > div.txt h3 { font-size: 144.44%; font-weight: 300; }
main .timeTable .tr > div.txt h3.blue { font-weight: 500; color: #00b2b3; line-height: 1.3; margin-top: 5px; }
main .timeTable .tr > div.txt h3.blue:nth-child(1) { margin-top: 0; }
main .timeTable .eng .tr > div.txt h3.blue { font-weight: 600;}
main .timeTable .ps { margin: 45px auto 0 auto; text-align: center; font-size: 83.33%; }
main .timeTable .ps p { color: #6b6b6b;}
main .timeTable .eng .ps p {font-weight: 200;}

main .signup .titleBox { margin-bottom: 45px; }
main .signup .titleBox span { display: block; text-align: center; font-weight: 300; }
main .signup .titleBox .ch { font-size: 200%; color: #00b2b3; }
main .signup .titleBox .ch i { margin-left: 1.3rem; }
main .signup .titleBox .eng { font-size: 88.89%; color: #3d4444; margin-top: 5px; }

main .signup .infoBox { display: flex; margin-bottom: 35px; }
main .signup .txt { flex: 0 0 36%; /*min-width: 390px;*/ padding-right: 2%; font-size: 94.44%; }
main .signup .txt strong { font-size: 164.71%; font-weight: 500; margin: 0 5px; }
main .signup .txt > div strong:first-child { margin-left: 0; }
main .signup .txt > div { padding-left: 34px; line-height: 1.5; font-weight: 200;}
main .signup .txt div:before { content: ""; width: 26px; height: 26px; background-image: url(../images/SVG/icon_cal.svg); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; left: 0; top: 8px; }
main .signup .txt div.address:before { background-image: url(../images/SVG/icon_add.svg); }
main .signup .txt div.address { margin-bottom: 5px; }
main .signup .txt div.address span { display: block; }
main .signup .txt div.address span.eng { font-size: 94.12%; }
main .signup .map { flex: 0 0 62%; height: 240px; padding: 10px; background-color: #FFF; }

main .signup .formBox:before { content: ""; width: 100%; height: 1px; border-bottom: 1px dotted #cdcdcd; position: absolute; left: 0; top: 13px; }
main .signup .formBox h3 { font-size: 144.44%; letter-spacing: .1rem; text-align: center; width: 150px; margin: auto; background-color: #f5f5f5; position: relative; margin-bottom: 35px; }

main .signup .privacyBox { font-size: 83.33%; margin-top: 35px; }
main .signup .privacyBox h3 { text-align: center; font-weight: 500; margin-bottom: 5px; }

main .sliderBox .sliderContent { /*margin: 0 40px;*/ }
main .sliderBox .slider { padding: 10px; }
main .sliderBox .slider .img { border: 6px solid  #e2e2e2; margin-bottom: 10px; }
main .sliderBox .slider p { font-size: 94.44%; text-align: center; line-height: 1.53; }
main .sliderBox .slider.slick-center .img { border-color: #00b2b3; transform: scale(1.05); }
main .sliderBox .slick-prev { width: 30px; height: 44px; margin-top: -44px; }
main .sliderBox .slick-prev:before,main .sliderBox .slick-prev:after { content: ""; width: 17px; height: 2px; background-color: #00b2b3; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 20%; top: 66%; margin-top: -3px; display: block; opacity: 1; }
main .sliderBox .slick-prev:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -14px; }
main .sliderBox .slick-next { width: 30px; height: 44px; margin-top: -44px; }
main .sliderBox .slick-next:before,main .sliderBox .slick-next:after { content: ""; width: 17px; height: 2px; background-color: #00b2b3; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute;  left: 20%; top: 66%; margin-top: -3px; display: block; opacity: 1; }
main .sliderBox .slick-next:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -14px; }


/*--FOOTER--*/
footer { background-color: rgba(6,146,143,.65); color: #FFF; padding:20px; text-align: center; font-size: 15px; font-weight: 200; line-height: 1.6; text-shadow: 0 0 5px rgba(0,0,0,.8),0 0 7px rgba(0,0,0,.3); z-index: 40; }
footer img { display: inline-block; vertical-align: middle; margin-left: 15px; margin-right: 8px; margin-top: 0; margin-bottom: 8px; width: 50px; }
footer img.cw { width: 68px; margin-bottom: 3px; }
footer a { color: #494949; }
footer a:hover { color: #017de9;}
.goTop { background-color: rgba(255,255,255,.8); width: 48px; height: 48px; -webkit-border-radius: 50px; border-radius: 50px; position: fixed; right: 35px; bottom: 35px; cursor: pointer; z-index: 900;}
.goTop:before,.goTop:after { content: ""; width: 17px; height: 2px; background-color: #00b2b3; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 50%; top: 46%; margin-left: -3px; }
.goTop:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -14px; }
.goTop:hover { background-color: #FFF; }

/* 視窗高度大於800時的 CSS。*/
@media screen and (min-height: 800px) {
header .sloganBox { margin-top: 22vh; transform: scale(1.1); }
}
/* 視窗高度小於675時的 CSS。*/
@media screen and (max-height: 671px) {
header .sloganBox { margin-top: 11vh; transform: scale(.85);}
}
/* 視窗高度小於620時的 CSS。*/
@media screen and (max-height: 620px) {
header .sloganBox { margin-top: 5vh; transform: scale(.75);}
}
/* 視窗高度小於578時的 CSS。*/
@media screen and (max-height: 578px) {
header .sloganBox { margin-top: 0; transform: scale(.65);}
}


/* 視窗寬度小於1279時的 CSS。*/
@media screen and (max-width: 1279px) {
main > section:before { width: 560px; height: 424px; }
main > section .content { width: 85%; min-width: inherit; }
main .speakerBox .img { width: 150px; height: 150px; }
main .speakerBox:hover .img { width: 160px; height: 160px; }
}
/* 視窗寬度小於1025時的 CSS。*/
@media screen and (max-width: 1025px) {
body { background-color: #0cb2ad; background-image: none; }
header { background-image: url(../images/kvbg_1920.jpg); background-repeat: no-repeat; -webkit-background-size: 1300px; background-size: 1300px; background-position: center bottom; min-height: 550px;}
header .logoBox > div img { height: 26px; }
header .logoBox > div.itri { width: 157px; height: 28px; margin-right: 1.5rem; }
header .menu ul li { padding: 12px 8px; }
header .menu ul li .icon { width: 20px; height: 20px; }

header .house { position: absolute; width: 1300px; left: 50%; margin-left: -650px; }
header .arrow { position: absolute; }

main .speakerList { flex-wrap: wrap; justify-content: center; }
main .speakerBox { flex: 0 0 250px; margin-bottom: 30px; }

main .signup .txt { flex: 0 0 44%; }
main .signup .map { flex: 0 0 54%; }



}

/* 視窗寬度小於850時的 CSS。*/
@media screen and (max-width:850px) {
main > section { padding-bottom: 70px; }
main .signup .infoBox { display: block; }
main .signup .txt { padding-right: 0; margin-bottom: 20px; }

}

/* 視窗寬度820時的 CSS。(FOR POPUP)*/
@media screen and (max-width: 820px) {
.iframewording { padding: 30px 35px; }
.iframewording .img { width: 160px; height: 160px; }
.iframewording .scrollBox { padding: 0 35px 0 25px; }
}
/* 視窗寬度800時的 CSS。(FOR POPUP)*/
@media screen and (max-width: 800px) {
.lightBox .content { width: 95%; height: 80%; overflow-y: scroll; min-width: inherit; }
.iframewording { overflow-y: auto; display: block; }
.iframewording .scrollBox { height: auto; padding: 35px; }
.iframewording .scrollBox:before { display: none; }
.lightBox .close { right: 10px; top: 10px; }
.lightBox .close:before, .lightBox .close:after { background-color: #333; }
}
/* 視窗寬度768-(TABLET)時的 CSS。*/
@media screen and (max-width: 768px) {
body { background-color: #0cb2ad; background-image: none; }
body:before { content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../images/kvbg_1920.jpg); background-repeat: no-repeat; background-position: center bottom; -webkit-background-size: 100%; background-size: 100%; }
.goTop { right: 25px; bottom: 35px; }
.goTop:hover { opacity: 1; }

/*header { background-image: url(../images/kvbg_1920.jpg); background-repeat: no-repeat; -webkit-background-size: 1300px; background-size: 1300px; background-position: center bottom; min-height: 600px;}*/
header .topBox .content { width: 100%;}
header .logoBox { padding: 14px;}
header .logoBox > div img { height: 22px; }
header .logoBox > div.itri { width: 137px; height: 25px; margin-right: 1rem; }

header .menu { position: fixed; width: 100%; height: auto; left: 0; top: 53px; z-index: 990; display: none; }
header .menu ul { display: block; background-color: #FFF; box-shadow: 0 5px 5px 1px rgba(0,0,0,.15); }
header .menu ul li { justify-content: center; border-top: 1px dotted #cdcdcd; }
header .menu ul li:before { display: none;}
header .menu ul li .txt { font-size: 100%; }
header .menu ul li .txt span { font-size: 14px; opacity: .6; }
header .menu ul li .icon { width: 26px; height: 26px; margin-right: 8px; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; }
header .menu ul li:hover,header .topBox.scroll .menu ul li { color: inherit; }
header .topBox.scroll .menu ul li:hover { color: inherit; }
header .menu ul li.about .icon { background-image: url(../images/SVG/icon_about.svg);}
header .menu ul li.speaker .icon { background-image: url(../images/SVG/icon_speaker.svg);}
header .menu ul li.agenda .icon { background-image: url(../images/SVG/icon_agenda.svg);}
header .menu ul li.signup .icon { background-image: url(../images/SVG/icon_sign.svg);}
header .menu ul li.activity .icon { background-image: url(../images/SVG/icon_activity.svg);}
header .menu ul li .icon:before, header .menu ul li .icon:after { display: none; }

header .sloganBox { margin-top: 0; transform: scale(.75); }
header .sloganBox .slogan_info { width: 500px; }

header .arrow {box-shadow: 0 0 5px rgba(0,0,0,.2);}


/*-------------漢堡圖標----------*/
/*控制圖標的位置*/
.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:#00b2b3; -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:#00b2b3;}
.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:before { width: 392px; height: 371px; }
main .speakerBox .img { margin: 5px auto;}
main .speakerBox:hover .img { width: 150px; height: 150px; box-shadow: none; }
main .speakerBox:hover:after { background-color: transparent; color: #00b2b3; }
main .selectorBox li { width: 50%; padding: 15px 0; font-size: 90%; font-weight: 300; }
main .timeTable .tr > div { padding: 15px; }
main .timeTable .tr > div.time { flex: 0 0 120px; padding: 15px 0; line-height: 1; }

main .signup .infoBox { display: block; }
main .signup .txt { width: 100%; min-width: inherit; padding-right: 0; }
main .signup .map { width: 100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; margin-top: 20px; height: 300px; }

footer { padding-bottom: 65px; }
.goTop { box-shadow: 0 0 5px rgba(0,0,0,.2); bottom: 65px; right: 20px; }

.goJoin { right: inherit; left: 0; top: inherit; margin-top: 0; bottom: 0; width: 100%; padding-right: 0; height: auto; -webkit-border-radius: 0; border-radius: 0; border: none; background-color: #00b2b3; }
.goJoin:hover { background-color: #00b2b3; right: inherit; }
.goJoin:before { content: ""; width: 44px; height: 44px; margin-left: -98px; top: 3px; background-color: transparent; -webkit-background-size: 20px; background-size: 20px; }
.goJoin span { display: block; width: 180px; height: 100%; color: #FFF; padding: 16px 0 16px 28px; margin: auto;  }
.goJoin span i { padding-left: 5px; font-size: 90%; }
}
/* 視窗寬度550-(手機)時的 CSS。*/
@media screen and (max-width: 550px) {
.ifpc { display: none !important; }
.ifmobile { display: block !important; }
header .sloganBox { transform: scale(.6); }
header .sloganBox .spotlightBox { left: -107px; }
header { -webkit-background-size: 800px; background-size: 800px; }
header .house { width: 800px; margin-left: -400px; }
header .house div { width: 150%; margin-left: -25%;}

main > section .content { width: 88%; }
main .about .wording p { font-size: 16px; }
main .selectorBox { margin-bottom: 15px; }
main .timeTable .tr { display: block; border:none; /*margin-bottom: 10px;*/ }
main .timeTable .tr > div.time { padding: 10px 0; background-color: #00b2b3; color: #FFF;}
main .timeTable .tr > div.time:after { display: none; }
main .timeTable .tr > div.time:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 8px 0 8px; border-color: #00b2b3 transparent transparent transparent; position: absolute; left: 50%; margin-left: -8px; bottom: -7px; }
main .timeTable .tr > div.txt { border: 1px solid #00b2b3; }
main .timeTable .tr > div.txt h3 { text-align: center; font-size: 120%; }
main .timeTable .tr > div.txt p { font-size: 16px; }
main .timeTable .ps { margin-top: 25px; }
main .signupBtn a { margin-top: 25px; font-size: 120%; line-height: 50px; width: 170px; }
main .signupBtn a span:before, main .signupBtn a span:after { width: 12px; }
main .signupBtn a span:before { margin-top: -2px;}

main .signup .titleBox .ch {line-height: 1.3; font-size: 185%;}
main .signup .titleBox .ch i { margin-left: auto; display: block; }
main .signup .titleBox .eng { line-height: 1.3; }

.iframewording { height: inherit; }
.iframewording .scrollBox { padding: 25px 0; }
.lightBox .close { background-color: rgba(255,255,255,.85); }
.lightBox .close:hover { transform: rotate(0);}

}
/* 視窗寬度320-(手機)時的 CSS。*/
@media screen and (max-width: 320px) {
header .sloganBox { transform: scale(.52); }
}