/* LESS Document */ /*--網頁預設顏色--*/ @color1: #e65231; @color2: #e65231; @color3: #00aa73; @color4: #FFF; @color5: #231815; @white: #ffffff; @graybk: #ECECEC; @txtColor: #333333; /*--基本設定--*/ *, body, h1, h2, h3, h4, h5, h6, a, p, select { font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Arial, Helvetica; } /*文字反選顏色*/ ::selection, ::-moz-selection { background: @color1; color: #ffffff; } /*a:focus { background-color: #F7AD00 !important; }*/ a { transition: .5s; } /*a:hover { filter:brightness(110%); transition: .5s; }*/ /*a:focus img { -webkit-filter:saturate(0.2); }*/ /*--行動版隱藏--*/ .mob { display: none !important; } html { height: 100%; margin: 0; } body { margin: 0; min-height: 100%; } /*清除格式*/ .CleanFormat { clear: both; } #article, section, header, .pageContent { &::after { content: ""; display: block; clear: both; } } /*分隔線*/ .Dividers { margin: 25px auto; width: 100%; height: 1px; /*border-bottom: 1px dotted #373b80;*/ } /*------------------------WebStart----------------------*/ #warp { display: block; position: relative; /*初台*/ background: #e7ab22; /*background: -moz-linear-gradient(top, #361c37 0%, #2f2280 50%, #361c37 100%);*/ background: -webkit-linear-gradient(top, #e7ab22 20%, #fff 80%); background: linear-gradient(to bottom, #e7ab22 20%, #fff 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7ab22', endColorstr='#fff', GradientType=0); &.TP { /* 台北 */ /*background: #d6f4ff; background: -moz-linear-gradient(top, #69dafa 0%, #d6f4ff 40%, #ffffff 70%, #ffffff 100%); background: -webkit-linear-gradient(top, #69dafa 0%, #d6f4ff 40%, #ffffff 70%, #ffffff 100%); background: linear-gradient(to bottom, #69dafa 0%, #d6f4ff 40%, #ffffff 70%, #ffffff 100%);*/ } &.TY { /* 桃園 */ background: #dd9169; /*background: -moz-linear-gradient(top, #e65131 0%, #ed6a34 100%);*/ background: -webkit-linear-gradient(top, #dd9169 20%,#fff 80%); background: linear-gradient(to bottom, #dd9169 20%,#fff 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd9169', endColorstr='#fff',GradientType=0 ); } } /*-------------------------Header 頁首 //放選單按鈕的地方-----------------------*/ header { display: block; position: fixed; z-index: 50; top: 0; left: 0; width: 100%; #header { position: relative; background: rgb(255 228 167 / 80%);/*初始*/ padding: 10px; &.TP { /* 台北 */ /*background: rgba(28, 31, 67, .5);*/ } .Logo { display: block; position: relative; height: 80px; a { display: inline-block; height: 100%; } img { display: block; width: auto; height: 100%; } } } } /*---------------------------Menu-----------------------*/ nav.Menu { display: block; position: absolute; top: 10px; right: 0; height: 80px; background: url(../images/menuIcon.png) no-repeat right center; padding-right: 60px; > ul { display: inline-block; vertical-align: middle; font-size: 0; > li { display: inline-block; position: relative; margin-left: 20px; &:first-child { margin-left: 0; } > a { display: block; color: @color5; font-size: 1.4rem; font-weight: normal; } &.active > a, &.SubOpen > a { color: @color1; font-weight: bold; } } } &::after { content: ""; display: inline-block; vertical-align: middle; width: 0px; height: 100%; } } ul.SubMenu { position: absolute; width: 160px; left: calc(50% - 80px); top: calc(100% + 10px); display: none; z-index: 1; li { display: block; margin-bottom: 5px; a { display: block; font-size: 1.2rem; font-weight: bold; color: @white; background: @color2; text-align: center; border-radius: 30px; padding: 5px 0; } &:nth-child(1) a { /*background: @color1;*/ } &:nth-child(3) a { /*background: #ff6546;*/ } } } .SubOpen ul.SubMenu { z-index: 2; } /*-------手機版選單---------*/ .MobileMenu { display: none; position: absolute; top: 15px; right: 10px; z-index: 51; a { display: block; width: 40px; height: 40px; transition: .5s; span { display: block; background: @color1; height: 3px; border-radius: 3px; position: absolute; right: 0; transition: .5s; &:first-child { width: 33%; margin-bottom: 8px; top: 0; } &:nth-child(2) { width: 66%; margin-bottom: 8px; top: 10px; } &:nth-child(3) { top: 20px; width: 100%; } } p { position: absolute; bottom: 0; font-size: 0.7rem; letter-spacing: 1.2px; font-weight: bold; line-height: 0.7rem; color: @color1; transition: .5s; width: 100%; text-align: center; } } } .MobileMenu.active { a { span {background: #fff;} span:first-child { width: 100%; top: 30%; transform: rotate(45deg); } span:nth-child(2) { opacity: 0; right: 22%; } span:nth-child(3) { top: 30%; transform: rotate(-45deg); } p { letter-spacing: 0.9px; color: #fff; } } } /*-------------------------BODY 區塊-------------------------*/ article { position: relative; padding: 130px 0 50px; min-height: calc(100vh - 262px); } section { position: relative; width: 95%; max-width: 1002px; margin: 0 auto; } /*-------------------------FOOTER 頁尾-----------------------*/ footer { display: block; position: relative; padding-bottom: 50px; &.TY { background: rgba(255, 255, 255, 0.8); } #footer { display: block; margin: 0 auto; width: 95%; max-width: 1200px; border-top: 1px solid @color1; padding-top: 20px; font-size: 0; text-align: center; .footLogo { /* display: inline-block; vertical-align: middle; font-size: 0; margin-right: 50px; &:last-child {margin-right: 0;} */ display: block; margin-right: 0; margin-bottom: 20px; &:last-child {margin-bottom: 0;} > div { display: inline-block; vertical-align: middle; &:first-child {color: @color5;font-size: 1.2rem;} &:last-child ul { display: block; font-size: 0; li { display: inline-block; margin-right: 10px; img {display: block;height: 50px;width: auto;} &:last-child {margin-right: 0;} } } } } } } #privacyBar { padding: 15px 0; text-align: center; background: @color1; color: @white; position: relative; } .privacyLink { margin-bottom: 10px; ul { font-size: 0; li { display: inline-block; vertical-align: middle; border-right: 1px solid @white; padding-right: 5px; margin-right: 5px; &:last-child {border-right: none;padding-right: 0;margin-right: 0;} a { color: @white; text-decoration: underline; } } } } /*--------------------------共用項目-------------------------------*/ /*-----頁面名稱-----*/ .PageName { text-align: right; width: 280px; padding-right: 31px; background: @color1; color: @color4; font-size: 1.5rem; font-weight: bold; border-top-right-radius: 30px; border-bottom-right-radius: 30px; } /*-----頁面底圖-----*/ .PageBg { display: block; position: fixed; right: 0; bottom: -7%; width: 25%; height: auto; img {display: block;width: 100%;height: auto;} } /*-----彈跳視窗-----*/ .Pup { display: none; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; text-align: center; background: rgba(0, 0, 0, .5); z-index: 60; overflow: auto; &::after {content: "";display: inline-block;vertical-align: middle;height: 100%;} .PupBk {display: inline-block;vertical-align: middle;width: 95%;max-width: 900px;background: #fff;} .PupContent {padding: 20px;} .PupCloseBtn { display: block; a {display: block;width: 100%;padding: 5px 0;background: #E6E6E6;color: #333333;font-size: 1.5rem;} } } /*-----回頁首-----*/ .GoTop { display: block; width: 30%; max-width: 85px; margin: 0 auto 50px; a { display: block; width: 100%; img {display: block;width: 100%;height: auto;} div {text-align: center;color: @color1;font-size: 1.2rem;margin-top: -15%;} } } /*--------------------------內容開始-------------------------------*/ /*----------首頁----------*/ .IndexKV { display: block; position: relative; min-height: 100vh; &::after { content: ""; min-height: 100vh; display: inline-block; vertical-align: middle; } } .IndexKvImg { display: block; position: absolute; top: 0; left: 30%; width: 50%; opacity: 0; transition: 2s; height: auto; max-height: 100vh; overflow: hidden; img { display: block; width: 100%; height: auto; } &.active { opacity: 1; left: 50%; } } .IndexKvBk { position: relative; display: inline-block; vertical-align: middle; left: 2%; text-align: center; width: 54%; padding-top: 100px; img { display: block; width: 100%; height: auto; } .IndexKvLogo { width: 100%; margin-bottom: 20px; transform: scale(1.05); opacity: 0; transition: 1s; } .IndexKvSlogan { display: block; margin: 0 0 50px 34%;; width: 65.242%; margin-top: 20px; opacity: 0; } } .IndexKvTxt { margin-top: 20px; opacity: 0; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #000; p { font-size: 2rem; color: @color5; } .line1 { font-size: 2.5rem; font-weight: bold; color: @color1; } } .IndexKvLogo.active { opacity: 1; transform: scale(1); } .IndexKvSlogan, .IndexKvTxt { transition: 1s; &.active { margin-top: 0; opacity: 1; } } .IndexKvEvent, .ScrollAni { opacity: 0; transition: 1s; &.active { opacity: 1; } } .IndexKvEvent ul { display: block; font-size: 0; li { display: inline-block; vertical-align: middle; margin-right: 5%; margin-bottom: 10px; &:last-child {margin-right: 0;} a { font-weight: bold; color: @color5; padding: 5px 20px; border-radius: 50px; border: 2px solid @color5; display: block; .IndexKvEventDate { font-size: 2.5rem; span { transition: .5s; display: inline-block; width: 30px; height: 30px; line-height: 30px; font-size: 1.4rem; background: @color5; color: @color4; border-radius: 30px; margin: 10px; font-weight: inherit; } div { font-size: 1.4rem; } } } a:hover.NTbtn { color: @white; border-color: @color1; background: @color1; .IndexKvEventDate span { background: @white; color: @color5; } } &.Notyet a { border-color: gray; color: gray; background: #c1c1c1; cursor: not-allowed; .IndexKvEventDate { font-size: 2rem; } &:hover { border-color: gray; color: gray; background: #c1c1c1; } } } } .IndexKvEventPlace {font-size: 2.5rem;} .ScrollAni { display: block; margin: -35px auto 100px; width: 80px; position: relative; z-index: 0; > div { display: block; position: relative; animation-duration: 3s; animation-iteration-count:infinite; &:nth-child(1) { z-index: 2; animation-name: scrollA; } &:nth-child(2) { margin-bottom: -25px; margin-top: -10px; z-index: 1; animation-name: scrollB; } &:nth-child(3) { margin-bottom: -25px; margin-top: -10px; z-index: 0; animation-name: scrollC; } img {display: block;width: 100%;height: auto;} } } @keyframes scrollA { 0% {opacity: 0;} 10% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } @keyframes scrollB { 0% {opacity: 0;} 40% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } @keyframes scrollC { 0% {opacity: 0;} 60% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } .GiftBk { display: block; width: 95%; max-width: 1000px; margin: 0 auto 50px; text-align: center; .GiftTitle { font-size: 3rem; font-weight: bold; margin-bottom: 20px; &.colorG {color: #02a972;} &.colorY { color: #00aa73; text-shadow: 0 0 5px #fff; } } .GiftItem ul { display: block; li { display: block; margin-bottom: 20px; font-size: 0; opacity: 0; transition: .5s; > div { display: inline-block; vertical-align: middle; &:nth-child(2) { overflow: hidden; max-width: 0; transition: max-width 1s; &.active {max-width: 516px;} } img { width: auto; height: auto; &.GiftW {display: block;} &.GiftM {display: none;} } } } } } #Gift1 > div:nth-child(2).active {max-width: 473px;} #Gift2 > div:nth-child(2).active {max-width: 516px;} .GiftBk .GiftItem ul li.active { opacity: 1; } .Note { display: block; width: 95%; max-width: 700px; margin: 0 auto 50px; .NoteTitle { font-size: 2.5rem; font-weight: bold; color: #e65231; } .NoteList ul { padding-left: 1.5rem; li { font-size: 1.2rem; color: @color5; list-style: disc; margin-bottom: 10px; &::marker {color: @color1;margin-right: 5px;font-size: 1.2rem;} } } } .indexNote { /*padding-bottom: 10rem;*/ } /*----------議程&講者 顏色設定----------*/ #NTAgenda, #NTSpeaker { .EventPlace { color: @color1; border: 2px solid @color1; } .EventDate li a:hover { color: @color1; span { background: @color1; } } h2 { color: #0073be; img { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; } } .AgTable { ul li { &.AgTableHead { background: @color1; } .AgTag { background: @color1; } } } .speakerDate { color: @color5; span { background: @color5; color: @white; }.speakerList } .speakerList { ul li > div { &:nth-child(1) { img {box-shadow: 10px 10px 0 @color1;} } &:nth-child(2) {color: @color1;} } } } #TPAgenda, #TPSpeaker { .EventPlace { color: @color2; border: 2px solid @color2; } .EventDate li a:hover { color: @color2; span { background: @color2; } } h2, h3 {color: @color2;} .AgTable { ul li { &.AgTableHead { background: @color2; } .AgTag { background: @color2; } } } .speakerDate { color: @color2; span { background: @color2; }.speakerList } .speakerList { ul li > div { &:nth-child(1) { img {box-shadow: 10px 10px 0 @color2;} } &:nth-child(2) {color: @color2;} } } } .TP_Ag_Title, .TP_EDM_Txt { text-align: center; margin-bottom: 10px; color: #e65232; font-size: 1.3rem; font-weight: bold; &::before, &::after { display: inline-block; vertical-align: middle; content: ""; height: 1px; background: #e65232; width: calc(50% - 100px); } &::before { margin-right: 10px; } &::after { margin-left: 10px; } } .TP_EDM_Txt { margin-top: 50px; } .TP_EDM img { display: block; width: 100%; height: auto; } #header.TY { background: #ee8253cc; } /*.TY .AgLink ul li a.singupLink { background: @color1; color: @txtColor; }*/ #TYAgenda, #TYSpeaker { .EventPlace { color: @color1; border: 2px solid @color1; } .EventDate li a { color: @white; span { background: @white; color: @color3; } } h2 {color: #fdff25;} .AgTable { ul li { &.AgTableHead { background: @color1; } .AgTag { background: #ffbd08; } } } .speakerDate { color: @white; span { background: @white; color: @color3; }.speakerList } .speakerList { ul li > div { &:nth-child(1) { img {box-shadow: 10px 10px 0 @white;} } &:nth-child(2) {color: @color1;} } } } .TY .SignUpTitle { color: #fcca22; &::before, &::after { background: #fccb22; } } /*#Event1_ag, #Event1_sp {padding-bottom: 100px; border-bottom: 1px dashed @color1;} .AgBox {padding-top: 30px;}*/ /*----------論壇議程----------*/ .EventPlace { font-size: 2rem; font-weight: bold; padding: 5px 20px; display: table; margin: 0 auto 30px; } .EventDate { text-align: center; padding-bottom: 10px; border-bottom: 1px solid #fff; ul { font-size: 0; li { display: inline-block; margin-right: 5%; &:last-child {margin-right: 0;} a { color: #fff; font-weight: bold; font-size: 1.4rem; span { display: inline-block; vertical-align: text-bottom; width: 20px; height: 20px; line-height: 20px; border-radius: 30px; color: @color4; margin: 0 5px; background: #fff; transition: .5s; } } } } } .AgInfo{ h2 { font-size: 2.5rem; text-align: center; margin-bottom: 20px; } h3 { font-size: 1.5rem; text-align: center; margin-top: -20px; margin-bottom: 20px; } } .EventInfo { display: block; width: 100%; max-width: 520px; text-align: center; margin: 0 auto 50px; li { display: inline-block; margin-bottom: 5px; margin-right: 30px; font-size: 0; &:last-child { margin-right: 0; } > div { display: inline-block; color: @color5; font-size: 1.5rem; vertical-align: top; &:first-child { font-weight: bold; } } .Week { display: inline-block; width: 20px; height: 20px; text-align: center; background: rgba(255, 255, 255, .6); border-radius: 20px; margin-left: 5px; color: @color5; line-height: 20px; font-size: 1rem; } .EventInfoNote { color: @color5; background: rgba(255, 255, 255, .6); border-radius: 10px; padding: 0 5px; margin-left: 5px; a { font-size: 1.1rem; text-decoration: underline; color: #53a7dd; font-weight: bold; &:hover { color: #333333; } } } } } .EventYt { text-align: center; font-size: 1.4rem; color: #fff; margin-bottom: 20px; a { text-decoration: underline; font-weight: bold; display: inline; margin: 0 5px; font-size: inherit; color: #fff; width: 100px; img { display: inline-block; margin-left: 5px; width: auto; height: 25px; vertical-align: text-bottom; } } } .AgLink { margin-bottom: 20px; text-align: center; ul { display: block; font-size: 0; li { display: inline-block; width: 40%; max-width: 300px; margin-right: 5%; &:last-child {margin-right: 0;} a { display: block; font-size: 1.5rem; color: #fff; font-weight: bold; padding: 10px; border-radius: 50px; &.speakerLink {border: 1px solid #fff;} &.singupLink { background: @color3; &.singupEnd { background: #555; cursor: not-allowed; } } } } } } .AgTable { display: block; > ul > li { display: block; padding: 10px; font-size: 0; &:nth-child(odd) {background: #ECECEC;} &:nth-child(even) {background: #fff;} &.AgTableHead div { color: @color4 !important; font-size: 1.2rem; font-weight: bold; div {font-size: 1.3rem;font-weight: bold;} } > div { display: inline-block; vertical-align: middle; &:nth-child(1) { text-align: center; width: 20%; font-size: 1.2rem; font-weight: bold; color: @color5; } &:nth-child(2) { text-align: center; width: 15%; font-weight: bold; font-size: 1.2rem; color: @color5; } &:nth-child(3) {width: 65%;} } .AgTag { display: inline-block; padding: 5px; color: @white; font-size: 1.2rem; border-radius: 5px; margin-bottom: 10px; } .AgTitle { font-size: 1.4rem; font-weight: bold; color: @color1; } .AgSpeaker { font-size: 1.2rem; color: @color5; span, div, ul, li {font-size: inherit;} .agendaSpeakerListTitle {font-weight: bold;} span { display: inline-block; margin-right: 7.5px; vertical-align: middle; &:last-child {margin-right: 0;} } } } } .agendaSpeakerList { list-style: disc; padding-left: 1.5rem; } /*----------講者介紹----------*/ .speakerDate { margin-bottom: 20px; text-align: center; font-size: 1.4rem; font-weight: bold; span { display: inline-block; width: 20px; height: 20px; text-align: center; background: @color1; border-radius: 20px; margin: 0 5px; color: @color5; line-height: 20px; font-size: 1rem; } } .speakerList { display: block; ul { font-size: 0; li { display: inline-block; vertical-align: top; margin-bottom: 100px; text-align: center; width: 48%; margin-right: 4%; &:nth-child(even) {margin-right: 0;} > div { margin: 0 auto; &:nth-child(1) { display: block; width: 100%; margin-bottom: 10px; img {display: block;width: 100%;height: auto;max-width: 350px;margin: 0 auto;} } &:nth-child(2) {font-size: 2rem;font-weight: bold;} &:nth-child(3) { color: @color5; font-size: 0; margin-bottom: 10px; span {font-size: 1.5rem;display: inline-block;} } &:nth-child(4) a { display: block; width: calc(100% - 2px); border: none; background: #00aa73; color: @color4; font-size: 1.5rem; margin: 0 auto; max-width: 348px; border-radius: 50px; font-weight: bold; &:hover {background: @color1;} } } } } } #speakerDataList li { display: none; > div { &:nth-child(1) img {display: block;margin: 0 auto;width: 100%;max-width: 350px;height: auto;} &:nth-child(2) {font-size: 2rem; font-weight: bold; color: @color1;} &:nth-child(3) span {display: inline-block;color: #777;font-size: 1.8rem;margin-bottom: 10px;} &:nth-child(4) { font-size: 1.2rem; color: #333; text-align: justify; line-height: 2.2rem; p {font-size: inherit;} } } } /*-----延伸閱讀-----*/ #articleList ul { font-size: 0; li { display: inline-block; vertical-align: top; width: 48%; margin: 0 4% 50px 0; &:nth-child(even) {margin-right: 0;} a { display: block; > div { &:nth-child(1) { display: block; padding: 0 10px 10px 0; background: url(../images/paperImgBg.png) no-repeat bottom right; background-size: calc(100% - 10px) !important; img {display: block;width: 100%;height: auto;} } &:nth-child(2) { width: calc(100% - 10px); padding-right: 10px; font-size: 1.3rem; color: @color5; text-align: justify; padding-top: 5px; } } } } } /*-----立即報名-----*/ .SignUpBk { padding: 0 0 50px 0; text-align: center; } #SingUpPage > li > div:nth-child(2) {font-size: 1.6rem;color: @color5;font-weight: bold;} #SingUpPage > li > div:nth-child(3) {font-size: 1.4rem;color: @color5;} .SignUpTitle { color: @color3; font-size: 2.5rem; font-weight: bold; text-align: center; margin-bottom: 20px; &::before, &::after { content: ""; display: inline-block; width: calc(50% - 90px); height: 3px; background: @color3; vertical-align: middle; } &::before {margin-right: 10px;} &::after {margin-left: 10px;} } ul.SignUpList > li { display: block; margin-bottom: 50px; &:last-child {margin-bottom: 0;} } .SignUpPlace {display: table;margin: 0 auto 50px;font-size: 2rem;font-weight: bold;padding: 5px 20px;} ul.SignUpList > li:nth-child(1) .SignUpPlace, .SignUpPlace.NTColor {color: @color1;border: 2px solid @color1;} ul.SignUpList > li:nth-child(2) .SignUpPlace, .SignUpPlace.TPColor {color: @color2;border: 2px solid @color2;} ul.SignUpList > li:nth-child(3) .SignUpPlace, .SignUpPlace.TYColor {color: @color3;border: 2px solid @color3;} ul.SignUpLinkBk { display: block; font-size: 0; text-align: center; > li { display: inline-block; margin-right: 10%; width: 40%; font-size: 0; box-shadow: 0 0 10px rgba(0, 0, 0, .5); &:last-child {margin-right: 0;} > div { display: inline-block; vertical-align: middle; position: relative; &:first-child { z-index: 1; background: #fff; padding: 10px; width: calc(100% - 150px); box-shadow: 5px 0 5px rgba(0, 0, 0, 0.5); div:first-child {font-size: 1.2rem;font-weight: bold;color: @color5;line-height: 25px;} div:last-child {font-size: 2rem;line-height: 35px;font-weight: bold;color: @color1;} } &:last-child { width: 130px; a { display: block; width: 100%; height: 80px; line-height: 80px; font-size: 1.5rem; font-weight: bold; color: #fff; background: @color3; &:hover { background: @color1; } } } } } } .SignEnd { background: #555 !important; cursor: no-drop; } #SingUpDataList > li { display: none; } #SingUpDataList > li > div:nth-child(2) {font-size: 1.6rem;color: #707070;font-weight: bold;} #SingUpDataList > li > div:nth-child(3) {font-size: 1.4rem;color: #707070;} .SignUpDataType { display: block; padding: 20px 0; font-size: 0; > div { display: inline-block; vertical-align: top; padding: 0 20px; width: calc(45% - 40px); &:nth-child(2) {border-left: 1px solid #707070;} } } .SignUpDataTitle {font-size: 1.4rem;font-weight: bold; padding-bottom: 10px;} .SignUpDataTitle.TP {font-size: 1.6rem;font-weight: bold; padding-bottom: 0; border: 1px solid #e25130; color: @color1;} .SignUpDataCode { min-height: 30px; padding: 0 0 10px; font-size: 1.2rem; span {font-size: inherit;color: @color3;} } .SignUpDataLink { display: block; margin-bottom: 10px; a {display: block;width: 100%;max-width: 200px;margin: 0 auto;padding: 10px 0;font-size: 2rem;color: #fff;background: @color3;box-shadow: 0 0 10px #000;} } .SignUpDataNote { display: block; width: 100%; max-width: 200px; margin: 0 auto; text-align: justify; p {font-size: 1.2rem;} a {font-size: inherit;color: @color2;font-weight: bold;text-decoration: underline;} } /*-----活動結束+2024預約-----*/ .nextIndexTxt { margin-bottom: 10px; p { font-size: 2rem; color: #231815; } } .nextSignLink a { display: block; width: 50%; border-radius: 50px; margin: 0 auto; background: #e65231; color: #fff; font-size: 2.5rem; } .speakerYoutube { background: #dc0000; } /*----------廣告彈跳視窗----------*/ #PupAd { display: block; position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, .8); text-align: center; } #PupAd::before { content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 100%; } .PupAdBk { display: inline-block; vertical-align: middle; position: relative; width: auto; max-width: 55%; } .PupAdBk > a { display: block; width: 100%; } .Ad_W { display: block; } .Ad_M { display: none; } .PupAdBk img { border-radius: 15px; width: 100%; height: auto; } .ClosePup { display: block; position: absolute; top: -20px; right: -20px; } .ClosePup a { display: block; width: 40px; height: 40px; background: #09ecfe; border-radius: 30px; } .ClosePup span { display: block; position: absolute; background: #000; width: 90%; height: 1px; left: 5%; top: 49.5%; } .ClosePup span:first-child { transform: rotate(45deg); } .ClosePup span:last-child { transform: rotate(-45deg); } /*---------------------------自適應內容----------------------------*/ /*--高--*/ @media only screen and (max-height: 820px) { } @media only screen and (max-height: 650px) { .ScrollAni { margin: 0px auto 80px; } } /*--寬--*/ @media only screen and (max-width: 1650px) { } @media only screen and (max-width: 1400px) { * {font-size: 12px;} header #header .Logo {height: 60px;} nav.Menu { height: 60px; > ul > li > a {font-size: 1.2rem;} } ul.SubMenu { /*width: 100px; left: calc(50% - 50px);*/ li a {padding: 2px;} } .PageName {padding-right: 20px;font-size: 1.2rem;width: 213px;} .IndexKvBk .IndexKvSlogan, .IndexKvTxt { margin-bottom: 10px; } .IndexKvEventDate, .IndexKvEventPlace {font-size: 2rem;} .IndexKvEventDate span {width: 20px;height: 20px;vertical-align: text-bottom;line-height: 20px;font-size: 1.2rem;} .IndexKvEventDate div { font-size: 1.2rem; } .Note { max-width: 570px; } section { max-width: 800px; } .GiftBk .GiftItem ul li > div img { height: 70px; } ul.SignUpLinkBk > li { margin-right: 4%; width: 48%; } ul.SignUpLinkBk > li > div:first-child { div:first-child {font-size: 1rem;} div:last-child {font-size: 1.7rem;} } } @media only screen and (max-width: 1200px) { .IndexKvImg { width: 50%; top: 80px; &.active { right: 58%; } } .IndexKvBk { width: 55%; padding-top: 80px; } } @media only screen and (max-width: 1120px){ /*footer #footer .footLogo { display: block; margin-right: 0; margin-bottom: 20px; &:last-child {margin-bottom: 0;} }*/ } @media only screen and (max-width: 1050px) { } @media only screen and (max-width: 980px) { } @media only screen and (max-width: 900px) { .IndexKvEvent ul li { display: block; margin-right: 0; margin-bottom: 10px; } .IndexKvTxt p {font-size: 1rem;} .IndexKvEventDate, .IndexKvEventPlace {font-size: 1.5rem;} .IndexKvEventDate span {width: 15px;height: 15px;font-size: 1rem;line-height: 15px;vertical-align: middle;margin-left: 5px;} .ScrollAni { width: 50px; margin: -30px auto 50px; > div { &:nth-child(2) {margin-bottom: -20px;} &:nth-child(3) {margin-bottom: 0; margin-top: 0px;} } } .GiftBk .GiftItem ul li > div img {height: 60px;} #articleList ul li a > div:nth-child(2) {background: rgba(255, 255, 255, .8);padding: 10px;width: auto;color: #000;} footer { background: rgba(255, 255, 255, .8); /*新北*/ &.TP{ /*background: rgba(141, 146, 177, .8);*/ } &.TY{ background: rgba(151, 51, 13, .8); } border-top: 1px solid @color1; #footer {border-top: none;} } .PageBg { width: 44%; bottom: -5%; } } @media only screen and (max-width: 860px){ } @media only screen and (max-width: 720px){ .SignUpDataType > div {padding: 20px 20px;width: calc(50% - 40.5px);} } @media only screen and (max-width: 670px){ .IndexKvImg { position: relative; top: 0; right: auto; left: 0%; width: 80%; margin: 0 0 -60vw; opacity: 1; &.active { right: 0; opacity: .2; left: 20%; } } .IndexKvBk {width: 95%; max-width: 500px; margin: 0 auto; display: block; padding: 0; left: auto; } .IndexKvBk .IndexKvSlogan {width: 90%; margin: 0 auto 20px;} .IndexKV { min-height: auto; margin-bottom: 30px; &::after {display: none;} } .IndexKvEvent ul li a { .IndexKvEventDate, .IndexKvEventPlace {font-size: 2rem;} .IndexKvEventDate span {width: 20px; height: 20px; margin: 0 5px; line-height: 20px; font-size: 1.2rem; } } .IndexKvTxt{ p {font-size: 1.2rem;} .line1 { font-size: 2rem; } } .ScrollAni {margin: 0 auto 35px;} .Note .NoteTitle { text-align: center; margin-bottom: 10px; } .PageBg {display: none;} .nextIndexTxt { margin-bottom: 1.2rem; p { font-size: 1.5rem; } } .nextSignLink a { width: 80%; font-size: 1.8rem; } } @media only screen and (max-width: 650px) { ul.SignUpLinkBk > li > div { display: block; &:first-child { width: calc(100% - 20px); box-shadow: 0 5px 5px rgba(0, 0, 0, .5); div:last-child {line-height: initial;} div:first-child {line-height: initial;} } &:last-child { width: 100%; a {height: auto;line-height: initial;padding: 10px 0;} } } /*----------廣告彈跳視窗----------*/ .PupAdBk { max-width: 80%; } .Ad_W { display: none; } .Ad_M { display: block; } .ClosePup { top: -15px; right: -15px; } .ClosePup a { width: 30px; height: 30px; } } @media only screen and (max-width: 600px) { header #header .Logo {height: 50px;} .MobileMenu {display: block;} nav.Menu { background: @color1; width: 100%; height: 100vh; top: 0; left: 100%; z-index: 50; transition: .5s; > ul { display: block; padding-top: 100px; text-align: center; width: 90%; margin: 0 auto; > li { display: block; width: 100%; margin-left: 0; margin-bottom: 20px; border-bottom: 1px dotted #fff; padding-bottom: 20px; a {font-size: 1.5rem;color: @color4;} &.active > a, &.SubOpen > a {color: #ffba00;padding: 5px 0;} } } &.active { left: 0; } } ul.SubMenu { position: relative; width: 100%; left: auto; li a {background: #fff;font-size: 1.4rem;} li:nth-child(1) a {background: #fff;color: @color1;} li:nth-child(2) a {background: #fff;color: @color2;} li:nth-child(3) a {background: #fff;color: @color3;} } .PageName {padding: 0;width: 100%;text-align: center;border-radius: 0;} } @media only screen and (max-width: 520px) { .SignUpDataType > div {display: block;width: 100%;padding: 0;} .SignUpDataCode {min-height: auto;} .SignUpDataType > div:nth-child(2) {border-left: none;border-top: 1px dotted #707070;padding-top: 20px;margin-top: 20px;} } @media only screen and (max-width: 500px) { #articleList ul li { width: 100%; margin: 0 auto 50px 0; &:last-child {margin-bottom: 0;} } } @media only screen and (max-width: 460px) { .AgTable > ul > li > div { display: block; &:nth-child(1) {width: 100%;} &:nth-child(2) {width: 100%;} &:nth-child(3) {text-align: center;width: 100%;} } .agendaSpeakerList {list-style: none;} .speakerList ul li { margin-bottom: 50px; width: 96%; display: block; margin-right: 0; } } @media only screen and (max-width: 450px) { .GiftBk .GiftItem ul li > div { display: block; margin: 0 auto; text-align: center; &:first-child img {height: 25vw; margin: 0 auto 10px;} &:last-child img {height: auto;max-width: 300px;margin: 0 auto; width: 100%;} img { &.GiftW {display: none;} &.GiftM {display: block;} } } } @media only screen and (max-width: 430px) { footer #footer .footLogo { margin-bottom: 30px; > div { display: block; &:first-child {margin-bottom: 5px;} } } .EventInfo { /*text-align: left; max-width: 195px;*/ li { display: block; margin-right: 0; } } } @media only screen and (max-width: 380px) { ul.SignUpLinkBk > li { width: 100%; margin-right: 0; margin-bottom: 20px; &:last-child {margin-bottom: 0;} } }