img { display: block; } #banner { background-color: #666; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 150px; padding-bottom: 150px; text-align: center; color: #fff; } #banner h1, #banner h2, #banner h3, #banner h4 { font-size: 200%; line-height: 150%; font-weight: 500; margin-bottom: 10px; } #banner span { margin-bottom: 10px; padding-bottom: 10px; display: block; position: relative; } #banner span::after { content: ' '; width: 50px; height: 2px; background: #1b95cd; display: block; position: absolute; bottom: 0px; left: calc(50% - 25px); } #banner .breadcrumb { margin-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; justify-content: center; } #banner .breadcrumb li::after { content: '/'; padding: 0 10px; } #banner .breadcrumb li a { font-size: 90%; color: #fff; } #banner .breadcrumb li:last-child::after { display: none; } #banner p { font-family: '微軟正黑體', sans-serif; line-height: 150%; max-width: 600px; margin: 0 auto; } @media (max-width: 1024px) { #banner { padding-top: 50px; padding-bottom: 50px; } } body { background: #fafafa; } main { padding-top: 50px; padding-bottom: 100px; } main article { order: 1; background: #fff; margin-left: 30px; width: calc(100% - 330px); padding: 20px; } main article h2 { margin-bottom: 20px; padding: 10px 20px; background: #fafafa; font-size: 120%; } main article h2 a { color: #333; display: block; padding-left: 10px; border-left: 2px solid #1b95cd; } main article h2 a:hover { color: #1b95cd; } main article h3 { margin-bottom: 20px; background: #fafafa; font-size: 110%; padding: 10px 20px; } main article h3 a { color: #333; display: block; padding-left: 10px; border-left: 2px solid #1b95cd; } main article h3 a:hover { color: #1b95cd; } main article ul { padding: 20px 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; } main article ul li { width: calc((100% - 30px) / 4); transition: all .2s ease-out 0s; margin: 0 5px 10px 5px; padding: 20px 0; cursor: pointer; } main article ul li:nth-child(4n + 1) { margin-left: 0px; } main article ul li:nth-child(4n) { margin-right: 0px; } main article ul li picture { width: 200px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; } main article ul li picture img { width: 100%; } main article ul li a { color: #333; display: block; padding: 0 20px; font-size: 120%; line-height: 150%; } main article ul li a:hover { color: #1b95cd; } main article ul li p { padding: 20px 20px 0 20px; line-height: 150%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } main article ul li:hover { background: #f1f1f1; } @media (min-width: 1201px) and (max-width: 1600px) { main article ul li { width: calc((100% - 20px) / 3); } main article ul li:nth-child(4n + 1) { margin-left: 5px; } main article ul li:nth-child(4n) { margin-right: 5px; } main article ul li:nth-child(3n + 1) { margin-left: 0px; } main article ul li:nth-child(3n) { margin-right: 0px; } } @media (min-width: 1025px) and (max-width: 1200px) { main article ul li { width: calc((100% - 10px) / 2); } main article ul li:nth-child(4n + 1) { margin-left: 5px; } main article ul li:nth-child(4n) { margin-right: 5px; } main article ul li:nth-child(2n + 1) { margin-left: 0px; } main article ul li:nth-child(2n) { margin-right: 0px; } } @media (min-width: 768px) and (max-width: 980px) { main article ul li { width: calc((100% - 20px) / 3); } main article ul li:nth-child(4n + 1) { margin-left: 5px; } main article ul li:nth-child(4n) { margin-right: 5px; } main article ul li:nth-child(3n + 1) { margin-left: 0px; } main article ul li:nth-child(3n) { margin-right: 0px; } } @media (max-width: 767px) { main article ul li { width: calc((100% - 10px) / 2); } main article ul li:nth-child(4n + 1) { margin-left: 5px; } main article ul li:nth-child(4n) { margin-right: 5px; } main article ul li:nth-child(2n + 1) { margin-left: 0px; } main article ul li:nth-child(2n) { margin-right: 0px; } } @media (max-width: 767px) { main article ul { padding: 0px; } } @media (max-width: 767px) { main article { padding: 0px; } } main aside { order: 0; background: #fff; width: 300px; } main aside h3 { padding: 20px; color: #333; font-weight: 100; font-size: 120%; } main aside h3 button { display: none; } main aside >form { padding: 0 20px 20px 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; } main aside >form button { width: 40px; height: 40px; background: #1b95cd; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; color: #fff; } main aside >form input[type=text] { width: calc(100% - 40px); height: 40px; padding: 3px 5px; border: 1px solid #f1f1f1; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } main aside >ul { padding: 0 20px; } main aside >ul li { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; align-items: center; } main aside >ul li a { width: calc(100% - 32px); } main aside >ul li button { width: 32px; height: 32px; position: relative; } main aside >ul li button::after { content: ' '; width: 20px; height: 2px; position: absolute; top: calc(50% - 1px); left: 6px; background: #1b95cd; } main aside >ul li button::before { content: ' '; width: 2px; height: 20px; position: absolute; left: calc(50% - 1px); top: 6px; background: #1b95cd; } main aside >ul li ul { display: none; padding-left: 20px; width: 100%; } main aside >ul li.active > button::before { display: none; } main aside >ul li.active > ul { display: block; } main aside >ul >li a { display: block; padding: 10px 0; color: #333; } main aside >ul >li a:hover { color: #1b95cd; } main aside >ul >li >a { position: relative; padding-left: 10px; } main aside >ul >li >a::before { content: ' '; width: 4px; height: 4px; display: block; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background: #1b95cd; position: absolute; left: 0px; top: calc(50% - 2px); } @media (max-width: 1024px) { main { display: block; } main aside { width: 100%; margin-bottom: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } main aside h3 { position: relative; background: #1b95cd; color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } main aside h3 button { background: #f1f1f1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; display: block; right: 13px; top: 15px; width: 32px; height: 32px; } main aside h3 button::after { content: ' '; width: 0; height: 0; border-style: solid; border-width: 0 7.5px 13.0px 7.5px; border-color: transparent transparent #666 transparent; position: absolute; top: 7.5px; right: 8px; } main aside >form { display: none; } main aside >ul { display: none; } main aside.active >form { display: block; padding-top: 20px; } main aside.active h3 button::after { border-width: 13.0px 7.5px 0 7.5px; border-color: #666 transparent transparent transparent; top: 9px; } main aside.active >ul { display: block; } main article { width: 100%; margin: 0px; } } 