body.lock { height: 100%; overflow: hidden; } .fackBox { width: 90%; height: 80%; max-width: 700px; max-height: 430px; background-color: #000; position: fixed; left: 50%; top:50%; display: none; z-index: 1; } .fackClose { background-color: rgba(255,255,255,.8); width: 35px; height: 35px; position: fixed; left: 50%; top:50%; z-index: 10000; display: none; } .fackClose:hover { opacity: .5; } .fackClose:before,.fackClose:after { content: ""; width: 30px; height: 3px; background-color: #000; display: block; transform: rotate(45deg); position: absolute; left: 3px; top: 16px; cursor: pointer; } .fackClose:after { transform: rotate(-45deg);} .kvSection { height: 100%; min-height: 830px; background-color: #fdecd8; display: flex; flex-wrap: wrap; align-content: center; overflow: hidden; } .kvSection img { width: auto; height: 100px; } .dotbgBox { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; } .dotbgBox .bgblank, .dotbgBox .bgorange,.dotbgBox .bgorange:before,.dotbgBox .bgorange:after, .dotbgBox .bgpurple,.dotbgBox .bgpurple:before,.dotbgBox .bgpurple:after, .dotbgBox .bggreen,.dotbgBox .bggreen:before,.dotbgBox .bggreen:after, .dotbgBox .bgyellow,.dotbgBox .bgyellow:before,.dotbgBox .bgyellow:after { -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .dotbgBox .bgblank { background-image: url(../images/blankmask.svg); width: 575px; height: 574px; left: -40px; top:-312px; } .dotbgBox .bgorange { width: 167px; height: 169px; left: 81%; top:138px; } .dotbgBox .bgorange:before { content: ""; background-image: url(../images/orange-01.svg); animation: motionDot 6s infinite backwards linear;} .dotbgBox .bgorange:after { content: ""; background-image: url(../images/orangmask.svg);} .dotbgBox .bgpurple { width: 322px; height: 319px; left: 57%; top:222px; } .dotbgBox .bgpurple:before { content: ""; background-image: url(../images/purple-01.svg); animation: motionDot_reverse 6s infinite backwards linear;} .dotbgBox .bgpurple:after { content: ""; background-image: url(../images/purplemask.svg); } .dotbgBox .bggreen { width: 473px; height: 472px; left: 69%; top:400px; } .dotbgBox .bggreen:before { content: ""; background-image: url(../images/green-01.svg); animation: motionDot_reverse 6s infinite backwards linear;} .dotbgBox .bggreen:after { content: ""; background-image: url(../images/greenmask.svg); } .dotbgBox .bgyellow { width:205px; height: 205px; left: 2%; top: auto; bottom: -73px; } .dotbgBox .bgyellow:before { content: ""; background-image: url(../images/yellow-01.svg); animation: motionDot 6s infinite backwards linear;} .dotbgBox .bgyellow:after { content: ""; background-image: url(../images/yellowmask.svg); } .kvSection img.preword { height: 27px; } .kvSection div.preword { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 1.6875rem; color: #221815; line-height: 1.1; opacity: .6; margin-bottom: .3rem;} .kvSection .sloganBox { width: 85%; margin: 0 auto; padding-top: 140px; opacity: 0; left: -100px; transition: 1.1s ease-out; } .kvSection .sloganBox.entro { opacity: 1; left: 0;} .kvSection .sloganBox h1 { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 6.0625rem; color: #221815; line-height: 1.1; } .kvSection .sloganBox .subsloganBox { display: flex; align-items: center; } .kvSection .sloganBox .subsloganBox .date { font-family: "sharik-sans",sans-serif; font-weight: 300; font-size: 2.7rem; color: #f09823; line-height: 1.1; margin-right: .5rem;} .kvSection .sloganBox .subsloganBox img { height: 38px; margin-top: 10px; } .kvSection .sloganBox .subsloganBox .subslogan { color: #009747; font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 1.8125rem; line-height: 1.1; margin-top: 10px; } .kvSection .sloganBox .wording { padding: 1rem 0; } .kvSection .sloganBox .wording span { margin-left: 1rem; } .kvSection .sloganBox .wording .btn { margin-top: 1rem; } .speakerBox { max-width: 78%; margin: 0 auto;height: 300px; /*overflow: hidden;*/ padding: 0 40px; /*background-color: #ddd;*/} .speakerBox a.label { top: -140px; } .speakerBox .slider { text-align: center; margin: auto; } .speakerBox .slider div.sliderBox { border:1px solid #f4cda0; background-color: #FFF; padding: 15px; padding-bottom: 30px; width: 170px; height: 210px; margin: 10px auto; margin-bottom: 25px; line-height: 1.4; transition: .3s; } .speakerBox .slider div.sliderBox img { margin: auto; width: 120px; height: auto; -webkit-border-radius: 120px; border-radius: 120px; } .speakerBox .slider div.sliderBox h2 { font-size: 1.3125rem; font-weight: 600; margin-top: 3px;} .speakerBox .slider div.sliderBox p { font-size: 1rem; color: #4d4644; } .speakerBox .slider div.sliderBox:before { content: "more"; display: block; padding: 5px 0 7px 0; width: 60px; background-color: #f4cda0; color: #FFF; font-size: .9375rem; font-weight: 200; text-align: center; line-height: 1; -webkit-border-radius: 4px; border-radius: 4px; position: absolute; bottom: -13px; left: 50%; margin-left: -30px; transition: .3s; } .speakerBox .slider div.sliderBox:hover { border-color: #119d51; cursor: pointer; } .speakerBox .slider div.sliderBox:hover:before { background-color: #119d51; } .speakerBox a.coverlink { height: 106%; } .speakerBox .owl-nav { position: absolute; width: 100%; top: 50%; left: 0;} .speakerBox .owl-nav .owl-prev,.speakerBox .owl-nav .owl-next { z-index: 300; width: 36px; height: 36px; background-color: rgba(0,0,0,.45); position: absolute; margin-top: -22px; } .speakerBox .owl-nav .owl-prev { left: -36px; } .speakerBox .owl-nav .owl-next { right: -36px; } .speakerBox .owl-nav .owl-prev:hover,.speakerBox .owl-nav .owl-prev:focus { left: -40px; background-color: rgba(0,0,0,.65); } .speakerBox .owl-nav .owl-next:hover,.speakerBox .owl-nav .owl-next:focus { right: -40px; background-color: rgba(0,0,0,.65); } .speakerBox .owl-nav .owl-prev:before,.speakerBox .owl-nav .owl-prev:after,.speakerBox .owl-nav .owl-next:before,.speakerBox .owl-nav .owl-next:after { content: ""; background-color: #FFF; width: 16px; height: 3px; transform: rotate(-45deg); position: absolute; left: 11px; top: 21px; opacity: 1; } .speakerBox .owl-nav .owl-prev:before { transform: rotate(45deg); left: 9px; } .speakerBox .owl-nav .owl-prev:after { left: 9px; top:11px; } .speakerBox .owl-nav .owl-next:after { transform: rotate(45deg); top:11px; } .indexSection { padding: 70px 0; line-height: 1.8; border-bottom: 1px solid #FFF; background-color: #FFF; } .indexSection .content { width: 85%; max-width: 1500px; margin: auto;} .indexSection .content h2 { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 2.8rem; color: #221815; line-height: 1.1; margin-bottom: 1.5rem; } .indexSection .content h3 { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 2rem; color: #009747; line-height: 1.1; margin-bottom: 1.5rem; } .indexSection .content h4 { font-weight: 500; font-size: 1.4375rem; } #preword .wording { margin-bottom: 3rem; } .speicaltyBox { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; } .speicaltyBox div { flex:0 0 20%; /*background-color: #eee5f0;*/ background-image: url(../images/speciality1.png); background-repeat: no-repeat; -webkit-background-size: 90px; background-size: 90px; background-position: center 10px; /*margin: .2rem;*/ line-height: 1.4; padding: 1rem; padding-top: 95px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .speicaltyBox div h4 { color: #a97bb1; } .speicaltyBox div:nth-child(2) { /*background-color: #e2efdc;*/ background-image: url(../images/speciality2.png); } .speicaltyBox div:nth-child(2) h4 { color: #6dab4b; } .speicaltyBox div:nth-child(3) { /*background-color: #ffede1;*/ background-image: url(../images/speciality3.png); } .speicaltyBox div:nth-child(3) h4 { color: #f78a2f; } .speicaltyBox div:nth-child(4) { /*background-color: #ffebeb;*/ background-image: url(../images/speciality4.png); } .speicaltyBox div:nth-child(4) h4 { color: #ef5316; } .speicaltyBox div:nth-child(5) { /*background-color: #e6fffa;*/ background-image: url(../images/speciality5.png); } .speicaltyBox div:nth-child(5) h4 { color: #0da084; } .btnBox { display: flex; justify-content: center; margin-top: 2rem; } .btnBox p { margin: 0 .4rem; } .btnBox a.btn span { animation: motionArrow_right 1.2s ease-out infinite; } #ticketSection { background-color: #fff6ea; } #ticketSection .dotbgBox .bgblank { left: 68%; top: auto; bottom: -183px; } #ticketSection .dotbgBox .bgorange { left: -2%; top:200px; } #ticketSection .dotbgBox .bgpurple { left: 27%; top:-52px; } #ticketSection .dotbgBox .bggreen { display: none;} #ticketSection .dotbgBox .bgyellow { left: 65%; top: auto; bottom: 300px; } #ticketSection .bigtitle { color: #009747; line-height: 1.4; margin-bottom: 1.5rem;} #ticketSection .bigtitle p:last-child { font-size: 1.5625rem; font-weight: 500; } #ticketSection .detail_twin { display: flex; align-items: center; margin-bottom: 1.5rem;} #ticketSection .tableInfo > div { display: flex; align-items: center; padding: 5px 0; } #ticketSection .tableInfo > div:nth-child(even) { background-color: #FFF; } #ticketSection .tableInfo > div > p:first-child { flex:0 0 95px; text-align: center; } #ticketSection .tableInfo > div > p:nth-child(2) { flex:0 0 38px; height: 38px; background-color: #b3b3b3; -webkit-border-radius: 38px; border-radius: 38px;} #ticketSection .tableInfo > div > p:nth-child(3) { padding:0 8px; line-height: 1.6; } #ticketSection .tableInfo > div.address:hover { cursor: pointer; background-color: #009747; color: #FFF; } #ticketSection .bigBtnBox { flex: 0 0 500px; margin-left: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap;} #ticketSection .bigBtnBox > div { flex: 0 0 245px; height: 150px; background-image: url(../images/bigbtn1.jpg); -webkit-background-size: 100%; background-size: 100%; box-shadow: 0 0 7px -1px rgba(0,0,0,0.6); color: #FFF; font-weight: 200; margin-bottom: .6rem; overflow: hidden; display: flex; align-items: center; } #ticketSection .bigBtnBox > div:before { content: ""; background-image: url(../images/ribbon_full.png); -webkit-background-size: 100%; background-size: 100%; width: 100px; height: 130px; position: absolute; right: -15px; top: 50%; margin-top: -65px; opacity: .5; } /*#ticketSection .bigBtnBox > div:hover:before {opacity: 0; }*/ #ticketSection .bigBtnBox > div:nth-child(2) { background-image: url(../images/bigbtn2.jpg);} #ticketSection .bigBtnBox > div:nth-child(3) { background-image: url(../images/bigbtn3.jpg);} #ticketSection .bigBtnBox > div:nth-child(4) { background-image: url(../images/bigbtn4.jpg);} #ticketSection .bigBtnBox > div p { padding: 0 15px; font-size: 1rem; line-height: 1.3; } #ticketSection .bigBtnBox > div p:first-child { /*padding-top: 15px;*/ font-size: 1.5rem; font-weight: 500; } #ticketSection .bigBtnBox > div p.btnword { display: inline-block; margin-left: 15px; margin-top: 5px; width: auto; background-color: #FFF; -webkit-border-radius: 20px; border-radius: 20px; padding: 6px 33px 6px 15px; color: #c60d14; font-weight: 300; line-height: 1; } #ticketSection .bigBtnBox > div:nth-child(2) p.btnword {color: #dc2b10;} #ticketSection .bigBtnBox > div:nth-child(3) p.btnword {color: #01403c;} #ticketSection .bigBtnBox > div:nth-child(4) p.btnword {color: #043a8b;} /*#ticketSection .bigBtnBox > div p.btnword:before { content: ""; width: 22px; height: 22px; -webkit-border-radius: 26px; border-radius: 26px; background-color: #c60d14; position: absolute; right: 4px; top: 3px; }*/ #ticketSection .bigBtnBox > div:nth-child(2) p.btnword:before {background-color: #dc2b10;} #ticketSection .bigBtnBox > div:nth-child(3) p.btnword:before {background-color: #01403c;} #ticketSection .bigBtnBox > div:nth-child(4) p.btnword:before {background-color: #043a8b;} #ticketSection .bigBtnBox > div p.btnword span { position: absolute; top: 7px; right: 6px; width: 1rem; height: 1rem; animation: flash .9s infinite; } #ticketSection .bigBtnBox > div:hover p.btnword span { animation-name: none; } #ticketSection .bigBtnBox > div p.btnword span:before,#ticketSection .bigBtnBox > div p.btnword span:after { content: ""; width: 8px; height: 2px; background-color: #FFF; transform: rotate(45deg); position: absolute; left: 4px; top:4px; } /*#ticketSection .bigBtnBox > div:hover p.btnword span:before,#ticketSection .bigBtnBox > div:hover p.btnword span:after { left: 5px; }*/ #ticketSection .bigBtnBox > div p.btnword span:after { transform: rotate(-45deg); top:8px; } #ticketSection .olList { margin-bottom: 1.5rem; } #ticketSection .olList ol { list-style-type: decimal; margin-left: 1.8rem; } #ticketSection .qaBox dl { border-bottom:1px solid #d9c7e2; margin-bottom: 1rem; } #ticketSection .qaBox dl:last-child { border-bottom: none; margin-bottom: 0; } #ticketSection .qaBox dt { font-weight: 500; font-size: 1.4375rem; color: #a97bb1; line-height: 1.4; display: flex; } #ticketSection .qaBox dt:before { content: "Q"; font-weight: 300; font-family: "sharik-sans",sans-serif; margin-right: .3rem; } #ticketSection .qaBox dd { padding-bottom: 1rem; padding-top: .3rem; } #agendaSection { background-color: #ffeedd; } #agendaSection .dotbgBox .bgblank { display: none;} #agendaSection .dotbgBox .bgorange { left: 88%; top:130px; } #agendaSection .dotbgBox .bgpurple { left: 67%; bottom: -2%; top: auto; } #agendaSection .dotbgBox .bggreen { top:44%; left: -20%;} #agendaSection .dotbgBox .bgyellow { left: 22%; top:-30px; bottom: auto; } .agendaTable { margin-bottom: 2rem; } .agendaTable .agendaTr { display: flex; } .agendaTable .agendaTr:nth-child(even) { background-color: rgba(255,255,255,.4); } .agendaTable .agendaTr .time { font-family: "cholla-wide"; font-style: normal; font-weight: 400; font-size: 1.625rem; text-align: right; flex: 0 0 150px; align-self: center;} .agendaTable .agendaTr .detail { display: flex; margin-left: 60px; padding:.5rem 1rem .5rem 0; border-left:1px solid #c7c7c7; line-height: 1.6; align-self: center; } .agendaTable .agendaTr .detail.clear:before { content: ""; width: 9px; height: 9px; background-color: #d3bfda; border: 1px solid #b98ac9; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; left: -6px; top: 50%; margin-top: -5px; } .agendaTable .agendaTr .detail .img { flex: 0 0 91px; margin-left: -45px; } .agendaTable .agendaTr .detail .img p { height: 91px; line-height: 0; margin: .5rem 0;} .agendaTable .agendaTr .detail .img p img { width: 89px; position: relative; -webkit-border-radius: 100px; border-radius: 100px; border: 1px solid #b98ac9;} .agendaTable .agendaTr .detail .img a { display: block; position: relative; } .agendaTable .agendaTr .detail .img a:before { content: ""; width: 90%; height: 90%; -webkit-border-radius: 100px; border-radius: 100px; background-color: #b98ac9; position: absolute; left: 5%; top: 5%; animation: zooming 1.2s infinite backwards; box-shadow: 0 0 2px 2px #b98ac9; } .agendaTable .agendaTr .detail .img a:hover { transform: scale(1.1); } .agendaTable .agendaTr .detail .img a:hover:before { animation-name: none; } .agendaTable .agendaTr .detail .txt { margin-left: 20px; align-self: center; width: 100%; } .agendaTable .agendaTr .detail.clear .txt,.agendaTable .agendaTr .detail.clearin .txt { margin-left: 65px; } .agendaTable .agendaTr .detail .person,.agendaTable .agendaTr .seprateSubject { font-size: 1.4375rem; font-weight: 600; line-height: 1.4; } .agendaTable .agendaTr .detail .person span { display: inline-block; margin-right: 1rem; } .agendaTable .agendaTr .detail .wording { color: #6d6d6d; font-size: 1.0625rem; font-weight: 200;} .agendaTable .agendaTr .txt a.link,#ticketSection a.link { position: relative; color: #151515; } .agendaTable .agendaTr .txt a.link:before,#ticketSection a.link:before { content: ""; width: 100%; height: 2px; background-color: #b98ac9; position: absolute; left: 0; bottom: 0;} .agendaTable .agendaTr .txt a.link:hover,#ticketSection a.link:hover { color: #00823d; } .agendaTable .agendaTr .txt a.link:hover:before,#ticketSection a.link:hover:before { background-color: #00823d; } .agendaTable .agendaTr .team { /*display: flex; flex-wrap: wrap;*/ width: 100%; margin-bottom: 1rem; } .agendaTable .agendaTr .team dl { display: flex; font-size: 1rem; margin-right: 1rem; margin-top: .5rem; justify-content: flex-start; align-items: center; line-height: 1.4; } .agendaTable .agendaTr .team dl dt { width: 60px; flex: 0 0 60px; line-height: 0; margin-right: .5rem; align-self: flex-start;} .agendaTable .agendaTr .team dl img { -webkit-border-radius: 80px; border-radius: 80px; } .agendaTable .agendaTr .pmDetail { width: 100%;} .agendaTable .agendaTr .pmDetail .detail { border-bottom: 1px dotted #c7c7c7;} .agendaTable .agendaTr .pmDetail .detail.clearin { border-bottom: none; } .agendaTable .agendaTr .pmDetail .detail:last-child { border-bottom: none; } .agendaTable .agendaTr .detail .mblock .mimg { display: none; } #agendaSection h3 { text-align: center; color: #b98ac9; padding: 1rem; width: 500px; margin: auto; margin-bottom: 1rem; border: 1px solid #b98ac9; -webkit-border-radius: 100px; border-radius: 100px; background-color: rgba(255,255,255,.4);} #agendaSection h3 span { margin-left: 1rem; } #agendaSection h3:before,#agendaSection h3:after { content: ""; width: 10px; height: 10px; border: 1px solid #b98ac9; -webkit-border-radius: 12px; border-radius: 12px; background-color: #d3bfda; position: absolute; top: 50%; margin-top: -6px; } #agendaSection h3:before { left: -6px; } #agendaSection h3:after {right: -6px;} .agendaTable.pm { display: flex; } .agendaTable.pm .agendaTr { display: block; flex: 0 0 25%;} .agendaTable.pm .agendaTr:nth-child(even) {background-color: rgba(255,255,255,.4);} .agendaTable.pm .agendaTr .time { padding: .3rem 0; font-size: 1.1875rem; font-weight: 200; font-family: inherit; text-align: center; background-color: #eb496a; color: #FFF; } .agendaTable.pm .agendaTr:nth-child(2) .time { background-color: #f2935a; } .agendaTable.pm .agendaTr:nth-child(3) .time { background-color: #3ba29f; } .agendaTable.pm .agendaTr:nth-child(4) .time { background-color: #36a3c7; } .agendaTable.pm .agendaTr .detail { display: block; margin-left: 0; border-left: none; padding: .5rem 1rem; } .agendaTable.pm .agendaTr .detail .txt { margin-left: 0; } .agendaTable.pm .agendaTr .seprateSubject { text-align: center; margin: .5rem 0; } .agendaTable.pm .agendaTr .leader { display: flex; } .agendaTable.pm .agendaTr .leader .img { flex: 0 0 91px; width: 91px; margin-left: 0; margin-right: 10px; } .agendaTable.pm .agendaTr .leader .person { align-self: center; } .agendaTable.pm .agendaTr .team dd span { display: block; margin: 0;} .agendaTable.pm .agendaTr .detail .person span { display: inline; margin-right: 1rem; } .agendaTable.pm .agendaTr .detail .person span:before{ content: "／";} .agendaTable.pm .agendaTr .detail .person span.prof {font-size:80%; font-weight: 400; margin-left: 3px; margin-right: 0;} .agendaTable.pm .agendaTr .detail .person span.prof:before { display: none; } #trafficSection { background-color: #f2f2f2; padding-bottom: 0; } #trafficSection .trafficBox { display: flex; margin-bottom: 1rem; } #trafficSection .trafficBox .icon { flex: 0 0 60px; padding: 0 1rem; } #trafficSection .trafficBox .txt p span.station:after { content: "："; } #trafficSection .dotbgBox .bgblank { display: none;} #trafficSection .dotbgBox .bgorange { left: 42%; top:30px; } #trafficSection .dotbgBox .bgpurple { left: -100px; top:190px; } #trafficSection .dotbgBox .bggreen { top:-100px; left: 70%;} #trafficSection .dotbgBox .bgyellow { display: none; } #sponsorSection { /*text-align: center;*/ font-size: 1rem; } #sponsorSection p { width: 90%; margin: auto; } #sponsorSection img { height: 45px; width: auto; } #sponsorSection img.imgXL { height: 55px; } #sponsorSection img.imgL { height: 50px; } #sponsorSection img.imgS { height: 35px; } #sponsorSection img.imgXS { height: 25px; } #sponsorSection .logolist { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 90%; margin: auto; } #sponsorSection .logolist div { margin:.5rem 2rem 1rem 0; } /*小於1420時*/ @media screen and (max-width: 1420px){ .speakerBox .slider div.sliderBox { height: 195px; padding: 10px; padding-bottom: 30px;} .speakerBox .slider div.sliderBox img { width: 100px;} } /*小於1367時*/ @media screen and (max-width: 1367px){ .kvSection { min-height: 680px; } .kvSection img.preword { height: 18px; } .kvSection div.preword { font-size: 1.3125rem; } .kvSection .sloganBox { padding-top: 115px; } .kvSection .sloganBox h1 { font-size: 5rem; } .kvSection .sloganBox .subsloganBox .date { font-size: 2rem;} .kvSection .sloganBox .subsloganBox .subslogan { font-size: 1.5625rem; } .kvSection .sloganBox .wording { padding: .6rem 0; font-size: 1.0625rem;} .kvSection .sloganBox .wording .btn { margin-top: .6rem; } .speakerBox { height: 250px; } .speakerBox .slider div.sliderBox { height: 185px; padding: 10px; padding-bottom: 30px;} .speakerBox .slider div.sliderBox img { width: 100px;} .speakerBox .slider div.sliderBox h2 { font-size: 1.1875rem;} .speakerBox .slider div.sliderBox p { font-size: .9375rem;} .indexSection { padding: 50px 0; font-size: 1.0625rem; } .indexSection .content h2 { font-size: 2.3125rem; margin-bottom: 1.2rem; } .indexSection .content h3 { font-size: 1.5625rem; margin-bottom: 1.2rem; } .indexSection .content h4 { font-size: 1.1875rem; } #preword .wording { margin-bottom: 2rem; } .speicaltyBox div {/* flex:0 0 30%;*/ -webkit-background-size: 70px; background-size: 70px; background-position: center 7px;/* margin: .1rem;*/ padding: .2rem; padding-top: 78px; } .speicaltyBox div p { font-size: 1rem; } #ticketSection .qaBox dt {font-size: 1.3125rem;} .agendaTable .agendaTr .time {font-size: 1.3125rem; flex: 0 0 115px;} .agendaTable .agendaTr .detail { margin-left: 55px; } .agendaTable .agendaTr .detail .img { flex: 0 0 81px; margin-left: -40px; } .agendaTable .agendaTr .detail .img p { height: 81px; } .agendaTable .agendaTr .detail .img p img { width: 79px; } .agendaTable .agendaTr .detail .txt { margin-left: 15px; } .agendaTable .agendaTr .detail .person, .agendaTable .agendaTr .seprateSubject { font-size: 1.1875rem;} .agendaTable.pm .agendaTr .leader .img { flex: 0 0 81px; width: 81px; } .agendaTable.pm .agendaTr .time { font-size: 1.0625rem; } #agendaSection h3 { width: 300px; } } /*小於1040時*/ @media screen and (max-width: 1040px){ #ticketSection .detail_twin { flex-wrap: wrap; } #ticketSection .detail_twin .tableInfo { flex: 0 0 100%; margin-bottom: 1rem; } #ticketSection .bigBtnBox { flex: 0 0 100%; margin-left: 0; } #ticketSection .bigBtnBox > div { flex: 0 0 200px; height: 120px;} #ticketSection .bigBtnBox > div:before { width: 80px; height: 104px; margin-top: -52px; opacity: .3; } #ticketSection .bigBtnBox > div p { padding: 0 10px; } } /*小於940時(MOBILE)*/ @media screen and (max-width: 940px){ .kvSection { min-height: inherit; height: auto; align-content: flex-end;} /*.kvSection:after { content: ""; display: block; width: 100%; height: 55px; background-color: #FFF; }*/ .kvSection .dotbgBox { } .dotbgBox .bgblank { width: 288px; height: 287px; } .dotbgBox .bgorange { width: 84px; height: 85px; } .dotbgBox .bgpurple { width: 161px; height: 160px; } .dotbgBox .bggreen { width: 236px; height: 236px; } .dotbgBox .bgyellow { width: 103px; height: 103px; } .kvSection .dotbgBox .bgblank { left: -230px; top:-22px; } .kvSection .dotbgBox .bgorange { display: none; } .kvSection .dotbgBox .bgpurple { left: 67%; top:-22px; } .kvSection .dotbgBox .bggreen { display: none;} .kvSection .dotbgBox .bgyellow { left: 4%; bottom: 180px; } .kvSection img.preword { height: 16px; } .kvSection div.preword { font-size: 1.125rem; } .kvSection .sloganBox { width: 100%; padding-top: 70px; left: 0; top: 0; text-align: center; padding-bottom: 10px;} .kvSection .sloganBox.entro { top: 0;} .kvSection .sloganBox h1 { font-size: 2.5rem; } .kvSection .sloganBox .subsloganBox { display: block; margin-top: -6px; } .kvSection .sloganBox .subsloganBox .date { display: block; font-size: 2.2rem; margin-right:0;} .kvSection .sloganBox .subsloganBox .date:after { content: "09:30-16:30"; font-size: 1.375rem; color: #616161; margin-left: .3rem; display: inline-block; vertical-align: text-top; margin-top: 13px; } .kvSection .sloganBox .subsloganBox .subslogan { display: block; font-size: 1.2rem; margin-top: 5px; } .kvSection .sloganBox .wording { padding: .3rem 0; } .kvSection .sloganBox .wording span { margin-left: 0; display: block; } .kvSection .sloganBox .wording .btn { display: none; } .speakerBox { max-width: 100%; height: auto; /*padding-bottom: 55px;*/ padding: 0; background-color: #FFF; border-bottom: 1px solid #f4cda0; border-top: 1px solid #f4cda0; display: flex;} .speakerBox a.label { top:-90px; } .speakerBox .slider div.sliderBox { padding: 15px; width: 100%; height: 260px; height: 100%; margin: 0; /*margin-left: -1px;*/ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; border: none; } /*.speakerBox .slider .owl-item:after { content: ""; width: 1px; height: 100%; background-color: #f4cda0; position: absolute; right: -1px; top: 0; }*/ .speakerBox .slider div.sliderBox img { margin: auto; width: 120px; height: auto; -webkit-border-radius: 120px; border-radius: 120px; } .speakerBox .slider div.sliderBox h2 { font-size: 1rem; font-weight: 400;} .speakerBox .slider div.sliderBox p { font-size: 1rem; font-weight: 200;} .speakerBox .slider div.sliderBox:before { content: ""; padding: 0; width: 28px; height: 28px; background-color: transparent; -webkit-border-radius: 0; border-radius: 0; bottom: inherit; left: inherit; margin-left: 0; right: 12px; top: 12px; background-image: url(../images/icon_slider_more.png); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%;} .speakerBox .slider div.sliderBox:hover:before { background-color: transparent; } .speakerBox .slider div.sliderBox:hover { border-color: #f4cda0; } .speakerBox a.coverlink { height: 100%; } .indexSection { padding: 60px 0; font-size: 1.1875rem; font-weight: 200; } #preword { /*padding-top: 40px;*/ } #preword a.label { /*top: -55px;*/ } #preword .wording p { display: inline; margin-left: -4px; } #preword .wording p.mStart { margin-left: 0; } #preword .wording p.marginBottom:after { content: ""; display: block; height: 1rem; } .speicaltyBox { display: block; } .speicaltyBox div { -webkit-background-size: 80px; background-size: 80px; background-position: center 7px; margin: 0 0 .3rem 0; padding: .7rem; padding-top: 88px; } .speicaltyBox div p { font-size: 1.1875rem; } .btnBox.mOnly { display: flex !important; flex-wrap: wrap; margin-top: 1rem; } .btnBox p { flex: 0 0 200px; margin: 0 .4rem .5rem .4rem; } .btnBox a.btn { width: 100%; } #ticketSection .dotbgBox .bgorange { display: none; } #ticketSection .detail_twin { flex-wrap: wrap;} #ticketSection .tableInfo > div > p:first-child { display: none; } #ticketSection .tableInfo > div > p:nth-child(2) { flex:0 0 35px; height: 35px; margin-left: 14px; } #ticketSection .tableInfo > div > p:nth-child(3) { padding: 0 16px 0 16px; font-size: 1.0625rem; } #ticketSection .bigBtnBox { flex: 0 0 100%; margin-left: 0; /*margin-top: 1rem;*/ justify-content: space-around;} #ticketSection .bigBtnBox > div { margin: 0 0 1rem 0; flex: 0 0 250px; height: 120px; } #ticketSection .bigBtnBox > div p { padding-left: 15px; font-size: 1rem; } #ticketSection .bigBtnBox > div p:first-child { /*padding-top: 15px;*/ font-size: 1.5rem; font-weight: 500; } #ticketSection .bigBtnBox > div p.btnword span { } #ticketSection .tableInfo > div a,#ticketSection .olList a,#ticketSection .qaBox dd a { color: #151515; border-bottom: 1px dotted #888; } #ticketSection .tableInfo > div a.link:before { display: none;} #ticketSection .tableInfo .title { font-weight: 600; font-size: 110%; } #ticketSection .olList { font-size: 1.0625rem; } #ticketSection .olList ol { margin-left: 1.3rem; } #ticketSection .qaBox dt { font-size: 1.3125rem; } #ticketSection .qaBox dd { font-size: 1.0625rem; margin-left: 1.3rem; } .agendaTable { border: 1px solid #b98ac9; } .agendaTable .agendaTr { display: block; background-color: rgba(255,255,255,.75) !important; } .agendaTable .agendaTr .time { text-align: center; background-color: #b98ac9; color: #FFF; } .agendaTable .agendaTr .detail { margin-left: 0; border:none; padding: 0; } .agendaTable .agendaTr .detail .person { font-size: 1.3125rem; } .agendaTable .agendaTr .detail .subject { font-weight: 500; padding: .5rem 1rem;} .agendaTable .agendaTr .detail.clear:before { display: none; } .agendaTable .agendaTr .detail .txt { margin-left: 0; } .agendaTable .agendaTr .detail.clear .txt { margin-left: 0; } .agendaTable .agendaTr .detail .img { display: none; } .agendaTable .agendaTr .detail .mblock { display: flex; flex-wrap: wrap; margin-top: .2rem;} .agendaTable .agendaTr .pmDetail .detail .mblock { margin-top: .4rem; } .agendaTable .agendaTr .detail .mblock .subject { order: 4; flex: 0 0 100%; position: relative; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; line-height: 1.4; border-top: 1px dotted #d3bfda; /*border-bottom: 1px solid #d3bfda;*/} .agendaTable .agendaTr .detail .mblock .mutiBox { display: flex; align-items: center; line-height: 1.3; margin-bottom: .3rem; padding: .5rem 1rem 0 1rem; } .agendaTable .agendaTr .detail .mblock .mutiBox:last-child { padding-bottom: .5rem; } .agendaTable .agendaTr .detail .mblock .mimg { display: block; flex: 0 0 70px; line-height: 0; margin-right: .5rem; } .agendaTable .agendaTr .detail .mblock .mimg img { border-radius: 70px; } .agendaTable .agendaTr .detail .mblock .mimg a:before { display: none; } .agendaTable .agendaTr .detail .wording { font-weight: 300; padding: 0 1rem .5rem 1rem;} .agendaTable .agendaTr .detail .team { justify-content: space-around; margin-bottom: .5rem; } .agendaTable .agendaTr .detail .team dl { flex: 0 0 80px; margin: .2rem; margin-top: .8rem; } .agendaTable .agendaTr .detail .team dl dt { width: 50px; } .agendaTable .agendaTr .preHide .mblock .subject { padding-right: 45px;} .agendaTable .agendaTr .preHide .wording { display: none; /*border-top:1px dotted #b98ac9;*/ } .agendaTable .agendaTr .preHide .showHideBtn:before,.agendaTable .agendaTr .preHide .showHideBtn:after { content: ""; width: 12px; height: 2px; background-color:#b98ac9; transform: rotate(45deg); position: absolute; right: 12px; top: 14px; } .agendaTable .agendaTr .preHide .showHideBtn:after { transform: rotate(-45deg); right: 4px; } .agendaTable .agendaTr .preHide .showHideBtn { width: 28px; height: 28px; -webkit-border-radius: 2px; border-radius: 2px;/* background-color: #d3bfda;*/ position: absolute; right: .5rem; top: 50%; margin-top: -14px;} .agendaTable .agendaTr .preHide .subject.click .showHideBtn:before { transform: rotate(-45deg); top: 13px; } .agendaTable .agendaTr .preHide .subject.click .showHideBtn:after { transform: rotate(45deg); top: 13px; } #agendaSection h3 { border:none; background-color: transparent; width: auto; padding: 0; } #agendaSection h3:before,#agendaSection h3:after {display: none;} #agendaSection h3 span { font-size: 1rem; margin-left: .5rem; display: inline-block; vertical-align: text-top; margin-top: 10px;} .agendaTable.pm { display: block; } #agendaSection .infoBox { font-size: 1.0625rem; } .agendaTable.pm .agendaTr .time {background-color: #b98ac9 !important;} .agendaTable.pm .agendaTr .detail .wording { padding: 0; } .agendaTable.pm .agendaTr .detail .img { display: block; width: 70px; flex: 0 0 70px; padding-right: .5rem; } .agendaTable.pm .agendaTr .detail .img a:before { display: none; } .agendaTable.pm .agendaTr .detail .img p img { border:none; } #trafficSection .trafficBox .icon { flex: 0 0 40px; padding: 0 .5rem; } #trafficSection .trafficBox .txt p { line-height: 1.5; margin-bottom: .5rem; } #trafficSection .trafficBox .txt p .station { font-weight: 500; } #trafficSection .dotbgBox .bggreen { display: none;} #sponsorSection { text-align: center; } #sponsorSection .logolist { justify-content: center; } #sponsorSection .logolist div { margin-right: .5rem; margin-left: .5rem; } } /*小於550時(MOBILE)*/ @media screen and (max-width: 550px){ #preword { /*padding-top: 0px;*/ } #preword a.label { /*top: -95px;*/ } #ticketSection .bigBtnBox > div { margin: 0 0 1rem 0; flex: 0 0 100%; /*max-width: 300px;*/ height: 120px; } #ticketSection .bigBtnBox > div:nth-child(4) { margin-bottom: 0; } #trafficSection .trafficBox { display: block; } #trafficSection .trafficBox .icon { width: 70px; margin: auto; } #trafficSection .trafficBox .txt p { text-align: center;} #trafficSection .trafficBox .txt p .station { display: block; } #trafficSection .trafficBox .txt p .station:after { display: none; } }