【JIN】インフォメーションバーを2つにするカスタマイズ

1. /************************************
2. ** インフォバーを2つにする
3. ************************************/
4. .cps-info-bar{
5. display:-webkit-box;
6. display:-ms-flexbox;
7. display:flex;
8. }
9. .cps-info-bar a{
10. display:-webkit-box !important;
11. display:-ms-flexbox !important;
12. display:flex !important;
13. -webkit-box-pack: center;
14. -ms-flex-pack: center;
15. justify-content: center;
16. -webkit-box-align: center;
17. -ms-flex-align: center;
18. align-items: center;
19. }
20. .cps-info-bar a:first-child{
21. border-right: 1px solid #fff;
22. }
23. .cps-info-bar a:last-child{
24. /* background:#ccc !important; */
25. }
26. .cps-info-bar a span:after, .cps-info-bar.animate a span:after {
27. right: -20px;
28. }
29. @media screen and (max-width: 767px){
30. .cps-info-bar a, .cps-info-bar.animate a {
31. padding: 6px 30px;
32. position:relative;
33. }
34. .cps-info-bar:after, .cps-info-bar.animate:after {
35. content:unset;
36. }
37. .cps-info-bar a:after, .cps-info-bar.animate a:after {
38. position: absolute;
39. font-family: "jin-icons";
40. content: "\e910";
41. color: #fff !important;
42. right: 29px;
43. top: -2px;
44. bottom: 0;
45. margin-top: auto;
46. margin-bottom: auto;
47. width: 0;
48. height: 15px;
49. }
50. .cps-info-bar.animate a:after {
51. animation-name: cps-info-icon-animate;
52. animation-duration: 1.7s;
53. animation-delay: 1.4s;
54. animation-fill-mode: forwards;
55. animation-timing-function: ease;
56. animation-iteration-count: infinite;
57. filter: opacity(1);
58. z-index: 4;
59. }
60. }

/************************************
** インフォバーを2つにする
************************************/
.cps-info-bar{	
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.cps-info-bar a{
    display:-webkit-box !important;
    display:-ms-flexbox !important;
    display:flex !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.cps-info-bar a:first-child{
    border-right: 1px solid #fff;
}
.cps-info-bar a:last-child{
    /* background:#ccc !important;  */
}
.cps-info-bar a span:after, .cps-info-bar.animate a span:after {
    right: -20px;
}
@media screen and (max-width: 767px){
    .cps-info-bar a, .cps-info-bar.animate a {
    	padding: 6px 30px;
    	position:relative;
    }
    .cps-info-bar:after, .cps-info-bar.animate:after {
    	content:unset;
    }
    .cps-info-bar a:after, .cps-info-bar.animate a:after {
    	position: absolute;
    	font-family: "jin-icons";
    	content: "\e910";
    	color: #fff !important;
    	right: 29px;
    	top: -2px;
    	bottom: 0;
    	margin-top: auto;
    	margin-bottom: auto;
    	width: 0;
    	height: 15px;
    }
    .cps-info-bar.animate a:after {
    	animation-name: cps-info-icon-animate;
    	animation-duration: 1.7s;
    	animation-delay: 1.4s;
    	animation-fill-mode: forwards;
    	animation-timing-function: ease;
    	animation-iteration-count: infinite;
    	filter: opacity(1);
    	z-index: 4;
    }
}