/* 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: #ec7306; 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; background: #050a24; } 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;*/ } /*-------------------------BODY 區塊-------------------------*/ article { position: relative; padding: 7.5vw 0 5vw; } section { position: relative; width: 55%; margin: 0 auto; } #warp { display: block; position: relative; background: #050a24; } .view_w { display: block; } .view_m { display: none; } /*-------------------------FOOTER 頁尾-----------------------*/ footer { display: block; position: relative; padding: 30px 0; background: rgba(3, 8, 26, 0.8); } .FooterLogo { display: block; width: 100%; font-size: 0; text-align: center; } .FooterLogoGP { display: inline-block; vertical-align: middle; font-size: 0; margin: 0 1vw; } .FooterLogoLabel { display: inline-block; vertical-align: middle; color: #fff; font-size: 1.2vw; padding-right: 0.5vw; border-right: 1px solid #fff; margin-right: 1vw; } .FooterLogoList { display: inline-block; vertical-align: middle; } .FooterLogoList li { display: inline-block; vertical-align: middle; margin-right: 1vw; } .FooterLogoList img { width: auto; height: 4vw; } #privacyBar { padding: 15px 0; text-align: center; background: rgba(3, 8, 26, 0.8); color: @white; position: relative; } .privacyLink { margin-bottom: 0.524vw; ul { font-size: 0; li { display: inline-block; vertical-align: middle; border-right: 1px solid @white; padding-right: 0.262vw; margin-right: 0.262vw; &:last-child {border-right: none;padding-right: 0;margin-right: 0;} a { color: @white; text-decoration: underline; } } } } /*-------------------------Header 頁首 //放選單按鈕的地方-----------------------*/ header { display: block; position: fixed; z-index: 50; top: 0; left: 0; width: 100%; #header { position: relative; background: rgba(3, 8, 26, 0);/*初始*/ padding-top: 5.209vw; transition: .5s; .Logo { display: block; position: absolute; top: 0.524vw; left: 1vw; height: 4.167vw; a { display: inline-block; height: 100%; } img { display: block; width: auto; height: 100%; } } } &.active #header { background: rgba(3, 8, 26, 0.8);/*初始*/ } } /*---------------------------Menu-----------------------*/ nav.Menu { display: block; position: absolute; top: 0.521vw; right: 2.5vw; height: 4.167vw; > ul { display: inline-block; vertical-align: middle; font-size: 0; > li { display: inline-block; position: relative; margin-left: 2.5vw; &:first-child { margin-left: 0; } > a { display: block; color: @color4; font-size: 1.2vw; font-weight: normal; } &.active > a, &.SubOpen > a { font-weight: bold; filter: drop-shadow(0px 0px 6px #2a7ba3); } } } &::after { content: ""; display: inline-block; vertical-align: middle; width: 0px; height: 100%; } } ul.SubMenu { position: absolute; width: 12vw; left: calc(50% - 6vw); top: calc(100% + 0.521vw); display: none; z-index: 1; li { display: block; margin-bottom: 0.2605vw; a { display: block; font-size: 1vw; font-weight: bold; color: @white; background: #2a7ba3; text-align: center; border-radius: 100px; padding: 0.2605vw 0; } &:nth-child(1) a { /*background: #ec7306;*/ } &:nth-child(3) a { /*background: #ff6546;*/ } a.Menu_MoreEvent{ font-size: .8vw; background: #A8A8A8; color: #000; } } } .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: #00afe8; 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: #00afe8; 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; } } } /*--------------------------共用項目-------------------------------*/ /*-----頁面名稱-----*/ .PageName { text-align: right; width: 19vw; padding: 0 1.5vw; background: #2a7ba3; color: #FFF; font-size: 1.5vw; font-weight: bold; border-top-right-radius: 100px; border-bottom-right-radius: 100px; } /*-----頁面底圖-----*/ .PageBg { display: block; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background: url("../images/bg_w.jpg") center no-repeat; background-size: cover; } /*-----彈跳視窗-----*/ .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: 1.048vw;} .PupCloseBtn { display: block; a {display: block;width: 100%;padding: 0.262vw 0;background: #E6E6E6;color: #333333;font-size: 1.3vw;} } } /*-----回頁首-----*/ .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: #ec7306;font-size: 1vw;margin-top: -15%;} } } /*---------------------------內容開始-----------------------------*/ /*----------首頁----------*/ .IndexKV img { display: block; width: 100%; height: auto; } .IndexInfo { background: #062559; padding-left: 22vw; } .IndexInfoBk { position: relative; /*background: rgba(0, 0, 0, 0.3);*/ color: #fff; padding: 1vw; width: 40vw; margin: -12vw auto 1vw; text-align: center; p:first-child { margin-bottom: 1vw; font-size: 1.15vw; } p:nth-child(2), p:nth-child(3) { font-weight: bold; font-size: 1.5vw; filter: drop-shadow(0px 0px 6px #ed740a); } } /*----------議程&講者 顏色設定----------*/ #NTAgenda, #NTSpeaker, #SingUp_1, #TPAgenda, #TPSpeaker, #TYAgenda, #TYSpeaker { .EventPlace { color: #00afe8; border: 2px solid #00afe8; } .EventDate li a:hover { color: #ec7306; span { background: #ec7306; } } .AgTable { ul li { &.AgTableHead { background: #ec7306; } .AgTag { background: #ec7306; } } } .speakerDate { color: @color5; span { background: @color5; color: @white; }.speakerList } .speakerList { ul li > div { &:nth-child(1) { img {box-shadow: 0.524vw 0.524vw 0 #ec7306;} } &:nth-child(2) {color: #ec7306;} } } } .AgInfo h2 { color: #0073be; img { display: block; height: auto; margin: 0 auto; } } .NTPTitle { width: 46%; } .TPTitle { width: 30%; } /*#TPAgenda, #TPSpeaker { .EventPlace { color: @color2; border: 0.2vw 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: 0.524vw 0.524vw 0 @color2;} } &:nth-child(2) {color: @color2;} } } }*/ .TP_Ag_Title, .TP_EDM_Txt { text-align: center; margin-bottom: 0.524vw; color: #e97308; font-size: 1.3rem; font-weight: bold; &::before, &::after { display: inline-block; vertical-align: middle; content: ""; height: 1px; background: #e97308; width: calc(50% - 100px); } &::before { margin-right: 0.524vw; } &::after { margin-left: 0.524vw; } } .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: #ec7306; color: @txtColor; }*/ /*#TYAgenda, #TYSpeaker { .EventPlace { color: #ec7306; border: 0.2vw solid #ec7306; } .EventDate li a { color: @white; span { background: @white; color: @color3; } } h2 {color: #fdff25;} .AgTable { ul li { &.AgTableHead { background: #ec7306; } .AgTag { background: #ffbd08; } } } .speakerDate { color: @white; span { background: @white; color: @color3; }.speakerList } .speakerList { ul li > div { &:nth-child(1) { img {box-shadow: 0.524vw 0.524vw 0 @white;} } &:nth-child(2) {color: #ec7306;} } } }*/ .TY .SignUpTitle { color: #fcca22; &::before, &::after { background: #fccb22; } } /*#Event1_ag, #Event1_sp {padding-bottom: 100px; border-bottom: 1px dashed #ec7306;} .AgBox {padding-top: 1.572vw;}*/ /*----------論壇議程----------*/ .EventPlace { font-size: 1.5vw; font-weight: bold; padding: 0.262vw 1.5vw; display: table; margin: 0 auto 2.2vw; } .EventDate { text-align: center; padding-bottom: 0.524vw; border-bottom: 0.1vw 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.2vw; span { display: inline-block; vertical-align: text-bottom; width: 1.048vw; height: 1.048vw; line-height: 1.048vw; border-radius: 1.572vw; color: @color4; margin: 0 0.262vw; background: #fff; transition: .5s; } } } } } .AgInfo{ h2 { font-size: 2vw; text-align: center; margin-bottom: 1.048vw; } h3 { font-size: 1.2vw; text-align: center; margin-top: -1.048vw; margin-bottom: 1.048vw; } } .EventInfo { display: block; text-align: center; margin: 0 auto 2vw; li { display: inline-block; margin-bottom: 0.262vw; margin-right: 1.572vw; font-size: 0; &:last-child { margin-right: 0; } > div { display: inline-block; color: #fff; font-size: 1.2vw; vertical-align: top; text-align: left; &:first-child { font-weight: bold; } } .Week { display: inline-block; width: 1.5vw; height: 1.5vw; text-align: center; background: #2a7ba3; border-radius: 2vw; margin-left: 0.262vw; color: #fff; line-height: 1.5vw; font-size: 0.8vw; } .EventInfoNote { color: @color5; background: rgb(236 115 6); border-radius: 0.524vw; padding: 0 0.262vw; margin-left: 0.262vw; a { font-size: 1.1rem; text-decoration: underline; color: #FFF; font-weight: bold; &:hover { color: #333333; } } } } } .EventYt { text-align: center; font-size: 1.2vw; color: #fff; margin-bottom: 1.048vw; a { text-decoration: underline; font-weight: bold; display: inline; margin: 0 0.262vw; font-size: inherit; color: #fff; width: 100px; img { display: inline-block; margin-left: 0.262vw; width: auto; height: 25px; vertical-align: text-bottom; } } } .AgLink { margin-bottom: 1.048vw; 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.3vw; color: #fff; font-weight: bold; padding: 0.524vw; 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: 0.524vw; font-size: 0; &:nth-child(odd) {background: #ECECEC;} &:nth-child(even) {background: #fff;} &.AgTableHead div { color: @color4 !important; font-size: 1vw; 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: 1vw; font-weight: bold; color: @color5; } &:nth-child(2) { text-align: center; width: 15%; font-weight: bold; font-size: 1vw; color: @color5; } &:nth-child(3) {width: 65%;} } .AgTag { display: inline-block; padding: 0.262vw; color: @white; font-size: 1vw; border-radius: 0.262vw; margin-bottom: 0.524vw; } .AgTitle { font-size: 1.2vw; font-weight: bold; color: #ec7306; span { display: inline-block; font-size: inherit; font-weight: inherit; } span.STxt { font-size: 0.8vw !important; } } .AgSpeaker { font-size: 1vw; 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;} } } } } .AgLine { display: block; width: 98%; border-bottom: 1px dashed #b4b4b4; margin: 10px 0; } .agendaSpeakerList { list-style: disc; padding-left: 1.3vw; } /*---新北額外宣傳---*/ .NTP_EventTitle { font-size: 2.2vw; text-align: center; color: #fff; filter: drop-shadow(0px 0px 10px #00afe8); } .NTP_Event { display: block; text-align: center; padding: 1.5vw 0; } .NTP_Event ul { font-size: 0; } .NTP_Event li { display: inline-block; width: 25%; margin-right: 5%; } .NTP_Event li:last-child { margin-right: 0; } .NTP_Event a { display: block; background: rgba(42, 123, 163, 0.5); color: #fff; border-radius: 100px; padding: 0.5vw 0; } .NTP_Event a:hover { background: rgba(42, 123, 163, 1); } .NTP_Event a span { display: block; } .NTP_Event a span:first-child { font-size: 0.8vw; } .NTP_Event a span:last-child { font-size: 1vw; font-weight: bold; } /*----------講者介紹----------*/ .speakerDate { margin-bottom: 1.048vw; text-align: center; font-size: 1.2vw; font-weight: bold; span { display: inline-block; width: 1.048vw; height: 1.048vw; text-align: center; background: #ec7306; border-radius: 1.048vw; margin: 0 0.262vw; color: @color5; line-height: 1.048vw; 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: 0.524vw; img {display: block;width: 80%;height: auto;margin: 0 auto;} } &:nth-child(2) {font-size: 1.5vw;font-weight: bold;} &:nth-child(3) { color: #ffffff; font-size: 0; margin-bottom: 0.524vw; span {font-size: 1.3vw;display: inline-block;} } &:nth-child(4) a { display: block; width: calc(100% - 2px); border: none; background: #00aa73; color: @color4; font-size: 1.3vw; margin: 0 auto; max-width: 348px; border-radius: 50px; font-weight: bold; &:hover {background: #ec7306;} } } } } } #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: 1.5vw; font-weight: bold; color: #ec7306;} &:nth-child(3) span {display: inline-block;color: #777;font-size: 1.2vw;margin-bottom: 0.524vw;} &:nth-child(4) { font-size: 1vw; color: #333; text-align: justify; line-height: 1.5vw; p {font-size: inherit;} } } a { color: #00aa73; font-size: inherit; } } /*-----立即報名-----*/ .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: #00afe8;border: 2px solid #00afe8;} ul.SignUpList > li:nth-child(2) .SignUpPlace, .SignUpPlace.TPColor {color: #00afe8;border: 2px solid #00afe8;} ul.SignUpList > li:nth-child(3) .SignUpPlace, .SignUpPlace.TYColor {color: #00afe8;border: 2px solid #00afe8;} 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; font-size: 0; > div { display: inline-block; vertical-align: top; width: 55%; &:nth-child(2) {border-left: 1px solid #707070;} } } .SignUpDataTitle { font-size: 1vw; font-weight: bold; margin-bottom: 1vw; text-align: justify; color: #fff; p { font-size: inherit; margin-bottom: 0.5vw; &:last-child { margin-bottom: 0; } } } .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; color: #fff; span {font-size: inherit;color: @color3;} } .SignUpDataLink { display: block; margin-bottom: 10px; a { display: block; width: 100%; margin: 0 auto; padding: 10px 0; font-size: 1.5vw; color: #fff; background: @color3; box-shadow: 0 0 10px #2a7ba3; border-radius: 50px; } } .SignUpDataNote { display: block; margin: 0 auto; text-align: justify; color: #fff; p {font-size: 1.2rem;} a {font-size: inherit;color: #ec7306;font-weight: bold;text-decoration: underline;} } .Note { display: block; width: 65%; margin: 0 auto 50px; .NoteTitle { font-size: 2.5rem; font-weight: bold; color: #ec7306; } .NoteList ul { padding-left: 0.5vw; li { font-size: 0.8vw; color: #fff; list-style: disc; margin-bottom: 0.25vw;; &::marker { color: #ec7306; margin-right: 0.25vw; font-size: 0.5vw; } a { font-size: inherit; color: #0eeaa3; text-decoration: underline; font-weight: bold; } } } } .SignUpDataType.Muti_Sign > div { width: calc(44% - 0.5px); padding: 3%; } .Muti_Sign { font-size: 0 !important; } .Muti_Sign .SignUpDataTitle { font-size: 2rem; text-align: center; } .SignUpDataCode {} .SignUpDataLink a span { display: block; font-size: 1.2rem; } /*-----台北場地圖-----*/ .TPMap img { display: block; width: 100%; height: auto; } /*-----延伸閱讀-----*/ #articleList ul { font-size: 0; li { display: inline-block; vertical-align: top; width: 48%; margin: 0 4% 3vw 0; &:nth-child(even) {margin-right: 0;} a { display: block; > div { &:nth-child(1) { display: block; margin-bottom: 0.5vw; img {display: block;width: 100%;height: auto;} } &:nth-child(2) { width: 100%; font-size: 1.2vw; color: #fff; text-align: justify; } } } } } /*---------------------------自適應內容----------------------------*/ /*--寬--*/ @media only screen and (max-width: 1280px) { /*----------全站設定----------*/ .PageName { width: 25vw; padding: 0 2vw; font-size: 2vw; } header #header { padding-top: 7vw; } header #header .Logo { top: 1vw; height: 5.5vw; } nav.Menu { top: 1vw; right: 3vw; height: 5vw; } nav.Menu > ul > li { margin-left: 3.5vw; } nav.Menu > ul > li > a { font-size: 1.5vw; } ul.SubMenu { width: 15vw; left: calc(50% - 7.5vw); } ul.SubMenu li a { font-size: 1.3vw; } ul.SubMenu li a.Menu_MoreEvent{ font-size: 1vw; } .FooterLogoLabel { font-size: 1.5vw; padding-right: 1vw; } .FooterLogoList img { height: 5.5vw; } /*----------首頁------------*/ .IndexInfoBk { margin: -13vw auto 1vw; } .IndexInfoBk p:first-child { font-size: 1.35vw; } .IndexInfoBk p:nth-child(2), .IndexInfoBk p:nth-child(3) { font-size: 1.8vw; } /*----------活動議程----------*/ section { width: 90%; } .EventPlace { font-size: 2.5vw; } .NTP_Event { padding: 2vw 0; a { padding: 1vw 0; span:first-child { font-size: 1.5vw; } span:last-child { font-size: 2vw; } } } .NTP_EventTitle { font-size: 4vw; } .EventInfo { margin: 0 auto 3vw; li { margin-right: 2vw; > div { font-size: 2vw; } } } .EventInfo li .Week { font-size: 1.5vw; width: 2vw; height: 2vw; line-height: 2vw; } .AgLink { margin-bottom: 2vw; } .AgLink ul li a { font-size: 2vw; padding: 0.5vw; } .AgTable > ul > li { padding: 1vw; } .AgTable > ul > li > div:nth-child(1) { font-size: 1.5vw; } .AgTable > ul > li > div:nth-child(2) { font-size: 1.5vw; } .AgTable > ul > li.AgTableHead div { font-size: 1.5vw; } .AgTable > ul > li .AgTitle { font-size: 2vw; } .AgTable > ul > li .AgTitle span.STxt { font-size: 1.2vw !important; } .AgTable > ul > li .AgSpeaker { font-size: 1.6vw; } .AgTable > ul > li .AgTag { font-size: 1.8vw; } /*----------講者介紹----------*/ .speakerList ul li > div:nth-child(2) { font-size: 2.6vw; } .speakerList ul li > div:nth-child(3) span { font-size: 2.2vw; } .speakerList ul li > div:nth-child(4) a { max-width: none; width: 80%; font-size: 2vw; } /*----------講者彈跳視窗----------*/ #speakerDataList li > div:nth-child(2) { font-size: 2.8vw; } #speakerDataList li > div:nth-child(3) span { font-size: 2.2vw; margin-bottom: 1vw; } #speakerDataList li > div:nth-child(4) { font-size: 2vw; line-height: 3vw; } .Pup .PupCloseBtn a { font-size: 2vw; padding: 0.5vw 0; } /*----------線上報名----------*/ .SignUpDataTitle { font-size: 2vw; margin-bottom: 3vw; } .SignUpDataType > div { width: 95%; } .SignUpDataTitle p { margin-bottom: 1vw; } .SignUpDataLink a { padding: 0.5vw 0; font-size: 3vw; width: 70%; } .Note { width: 90%; } .Note .NoteList ul li { font-size: 1.8vw; margin-bottom: 0.5vw; } .Note .NoteList ul li::marker { margin-right: 1vw; font-size: 2vw; } .Note .NoteList ul { padding-left: 3vw; } /*----------延伸閱讀----------*/ #articleList { padding-top: 4vw; } #articleList ul li a > div:nth-child(2) { font-size: 2vw; } } @media only screen and (max-width: 720px) { /*----------全站設定----------*/ .PageBg { background: url("../images/bg_m.jpg") center no-repeat; background-size: cover !important; } .view_w { display: none; } .view_m { display: block; } header #header { padding-top: 70px; background: rgba(3, 8, 26, 0.3); .Logo { top: 10px; height: 60px; } } .MobileMenu {display: block;} nav.Menu { background: #050A24; 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: #00afe8;padding: 5px 0;} } } &.active { left: 0; } } ul.SubMenu { position: relative; width: 100%; left: auto; li a {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;}*/ li a.Menu_MoreEvent {font-size: 1.4rem;} } article { padding: 120px 0 30px; } .PageName { padding: 0; width: 100%; text-align: center; border-radius: 0; font-size: 1.4rem; } .FooterLogoGP { display: block; margin: 0 0 20px; } .FooterLogoGP:last-child { margin-bottom: 0; } .FooterLogoLabel { font-size: 16px; padding: 3px 20px; margin-right: 0; border: 1px solid #fff; } .gvmLogo { margin-bottom: 20px; } .FooterLogo { width: 90%; margin: 0 auto; } .FooterLogoList { display: block; } .FooterLogoList img { height: 70px; } .FooterLogoList li { display: block; margin: 0 auto; } /*----------首頁----------*/ .IndexInfo { padding-left: 0; } .IndexInfoBk { margin: -165vw auto 93vw; width: calc(80% - 10vw); padding: 5vw; } .IndexInfoBk p:first-child { font-size: 4.6vw; text-align: justify; margin-bottom: 8vw; } .IndexInfoBk p:nth-child(2), .IndexInfoBk p:nth-child(3) { font-size: 5.8vw; } /*----------活動議程----------*/ .EventPlace { font-size: 30px; } .NTPTitle { width: 100%; } .TPTitle { width: 70%; } .NTP_Event { padding: 20px 0; } .NTP_Event li { width: 80%; margin-right: 0; margin-bottom: 5px; } .NTP_Event a { padding: 10px; } .NTP_Event a span:first-child { font-size: 18px; } .NTP_Event a span:last-child { font-size: 20px; } .NTP_EventTitle { font-size: 40px; font-weight: bold; } .EventInfo li { margin-bottom: 5px; } .EventInfo li > div { font-size: 20px; } .EventInfo li .Week { font-size: 15px; width: 20px; height: 20px; line-height: 20px; border-radius: 20px; } .EventInfo { margin-bottom: 20px; } .AgLink { margin-bottom: 20px; } .AgLink ul li a { padding: 10px 0; font-size: 20px; } .AgLink ul li { width: 80%; } .AgTable > ul > li > div { display: block; &:nth-child(1) {width: 100%;} &:nth-child(2) {width: 100%;} &:nth-child(3) {text-align: center;width: 100%;} } .AgTable > ul > li { padding: 10px; } .AgTable > ul > li.AgTableHead div { font-size: 16px; } .AgTable > ul > li > div:nth-child(1), .AgTable > ul > li > div:nth-child(2) { font-size: 16px; } .AgTable > ul > li .AgTitle { font-size: 20px; } .AgTable > ul > li .AgTitle span { display: inline; } .AgTable > ul > li .AgTitle span.STxt { font-size: 15px !important; } .AgTable > ul > li .AgSpeaker { font-size: 16px; } .AgTable > ul > li .AgTag { font-size: 16px; font-weight: bold; padding: 10px; border-radius: 10px; } /*----------講者介紹----------*/ .speakerList ul li > div:nth-child(2) { font-size: 20px; } .speakerList ul li > div:nth-child(3) span { font-size: 17px; } .speakerList ul li > div:nth-child(4) a { max-width: none; width: 80%; font-size: 16px; } /*----------彈跳視窗----------*/ .Pup .PupContent { padding: 10px; } #speakerDataList li > div:nth-child(1) img { max-width: none; width: 80%; } #speakerDataList li > div:nth-child(2) { font-size: 20px; } #speakerDataList li > div:nth-child(3) span { font-size: 17px; margin-bottom: 1vw; } #speakerDataList li > div:nth-child(4) { font-size: 16px; line-height: 24px; } .Pup .PupCloseBtn a { font-size: 16px; padding: 5px 0; } #speakerDataList li > div:nth-child(3) { margin-bottom: 5px; } /*----------立即報名----------*/ .SignUpDataTitle { font-size: 4.5vw; } .SignUpDataLink a { width: 100%; font-size: 8vw; padding: 2vw 0; font-weight: bold; } .SignUpBk { padding: 0 0 5vw 0; } .Note .NoteList ul li { font-size: 4vw; } .Note { width: 100%; } .Note .NoteList ul li::marker { font-size: 5vw; margin-right: 0; } .Note .NoteList ul { padding-left: 7vw; text-align: justify; } /*----------延伸閱讀----------*/ #articleList ul li { width: 100%; margin: 0 auto 8vw 0; &:last-child {margin-bottom: 0;} } #articleList ul li a > div:nth-child(1) { margin-bottom: 2vw; } #articleList ul li a > div:nth-child(2) { font-size: 4.5vw; } } @media only screen and (max-width: 520px) { .SignUpDataType > div, .SignUpDataType.Muti_Sign > 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) { } @media only screen and (max-width: 460px) { .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: 428px) { .EventInfo li > div.TP_Place { text-align: center; } } @media only screen and (max-width: 342px) { .EventInfo li > div.TY_Place { text-align: center; } } @media only screen and (max-width: 380px) { ul.SignUpLinkBk > li { width: 100%; margin-right: 0; margin-bottom: 20px; &:last-child {margin-bottom: 0;} } }