.line-chat{display:flex;max-width:64rem;height:24rem;margin:auto;align-items:center;--color-orange: #fd893a;--color-green: #00A360;--color-blue: #2BBAE6;--color-purple: #F37DAA;--color-deep-purple: #7a4b92}.line-chat .line-chat-step{position:relative;width:25%}.line-chat .line-chat-step:nth-child(odd) .content{position:absolute;width:100%;top:2.5rem}.line-chat .line-chat-step:nth-child(2n) .content{position:absolute;width:100%;top:-10rem}.line-chat .line-chat-step:nth-of-type(1) .arrow{border-top-left-radius:99px;border-bottom-left-radius:99px}.line-chat .line-chat-step:nth-last-of-type(1) .arrow{border-top-right-radius:99px;border-bottom-right-radius:99px}.line-chat .line-chat-step .number{font-size:3.5rem;font-weight:700;line-height:1.25;width:100%;text-align:center}.line-chat .line-chat-step:nth-of-type(odd) .date{position:absolute;font-size:1rem;top:-7rem;width:100%;text-align:center}.line-chat .line-chat-step:nth-of-type(2n) .date{position:absolute;font-size:1rem;top:7rem;width:100%;text-align:center}.line-chat .line-chat-step .arrow{height:1.25rem}.line-chat .line-chat-step .number{font-family:Arial,Helvetica,sans-serif}.line-chat .line-chat-step .arrow:after{content:"";display:block;position:absolute;left:50%;transform:translate(-50%);width:40px;height:20px;background-color:inherit}.line-chat .line-chat-step .arrow-down:after{top:19px;clip-path:polygon(0 0,50% 100%,100% 0)}.line-chat .line-chat-step .arrow-up:after{top:-19px;clip-path:polygon(0 100%,52% 0,100% 100%)}.line-chat .line-chat-step .markup:before{content:"";width:1px;height:80px;display:block;background-color:#6c757d;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto}.line-chat .line-chat-step .markup:after{content:"";display:block;width:16px;height:16px;border-radius:50rem;position:absolute;background-color:inherit;left:0;right:0;margin-left:auto;margin-right:auto}.line-chat .arrow-down .markup:after{background-color:inherit}.line-chat .arrow-down .markup:before{bottom:20px}.line-chat .arrow-up .markup:before{top:20px}.line-chat .arrow-down .markup:after{top:-80px}.line-chat .arrow-up .markup:after{top:84px}.lc-bg-orange{background-color:var(--color-orange)}.lc-txt-orange{color:var(--color-orange)}.lc-bg-green{background-color:var(--color-green)}.lc-txt-green{color:var(--color-green)}.lc-bg-blue{background-color:var(--color-blue)}.lc-txt-blue{color:var(--color-blue)}.lc-bg-purple{background-color:var(--color-purple)}.lc-txt-purple{color:var(--color-purple)}.lc-bg-deep-purple{background-color:var(--color-deep-purple)}.lc-txt-deep-purple{color:var(--color-deep-purple)}@media screen and (max-width:768px){.line-chat{display:block;height:40rem;margin:auto;width:350px;position:relative;margin-top:2rem}.line-chat-5-column{height:50rem}.line-chat .line-chat-step{height:10rem;width:unset}.line-chat .line-chat-step .arrow{position:relative;width:1.25rem;height:100%;margin:auto}.line-chat .line-chat-step:nth-child(odd) .content{top:50%;transform:translateY(-50%);width:150px;text-align:center}.line-chat .line-chat-step:nth-child(2n) .content{top:50%;transform:translateY(-50%);left:210px;width:140px;text-align:center}.line-chat .line-chat-step:nth-of-type(1) .arrow{border-top-left-radius:99px;border-top-right-radius:99px;border-bottom-left-radius:0}.line-chat .line-chat-step:nth-last-of-type(1) .arrow{border-top-right-radius:0;border-bottom-left-radius:99px;border-bottom-right-radius:99px}.line-chat .line-chat-step .number{font-size:3.5rem;font-weight:700;line-height:1.25;width:100%;text-align:center}.line-chat .line-chat-step:nth-of-type(odd) .date{top:50%;transform:translateY(-50%);left:275px;width:80px;text-align:left}.line-chat .line-chat-step:nth-of-type(2n) .date{top:50%;transform:translateY(-50%);left:10px;width:70px;text-align:right}.line-chat .line-chat-step .number{font-family:Arial,Helvetica,sans-serif}.line-chat .line-chat-step .arrow:after{width:20px;height:40px}.line-chat .line-chat-step .arrow-down:after{clip-path:polygon(100% 0,0 50%,100% 100%);transform:translateY(-50%);left:-20px;top:50%}.line-chat .line-chat-step .arrow-up:after{clip-path:polygon(0 0,0 100%,100% 50%);transform:translateY(-50%);left:20px;top:50%}.line-chat .line-chat-step .markup:before{content:"";width:1px;height:80px;display:block;background-color:#6c757d;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto}.line-chat .line-chat-step .markup:after{content:"";display:block;width:16px;height:16px;border-radius:50rem;position:absolute;background-color:inherit;left:0;right:0;margin-left:auto;margin-right:auto}.line-chat .arrow-down .markup:after{background-color:inherit}.line-chat .arrow-down .markup:before{left:20px;height:1px;width:64px;top:50%}.line-chat .arrow-up .markup:before{left:-85px;height:1px;width:64px;top:50%}.line-chat .arrow-down .markup:after{top:50%;transform:translateY(-50%);left:80px}.line-chat .arrow-up .markup:after{top:50%;transform:translateY(-50%);left:-165px}}