/*------------------------------------------------------------------- 분류그룹 : 공통 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline {display: block; position: relative; padding: 0 20px;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 600px) { #timeline {padding: 0;} } /*------------------------------------------------------------------- 분류그룹 : 공통 > checkbox 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-ck {display: inline-block; position: relative; min-height: 20px; padding-left: 25px; line-height: 1; white-space: nowrap; vertical-align: middle; cursor: pointer;} #timeline .tl-ck > input[type="checkbox"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);} #timeline .tl-ck > span, #timeline .tl-ck > label {display:inline-block; line-height: 20px; font-weight: 500; font-size: 1rem; vertical-align: middle; color: #000;} #timeline .tl-ck > label {cursor: pointer;} #timeline .tl-ck > span::before, #timeline .tl-ck > label::before {content:''; position:absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #dfdfdf; background-color: #fff; box-sizing: border-box;} #timeline .tl-ck > span::after, #timeline .tl-ck > label::after {content:''; position:absolute; top: 4px; left: 4px; width: 12px; height: 9px; border-left: 3px solid #AD733E; border-bottom: 3px solid #AD733E; opacity: 0; transform: rotate(-45deg); box-sizing: border-box;} /* focused */ #timeline .tl-ck > input[type="checkbox"]:focus-visible + span, #timeline .tl-ck > input[type="checkbox"]:focus-visible + label {outline: 3px solid #000000;} #timeline .tl-ck > input[type="checkbox"]:focus:not(:focus-visible) + span, #timeline .tl-ck > input[type="checkbox"]:focus:not(:focus-visible) + label {outline: none;} #timeline .tl-ck > input[type="checkbox"]:focus + span::before, #timeline .tl-ck > input[type="checkbox"]:focus + label::before {border-color: #AD733E; outline: 3px solid #000000;} #timeline .tl-ck > input[type="checkbox"]:focus:not(:focus-visible) + span::before, #timeline .tl-ck > input[type="checkbox"]:focus:not(:focus-visible) + label::before {border-color: #AD733E; outline: none;} /* checked */ #timeline .tl-ck > input[type="checkbox"]:checked + span::before, #timeline .tl-ck > input[type="checkbox"]:checked + label::before {border-color: #AD733E;} #timeline .tl-ck > input[type="checkbox"]:checked + span::after, #timeline .tl-ck > input[type="checkbox"]:checked + label::after {opacity: 1;} #timeline .tl-ck > input[type="checkbox"]:checked + span, #timeline .tl-ck > input[type="checkbox"]:checked + label {color: #AD733E;} /* disabled */ #timeline .tl-ck > input[type="checkbox"]:disabled + span::before, #timeline .tl-ck > input[type="checkbox"]:disabled + label::before {border-color: #bcbcbc; background-color: #f8f8f8;} #timeline .tl-ck > input[type="checkbox"]:disabled + span, #timeline .tl-ck > input[type="checkbox"]:disabled + label {color: #bcbcbc;} #timeline .tl-ck > input[type="checkbox"]:checked:disabled + span::before, #timeline .tl-ck > input[type="checkbox"]:checked:disabled + label::before {border-color: #bcbcbc;} #timeline .tl-ck > input[type="checkbox"]:checked:disabled + span::after, #timeline .tl-ck > input[type="checkbox"]:checked:disabled + label::after {border-color: #bcbcbc;} /*------------------------------------------------------------------- 분류그룹 : 공통 > checkbox 2 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-badge {display: inline-block; vertical-align: middle; cursor: pointer;} #timeline .tl-badge > input[type="checkbox"], #timeline .tl-badge > input[type="radio"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);} #timeline .tl-badge > label {display: block; overflow: hidden; position: relative; padding: 8px 15px; border: 1px solid #e9e9e9; border-radius: 5px; background-color: #ffffff; line-height: 1; font-weight: 500; font-size: 1rem; color: #666666; cursor: pointer;} #timeline .tl-badge > label > span {display: block; position: relative;} #timeline .tl-badge > input[type="checkbox"] + label, #timeline .tl-badge > input[type="radio"] + label {transition: border-color 0.3s, color 0.3s;} /* focused */ #timeline .tl-badge > input[type="checkbox"]:focus-visible + label, #timeline .tl-badge > input[type="radio"]:focus-visible + label {outline: 2px solid #000000;} #timeline .tl-badge > input[type="checkbox"]:focus:not(:focus-visible) + label, #timeline .tl-badge > input[type="radio"]:focus:not(:focus-visible) + label {outline: none;} /* focused & hover */ #timeline .tl-badge > input[type="checkbox"]:focus + label, #timeline .tl-badge > input[type="checkbox"]:hover + label, #timeline .tl-badge > input[type="radio"]:focus + label, #timeline .tl-badge > input[type="radio"]:hover + label {border-color: #AD733E; color: #AD733E;} #timeline .tl-badge.type-a > input[type="checkbox"]:focus + label, #timeline .tl-badge.type-a > input[type="checkbox"]:hover + label, #timeline .tl-badge.type-a > input[type="radio"]:focus + label, #timeline .tl-badge.type-a > input[type="radio"]:hover + label {border-color: #003863; color: #003863;} #timeline .tl-badge.type-b > input[type="checkbox"]:focus + label, #timeline .tl-badge.type-b > input[type="checkbox"]:hover + label, #timeline .tl-badge.type-b > input[type="radio"]:focus + label, #timeline .tl-badge.type-b > input[type="radio"]:hover + label {border-color: #E4032E; color: #E4032E;} #timeline .tl-badge.type-c > input[type="checkbox"]:focus + label, #timeline .tl-badge.type-c > input[type="checkbox"]:hover + label, #timeline .tl-badge.type-c > input[type="radio"]:focus + label, #timeline .tl-badge.type-c > input[type="radio"]:hover + label {border-color: #AD733E; color: #AD733E;} #timeline .tl-badge.type-d > input[type="checkbox"]:focus + label, #timeline .tl-badge.type-d > input[type="checkbox"]:hover + label, #timeline .tl-badge.type-d > input[type="radio"]:focus + label, #timeline .tl-badge.type-d > input[type="radio"]:hover + label {border-color: #4D72BE; color: #4D72BE;} #timeline .tl-badge.type-e > input[type="checkbox"]:focus + label, #timeline .tl-badge.type-e > input[type="checkbox"]:hover + label, #timeline .tl-badge.type-e > input[type="radio"]:focus + label, #timeline .tl-badge.type-e > input[type="radio"]:hover + label {border-color: #50ACAC; color: #50ACAC;} #timeline .tl-badge.type-f > input[type="checkbox"]:focus + label, #timeline .tl-badge.type-f > input[type="checkbox"]:hover + label, #timeline .tl-badge.type-f > input[type="radio"]:focus + label, #timeline .tl-badge.type-f > input[type="radio"]:hover + label {border-color: #754FA6; color: #754FA6;} /* checked */ #timeline .tl-badge > input[type="checkbox"]:checked + label, #timeline .tl-badge > input[type="radio"]:checked + label {border-color: #AD733E; background-color: #AD733E; color: #ffffff;} #timeline .tl-badge.type-a > input[type="checkbox"]:checked + label, #timeline .tl-badge.type-a > input[type="radio"]:checked + label {border-color: #003863; background-color: #003863; color: #ffffff;} #timeline .tl-badge.type-b > input[type="checkbox"]:checked + label, #timeline .tl-badge.type-b > input[type="radio"]:checked + label {border-color: #E4032E; background-color: #E4032E; color: #ffffff;} #timeline .tl-badge.type-c > input[type="checkbox"]:checked + label, #timeline .tl-badge.type-c > input[type="radio"]:checked + label {border-color: #AD733E; background-color: #AD733E; color: #ffffff;} #timeline .tl-badge.type-d > input[type="checkbox"]:checked + label, #timeline .tl-badge.type-d > input[type="radio"]:checked + label {border-color: #4D72BE; background-color: #4D72BE; color: #ffffff;} #timeline .tl-badge.type-e > input[type="checkbox"]:checked + label, #timeline .tl-badge.type-e > input[type="radio"]:checked + label {border-color: #50ACAC; background-color: #50ACAC; color: #ffffff;} #timeline .tl-badge.type-f > input[type="checkbox"]:checked + label, #timeline .tl-badge.type-f > input[type="radio"]:checked + label {border-color: #754FA6; background-color: #754FA6; color: #ffffff;} /*------------------------------------------------------------------- 분류그룹 : 공통 > button 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-btn {display: inline-block; min-height: 40px; padding: 4px 15px; border-radius: 4px; background-color: #7e7e7e; line-height: 32px; font-weight: 600; font-size: 1rem; color: #ffffff; text-align: center; cursor: pointer;} #timeline .tl-btn > span {display: inline-block; line-height: 1; vertical-align: middle;} /* colors */ #timeline .tl-btn.active {background-color: #003863; color: #ffffff;} #timeline .tl-btn.type-a {background-color: #E4032E; color: #ffffff;} #timeline .tl-btn.type-b {background-color: #AD733E; color: #ffffff;} #timeline .tl-btn.type-c {background-color: #4D72BE; color: #ffffff;} #timeline .tl-btn.type-d {background-color: #50ACAC; color: #ffffff;} #timeline .tl-btn.type-e {background-color: #754FA6; color: #ffffff;} #timeline .tl-btn.type-bk {background-color: #363636; color: #ffffff;} #timeline .tl-btn.type-wh {border: 1px solid #e9e9e9; background-color: #ffffff; color: #003863; line-height: 30px;} /* tl-btn-ck */ #timeline .tl-btn.tl-btn-ck, #timeline .tl-btn.tl-btn-ck.type-a, #timeline .tl-btn.tl-btn-ck.type-b, #timeline .tl-btn.tl-btn-ck.type-c, #timeline .tl-btn.tl-btn-ck.type-d, #timeline .tl-btn.tl-btn-ck.type-e {background-color: #7e7e7e; color: #ffffff;} #timeline .tl-btn.tl-btn-ck.active {background-color: #003863; color: #ffffff;} #timeline .tl-btn.tl-btn-ck.active.type-a {background-color: #E27D60; color: #ffffff;} #timeline .tl-btn.tl-btn-ck.active.type-b {background-color: #C38D9E; color: #ffffff;} #timeline .tl-btn.tl-btn-ck.active.type-c {background-color: #41B3A3; color: #ffffff;} #timeline .tl-btn.tl-btn-ck.active.type-d {background-color: #85CDCA; color: #ffffff;} #timeline .tl-btn.tl-btn-ck.active.type-e {background-color: #E8A87C; color: #ffffff;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #timeline .tl-btn {box-shadow: 0 0 6px 0 rgba(0,0,0,0); transition: border 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;} #timeline .tl-btn:focus, #timeline .tl-btn:hover {background-color: #ffffff; color:#003863; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);} #timeline .tl-btn:focus {outline: 3px solid #000000;} #timeline .tl-btn:focus:not(:focus-visible) {outline: none;} #timeline .tl-btn.type-a:focus, #timeline .tl-btn.type-a:hover {background-color: #E4032E; color:#ffffff;} #timeline .tl-btn.type-b:focus, #timeline .tl-btn.type-b:hover {background-color: #AD733E; color:#ffffff;} #timeline .tl-btn.type-c:focus, #timeline .tl-btn.type-c:hover {background-color: #4D72BE; color:#ffffff;} #timeline .tl-btn.type-d:focus, #timeline .tl-btn.type-d:hover {background-color: #50ACAC; color:#ffffff;} #timeline .tl-btn.type-e:focus, #timeline .tl-btn.type-e:hover {background-color: #754FA6; color:#ffffff;} #timeline .tl-btn.type-bk:focus, #timeline .tl-btn.type-bk:hover {background-color: #141414; color:#ffffff;} #timeline .tl-btn.tl-btn-ck:focus, #timeline .tl-btn.tl-btn-ck:hover {background-color: #003863; color: #ffffff;} #timeline .tl-btn.tl-btn-ck.type-a:focus, #timeline .tl-btn.tl-btn-ck.type-a:hover {background-color: #E27D60; color:#ffffff;} #timeline .tl-btn.tl-btn-ck.type-b:focus, #timeline .tl-btn.tl-btn-ck.type-b:hover {background-color: #C38D9E; color:#ffffff;} #timeline .tl-btn.tl-btn-ck.type-c:focus, #timeline .tl-btn.tl-btn-ck.type-c:hover {background-color: #41B3A3; color:#ffffff;} #timeline .tl-btn.tl-btn-ck.type-d:focus, #timeline .tl-btn.tl-btn-ck.type-d:hover {background-color: #85CDCA; color:#ffffff;} #timeline .tl-btn.tl-btn-ck.type-e:focus, #timeline .tl-btn.tl-btn-ck.type-e:hover {background-color: #E8A87C; color:#ffffff;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 800px) { #timeline .tl-btn {min-height: 30px; padding: 4px 8px; line-height: 22px;} } /*------------------------------------------------------------------- 분류그룹 : header 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-header {display: block; padding: 20px; border-width: 2px 1px 1px; border-style: solid; border-color: #141414 #e9e9e9 #e9e9e9; background-color: #F3F5F9;} #timeline .tl-header .header-row {display: flex; align-items: center;} #timeline .tl-header .header-row .tit {display: block; min-width: 100px; padding-bottom: 10px; font-weight: 600; font-size: 1.125rem; color: #141414; flex-shrink: 0;} #timeline .tl-header .header-row .row-con {display: block; flex-grow: 1;} #timeline .tl-header .header-row .row-con .list {display: flex; margin: 0 -5px; flex-wrap: wrap;} #timeline .tl-header .header-row .row-con .list > li {display: block; padding: 0 5px 10px;} #timeline .tl-header .header-row .row-con .date-range {display: flex; margin: 0 -5px;} #timeline .tl-header .header-row .row-con .date-range .item {display: block; padding: 0 5px 10px;} #timeline .tl-header .header-row .row-con .date-range .item.time-box {display: block;} #timeline .tl-header .header-row .row-con .date-range .item.btn-box {display: block;} #timeline .tl-header .header-row .row-con .date-range .item .indate {display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #dfdfdf; font-size: 1rem;} #timeline .tl-header .header-row .row-con .date-range .item > span {display: inline-block; line-height: 40px;} #timeline .tl-header .header-row .row-con .date-range .btn-date-search {display: block; width: 100%; height: 40px; line-height: 32px;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 800px) { #timeline .tl-header {padding: 15px 15px 5px;} #timeline .tl-header .header-row {display: block;} #timeline .tl-header .header-row .tit {padding-bottom: 5px;} } @media screen and (max-width: 600px) { #timeline .tl-header .header-row:first-child .row-con .list > li {min-width: 50%;} #timeline .tl-header .header-row .row-con .list > li .tl-btn {display: block; width: 100%;} #timeline .tl-header .header-row .row-con .date-range .item.btn-box {flex-grow: 1;} } @media screen and (max-width: 425px) { #timeline .tl-header .header-row .row-con .date-range {display: block;} #timeline .tl-header .header-row .row-con .date-range .item {width: 100%;} #timeline .tl-header .header-row .row-con .date-range .item.bridge {display: none;} } /*------------------------------------------------------------------- 분류그룹 : body 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-body {display: block; position: relative; border-width: 0 1px 1px; border-style: solid; border-color: #e9e9e9;} #timeline .tl-body .tl-track-wrap {display: block; overflow-x: auto; overflow-y: hidden;} #timeline .tl-body .tl-track-wrap::-webkit-scrollbar {width: 10px; height: 10px; box-sizing: content-box;} #timeline .tl-body .tl-track-wrap::-webkit-scrollbar-thumb {height: 30%; border-radius: 10px; background: #003863;} #timeline .tl-body .tl-track-wrap::-webkit-scrollbar-track {padding: 0 5px; background: #e4e4e4;} #timeline .tl-body .tl-track-wrap .tl-track {display: block; position: relative;} /*------------------------------------------------------------------- 분류그룹 : body > Case Track 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .case-track {display: block; overflow: hidden; position: relative; height: 600px; background-image: url(../images/bg_dashed.svg); background-position: top left; background-size: 50px;} /*------------------------------------------------------------------- 분류그룹 : body > Case Track > Case Date Wrap 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .case-track .case-date-wrap {display: block;} #timeline .case-track .case-date-wrap .year {display: flex; position: absolute; top: 0; height: 100%; padding-left: 20px; border-left: 2px solid #999999; font-weight: 900; font-size: 2.5rem; color: rgba(0,0,0,0.2); align-items: center;} /*------------------------------------------------------------------- 분류그룹 : body > Case Track > Case wrap 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .case-track .case-wrap .case-item {visibility: hidden; position: absolute; top: 20px; border: 2px solid red; border-radius: 5px; background-color: #ffffff; box-shadow: 0 5px 20px 2px rgba(0,0,0,0.2); transform: translateX(-90px);} #timeline .case-track .case-wrap .case-item .status {display: block; height: 30px; line-height: 30px; background-color: red; text-align: center;} #timeline .case-track .case-wrap .case-item .status > span {display: inline-block; font-weight: 600; font-size: 16px; color: #ffffff; vertical-align: middle;} #timeline .case-track .case-wrap .case-item .con-box {display: block; overflow-x: hidden; overflow-y: auto; height: calc(100% - 30px);} #timeline .case-track .case-wrap .case-item .con-box::-webkit-scrollbar {width: 8px; height: 8px; box-sizing: content-box;} #timeline .case-track .case-wrap .case-item .con-box::-webkit-scrollbar-thumb {height: 30%; border-radius: 8px; background: #003863;} #timeline .case-track .case-wrap .case-item .con-box::-webkit-scrollbar-track {padding: 0 5px; background: #e4e4e4;} #timeline .case-track .case-wrap .case-item .con-box .title-box {display: block; padding: 10px;} #timeline .case-track .case-wrap .case-item .con-box .title-box .date {display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; color: red;} #timeline .case-track .case-wrap .case-item .con-box .title-box .tit {display: block; margin-bottom: 10px; font-weight: 600; font-size: 16px; color: #141414;} #timeline .case-track .case-wrap .case-item .con-box .title-box .count {display: inline-block; padding: 2px; border: 1px solid #e9e9e9; border-radius: 5px; background-color: #F3F5F9; font-weight: 600; font-size: 13px; color: #141414; word-break: break-all;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box {display: block;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .btn-ctr-acrdn {display: block; position: relative; width: 100%; padding: 0 30px 0 10px; border-width: 1px 0; border-style: solid; border-color: #e9e9e9; background-color: #F3F5F9; line-height: 30px; font-weight: 600; font-size: 1rem; color: #141414; text-align: left;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .btn-ctr-acrdn::before {content:""; position: absolute; top: 50%; right: 13px; width: 10px; height: 10px; border-width: 0 2px 2px 0; border-style: solid; border-color: #141414; transform: translateY(-50%) rotate(45deg); box-sizing: border-box;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list {display: block; border-top: 1px solid #e9e9e9;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li {display: block; border-bottom: 1px dashed #e9e9e9;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li:last-child {border-bottom: 0;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li .btn-ctr {display: flex; padding: 5px 10px; align-items: center;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li .btn-ctr .tit {display: block; padding-right: 5px; font-size: 14px; flex-shrink: 0;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li .btn-ctr .count {display: block; margin-left: auto; min-width: 20px; min-height: 20px; border-radius: 20px; background-color: #E4032E; padding: 0 5px; line-height: 20px; font-weight: 600; font-size: 13px; color: #ffffff; text-align: center; word-break: break-all;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #timeline .case-track .case-wrap .case-item {visibility: hidden; opacity: 0; transform: translateX(-90px); transition: visibility 0s 0.3s, opacity 0.3s, top 0.3s;} /* #timeline .case-track .case-wrap .case-item.active {visibility: visible; animation: caseFadeIn 0.6s;} */ #timeline .case-track .case-wrap .case-item.active {visibility: visible; opacity: 1; transform: translateX(-90px); transition: visibility 0s 0s, opacity 0.3s, top 0.3s;} #timeline .case-track .case-wrap .case-item[data-level="0"] {top: 20px;} #timeline .case-track .case-wrap .case-item[data-level="0"]::before {content:""; display: block; position: absolute; top: calc(100% + 2px); left: calc(50% - 0.5px); width: 1px; height: 600px; background-color: #999999;} #timeline .case-track .case-wrap .case-item[data-level="1"] {top: calc(50% + 10px);} #timeline .case-track .case-wrap .case-item.type-a {border-color: #E27D60;} #timeline .case-track .case-wrap .case-item.type-b {border-color: #C38D9E;} #timeline .case-track .case-wrap .case-item.type-c {border-color: #41B3A3;} #timeline .case-track .case-wrap .case-item.type-d {border-color: #85CDCA;} #timeline .case-track .case-wrap .case-item.type-e {border-color: #E8A87C;} #timeline .case-track .case-wrap .case-item.type-a .status {background-color: #E27D60;} #timeline .case-track .case-wrap .case-item.type-b .status {background-color: #C38D9E;} #timeline .case-track .case-wrap .case-item.type-c .status {background-color: #41B3A3;} #timeline .case-track .case-wrap .case-item.type-d .status {background-color: #85CDCA;} #timeline .case-track .case-wrap .case-item.type-e .status {background-color: #E8A87C;} #timeline .case-track .case-wrap .case-item.type-a .con-box .title-box .date {color: #E27D60;} #timeline .case-track .case-wrap .case-item.type-b .con-box .title-box .date {color: #C38D9E;} #timeline .case-track .case-wrap .case-item.type-c .con-box .title-box .date {color: #41B3A3;} #timeline .case-track .case-wrap .case-item.type-d .con-box .title-box .date {color: #85CDCA;} #timeline .case-track .case-wrap .case-item.type-e .con-box .title-box .date {color: #E8A87C;} #timeline .case-track .case-wrap .case-item .con-box .title-box .count {transition: border 0.3s, background 0.3s, color 0.3s;} #timeline .case-track .case-wrap .case-item.type-a .con-box .title-box .count:focus, #timeline .case-track .case-wrap .case-item.type-a .con-box .title-box .count:hover {border-color: #E27D60; background-color: #E27D60; color: #ffffff;} #timeline .case-track .case-wrap .case-item.type-b .con-box .title-box .count:focus, #timeline .case-track .case-wrap .case-item.type-b .con-box .title-box .count:hover {border-color: #C38D9E; background-color: #C38D9E; color: #ffffff;} #timeline .case-track .case-wrap .case-item.type-c .con-box .title-box .count:focus, #timeline .case-track .case-wrap .case-item.type-c .con-box .title-box .count:hover {border-color: #41B3A3; background-color: #41B3A3; color: #ffffff;} #timeline .case-track .case-wrap .case-item.type-d .con-box .title-box .count:focus, #timeline .case-track .case-wrap .case-item.type-d .con-box .title-box .count:hover {border-color: #85CDCA; background-color: #85CDCA; color: #ffffff;} #timeline .case-track .case-wrap .case-item.type-e .con-box .title-box .count:focus, #timeline .case-track .case-wrap .case-item.type-e .con-box .title-box .count:hover {border-color: #E8A87C; background-color: #E8A87C; color: #ffffff;} #timeline .case-track .case-wrap .case-item.type-a .con-box .ctr-box .list > li .btn-ctr .count {background-color: #E27D60;} #timeline .case-track .case-wrap .case-item.type-b .con-box .ctr-box .list > li .btn-ctr .count {background-color: #C38D9E;} #timeline .case-track .case-wrap .case-item.type-c .con-box .ctr-box .list > li .btn-ctr .count {background-color: #41B3A3;} #timeline .case-track .case-wrap .case-item.type-d .con-box .ctr-box .list > li .btn-ctr .count {background-color: #85CDCA;} #timeline .case-track .case-wrap .case-item.type-e .con-box .ctr-box .list > li .btn-ctr .count {background-color: #E8A87C;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box.fold .btn-ctr-acrdn::before {border-width: 2px 0 0 2px;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box.fold .list {display: none;} /* @keyframes caseFadeIn { 0% { opacity: 0; transform: translateX(-90px) translateY(20px); } 100% { opacity: 1; transform: translateX(-90px) translateY(0); } } */ /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 600px) { #timeline .case-track .case-wrap {min-height: 400px; height: 50vh; background-size: 40px;} #timeline .case-track .case-wrap .case-item {transform: translateX(-70px);} #timeline .case-track .case-wrap .case-item .con-box .title-box {padding: 10px 5px;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .btn-ctr-acrdn {padding: 0 25px 0 5px;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .btn-ctr-acrdn::before {right: 8px;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li .btn-ctr {padding: 5px;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li .btn-ctr .tit {font-size: 12px;} #timeline .case-track .case-wrap .case-item .con-box .ctr-box .list > li .btn-ctr .count {font-size: 12px;} } /*------------------------------------------------------------------- 분류그룹 : body > Date Track 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-body .tl-track .date-track {display: block; position: relative; border-top: 1px solid #e9e9e9;} #timeline .tl-body .tl-track .date-track .unit-wrap {display: block;} #timeline .tl-body .tl-track .date-track .unit-wrap .date-unit {display: block; position: absolute; top: 0; border-top: 2px solid #141414; line-height: 18px; font-weight: 600; font-size: 14px; color: #141414; text-align: center;} #timeline .tl-body .tl-track .date-track .btn-case-wrap {display: block; overflow-x: visible; overflow-y: auto; position: relative;} #timeline .tl-body .tl-track .date-track .btn-case-wrap::-webkit-scrollbar {width: 8px; height: 8px; box-sizing: content-box;} #timeline .tl-body .tl-track .date-track .btn-case-wrap::-webkit-scrollbar-thumb {height: 30%; border-radius: 8px; background: #003863;} #timeline .tl-body .tl-track .date-track .btn-case-wrap::-webkit-scrollbar-track {padding: 0 5px; background: #e4e4e4;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case {display: block; position: absolute; width: 50px; height: 10px; margin-bottom: 10px; border-radius: 5px;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case::before {content:""; position: absolute; top: 2.5px; left: calc(50% - 7px); border-width: 0 7px 5px 7px; border-style: solid; border-color: transparent transparent #ffffff transparent;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case:last-child {margin-bottom: 0;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case {visibility: visible; transition: visibility 0s 0s, top 0.3s, height 0.3s, margin 0.3s;} /* #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.active {height: 20px;} */ #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case::before {visibility: hidden; opacity: 0; transform: translateY(10px); transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.active::before {visibility: visible; opacity: 1; transform: translateY(0); transition: visibility 0s 0s, top 0.3s, opacity 0.3s, transform 0.3s;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.type-a {background-color: #E27D60;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.type-b {background-color: #C38D9E;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.type-c {background-color: #41B3A3;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.type-d {background-color: #85CDCA;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.type-e {background-color: #E8A87C;} #timeline .tl-body .tl-track .date-track .btn-case-wrap .btn-case.hide {visibility: hidden; top: 0 !important; height: 0; margin-bottom: 0; transition: visibility 0s 0.3s, height 0.3s, margin 0.3s;} /*------------------------------------------------------------------- 분류그룹 : body > track Nav 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-body .tl-track-nav {display: block; position: absolute; top: 50%; left: 0; width: 100%;} #timeline .tl-body .tl-track-nav .btn-track {display: block; position: absolute; top: -30px; width: 60px; height: 60px; border-radius: 50%; background-color: #F3F5F9; box-shadow: 0 0 8px 2px rgba(0,0,0,0.2);} #timeline .tl-body .tl-track-nav .btn-track::before {content:""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-style: solid; border-color: #141414; transform: translate(-50%, -50%) rotate(45deg);} #timeline .tl-body .tl-track-nav .btn-track.btn-track-prev {left: -20px;} #timeline .tl-body .tl-track-nav .btn-track.btn-track-prev::before {left: calc(50% + 2px); border-width: 0 0 3px 3px;} #timeline .tl-body .tl-track-nav .btn-track.btn-track-next {right: -20px;} #timeline .tl-body .tl-track-nav .btn-track.btn-track-next::before {left: calc(50% - 2px); border-width: 3px 3px 0 0;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #timeline .tl-body .tl-track-nav {visibility: visible; opacity: 1; transition: visibility 0s 0s, background 0.3s, opacity 0.3s;} #timeline .tl-body .tl-track-nav.hide {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, background 0.3s, opacity 0.3s;} #timeline .tl-body .tl-track-nav .btn-track {visibility: visible; opacity: 1; transition: visibility 0s 0s, background 0.3s, opacity 0.3s;} #timeline .tl-body .tl-track-nav .btn-track:focus, #timeline .tl-body .tl-track-nav .btn-track:hover {background-color: #003863;} #timeline .tl-body .tl-track-nav .btn-track::before {transition: border 0.3s;} #timeline .tl-body .tl-track-nav .btn-track:focus::before, #timeline .tl-body .tl-track-nav .btn-track:hover::before {border-color: #ffffff;} #timeline .tl-body .tl-track-nav .btn-track.hide {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, background 0.3s, opacity 0.3s;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1024px) { #timeline .tl-body .tl-track-nav .btn-track {width: 45px; height: 45px;} } @media screen and (max-width: 600px) { #timeline .tl-body .tl-track-nav .btn-track {width: 30px; height: 30px;} #timeline .tl-body .tl-track-nav .btn-track::before {width: 8px; height: 8px; border-width: 2px;} #timeline .tl-body .tl-track-nav .btn-track.btn-track-prev {left: -10px;} #timeline .tl-body .tl-track-nav .btn-track.btn-track-prev::before {border-width: 0 0 2px 2px;} #timeline .tl-body .tl-track-nav .btn-track.btn-track-next {right: -10px;} #timeline .tl-body .tl-track-nav .btn-track.btn-track-next::before {border-width: 2px 2px 0 0;} } /*------------------------------------------------------------------- 분류그룹 : body > btn Nav 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-body .tl-btn-nav {display: block; position: absolute; bottom: 10px; right: -20px; height: 200px;} #timeline .tl-body .tl-btn-nav .btn-nav {display: block; position: absolute; right: 0; width: 20px; height: 20px; border-radius: 50%; background-color: #F3F5F9; box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);} #timeline .tl-body .tl-btn-nav .btn-nav::before {content:""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-style: solid; border-color: #141414; transform: translate(-50%, -50%) rotate(45deg);} #timeline .tl-body .tl-btn-nav .btn-nav.btn-nav-prev {top: 0;} #timeline .tl-body .tl-btn-nav .btn-nav.btn-nav-prev::before {border-width: 2px 0 0 2px;} #timeline .tl-body .tl-btn-nav .btn-nav.btn-nav-next {bottom: 0;} #timeline .tl-body .tl-btn-nav .btn-nav.btn-nav-next::before {border-width: 0 2px 2px 0;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #timeline .tl-body .tl-btn-nav {visibility: visible; opacity: 1; transition: visibility 0s 0s, background 0.3s, opacity 0.3s;} #timeline .tl-body .tl-btn-nav.hide {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, background 0.3s, opacity 0.3s;} #timeline .tl-body .tl-btn-nav .btn-nav {transition: background 0.3s;} #timeline .tl-body .tl-btn-nav .btn-nav:focus, #timeline .tl-body .tl-btn-nav .btn-nav:hover {background-color: #003863;} #timeline .tl-body .tl-btn-nav .btn-nav::before {transition: border 0.3s;} #timeline .tl-body .tl-btn-nav .btn-nav:focus::before, #timeline .tl-body .tl-btn-nav .btn-nav:hover::before {border-color: #ffffff;} #timeline .tl-body .tl-btn-nav .btn-nav.end {background-color: #F3F5F9;} #timeline .tl-body .tl-btn-nav .btn-nav.end:focus, #timeline .tl-body .tl-btn-nav .btn-nav.end:hover {background-color: #F3F5F9;} #timeline .tl-body .tl-btn-nav .btn-nav.end::before {border-color: #cecece;} #timeline .tl-body .tl-btn-nav .btn-nav.end:focus::before, #timeline .tl-body .tl-btn-nav .btn-nav.end:hover::before {border-color: #cecece;} /*------------------------------------------------------------------- 분류그룹 : loading 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #timeline .tl-loading {display: none; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);} #timeline .tl-loading .con-box {position: absolute;top: 50%;left: 50%; max-width: 400px; width:100%; padding: 30px 20px; border-radius: 7px; background-color: #fff; transform: translate(-50%, -50%); } #timeline .tl-loading .spinner {display: flex;} #timeline .tl-loading .spinner .icon {display:block; width: 64px; height: 64px; margin: 0 auto; border: 8px solid transparent; border-color: #ececec; border-top-color: #4D72BE; border-radius: 50%; animation: spinner .8s ease infinite;} #timeline .tl-loading .tit {display: block; margin-top: 15px; font-weight:700; font-size: 18px; text-align: center; color: #4D72BE;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #timeline .tl-loading.active {display: block;} @keyframes spinner { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }