| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- .workProcedure {
- padding: 0 5%;
- font-size: 16px;
- font-family: "Noto Sans", sans-serif;
- color: #eee9dc;
- }
-
- .workProcedure h2 {
- margin: 3em 0 0 0;
- font-size: 1.5em;
- letter-spacing: 2px;
- text-transform: uppercase;
- }
-
- /* -------------------------------------
- * timeline
- * ------------------------------------- */
- #timeline {
- list-style: none;
- margin: 50px 0 30px 120px;
- padding-left: 30px;
- border-left: 3px solid #00f6ff;
- font-weight: 600;
- }
- #timeline li {
- margin: 40px 0;
- position: relative;
- }
- #timeline p {
- position: absolute;
- top: 15px;
- margin: 0 0 15px;
- }
-
- .date {
- margin-top: -10px;
- top: 50%;
- left: -200px;
- font-size: 0.95em;
- line-height: 20px;
- position: absolute;
- }
-
- .circle {
- margin-top: -10px;
- top: 50%;
- left: -38px;
- width: 9px;
- height: 9px;
- background: #fff;
- border: 2px solid #00f6ff;
- border-radius: 50%;
- display: block;
- position: absolute;
- }
-
- .content {
- padding: 50px 20px 0;
- }
- /* label {
- font-size: 1.3em;
- position: absolute;
- z-index: 100;
- top: 20px;
- } */
-
- .radio {
- display: none;
- }
- /* .radio:checked + .relative .circle {
- background: #f98262;
- } */
- .radio:checked ~ .content {
- max-height: 180px;
- border-color: #eee9dc;
- margin-right: 20px;
- }
- .work{
-
- }
- /* -------------------------------------
- * mobile phones (vertical version only)
- * ------------------------------------- */
- @media screen and (max-width: 767px) {
- #timeline {
- margin-left: 0;
- padding-left: 0;
- border-left: none;
- }
- #timeline li {
- margin: 50px 0;
- }
-
- /* label {
- width: 85%;
- font-size: 1.1em;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- display: block;
- transform: translateX(18px);
- } */
-
- .content {
- padding-top: 45px;
- border-color: #eee9dc;
- }
- .content:before, .content:after {
- border: solid transparent;
- bottom: 100%;
- }
- .content:before {
- border-bottom-color: inherit;
- border-width: 17px;
- top: -16px;
- left: 50px;
- margin-left: -17px;
- }
- .content:after {
- border-bottom-color: #48b379;
- border-width: 20px;
- top: -20px;
- left: 50px;
- margin-left: -20px;
- }
- .content p {
- font-size: 0.9em;
- line-height: 1.4;
- }
-
- .circle, .date {
- display: none;
- }
- }
|