@charset "utf-8";
/* CSS Document */
.slack{color: #2B2B2B!important;}
.slack .banner{margin: 80px 0px 50px;background-image: url("../img/micrt-banner-back.png");background-repeat: no-repeat;background-size: cover;min-height: 600px;text-align: center;}
.slack .banner img{margin: 95px 0px 40px;}
.slack .banner .banner-title{font-family: o-semibold;font-size: 44px;color: #2B2B2B;margin-bottom: 30px;}
.slack .banner .banner-title span{color: #E01E5A;}
.slack .banner .banner-para{font-size: 18px;color: #2B2B2B;font-family: o-regular;}
/*Why integrated*/
.slack .micro-why{background-color: #F7F5FC;padding: 40px 0px;}
.slack .micro-why .micro-why-title{font-family: o-semibold;font-size: 44px;text-align: center;margin: 30px 0px 40px;}
.slack .micro-why .micro-grid-title{margin-left: 30px;font-size: 24px;font-family: l-bold}
.slack .micro-why .micro-grid img{width: 70px;}
.slack .micro-why .micro-grid {display: flex;align-items: center;}
.slack .micro-why .micro-grid-para {margin-top: 25px;font-size: 18px;font-family: l-regular;line-height: 30px;}
.slack .micro-why .why-grid {min-height: 255px;background-color: #FFFFFF;border-radius: 25px;padding: 25px;margin-bottom: 25px;border: 1px solid #fff;}
.slack .micro-why .why-in .col-md-6:first-child .why-grid:hover {border: 1px solid rgba(242, 178, 96);box-shadow: rgba(242, 178, 96, 0.2) 0px 20px 25px -5px, rgba(242, 178, 96, 0.04) 0px 10px 10px -5px;}
.slack .micro-why .why-in-one .col-md-6:first-child .why-grid:hover {border: 1px solid rgba(171, 106, 254);box-shadow: rgba(171, 106, 254, 0.2) 0px 20px 25px -5px, rgba(242, 178, 96, 0.04) 0px 10px 10px -5px;}
.slack .micro-why .why-in .col-md-6:nth-child(2) .why-grid:hover {border: 1px solid rgba(101, 234, 210);box-shadow: rgba(101, 234, 210, 0.2) 0px 20px 25px -5px, rgba(242, 178, 96, 0.04) 0px 10px 10px -5px;}
.slack .micro-why .why-in-one .col-md-6:nth-child(2) .why-grid:hover {border: 1px solid rgba(164, 215, 119);box-shadow: rgba(164, 215, 119, 0.2) 0px 20px 25px -5px, rgba(242, 178, 96, 0.04) 0px 10px 10px -5px;}
/*OKR Must*/
.slack .okr-must{margin: 80px 0px 40px;}
.slack .okr-must p, .okr-must li {font-family: o-regular;font-size: 18px;}
.slack .okr-must .okr-must-title{font-family:  o-semibold;color: #5A4D9F;margin: 40px 0px;}
.slack .okr-must .first-must li:nth-child(2), .okr-must li:nth-child(3), .okr-must li:nth-child(4), .okr-must li:nth-child(5){margin-left: 20px;}
.slack .okr-must .first-must li{line-height: 30px;}
.slack .okr-must .microsoft-setting{margin: 40px 0px 50px;}
.slack .okr-must .microsoft-app{margin: 50px 0px 40px;}
/*Real Time*/
.slack .real-time{background-color: #F7F5FC;padding: 80px 0px;margin-bottom: -70px;}
.slack .real-time .real-time-grid{background-color: #fff;padding: 30px 20px;border-radius: 25px;min-height: 240px;border: 1px solid #fff;}
.slack .real-time .real-title{font-family: o-medium;font-size: 28px;}
.slack .real-time .real-time-grid a{color: #2B2B2B;font-family: o-medium;text-decoration: none;font-size: 24px;float: left;}
.slack .real-time .real-time-grid:hover a{border-bottom:2px solid #5a4d9f !important;color: #5a4d9f;}
.slack .real-time .real-time-grid a {border-bottom:2px solid #fff !important;}
.slack .real-time .real-time-grid:hover .micro-double-arrow-hover{display: block;position: relative;top: 4px;left: 10px;}
.slack .real-time .real-time-grid .micro-double-arrow-hover{display: none;}
.slack .real-time .real-time-grid .micro-double-arrow{display: block;position: relative;top: 4px;left: 10px;}
.slack .real-time .real-time-grid:hover .micro-double-arrow{display: none;}
.slack .real-time .real-time-grid .micro-bell-hover{display: none;}
.slack .real-time .real-time-grid .micro-cloc-hover{display: none;}
.slack .real-time .real-time-grid:hover .micro-cloc-hover{display: block;}
.slack .real-time .real-time-grid:hover .micro-bell-hover{display: block;}
.slack .real-time .real-time-grid:hover .micro-bell{display: none;}
.slack .real-time .real-time-grid:hover .micro-cloc{display: none;}
.slack .real-time .real-time-grid:hover {border: 1px solid transparent;border-radius: 25px;background:linear-gradient(#fff, #fff) padding-box,linear-gradient(180deg,rgb(167, 181, 255),rgb(243, 172, 255)) border-box;}
@media (min-width: 320px) and (max-width:767px) {
.slack .banner .container, .slack .micro-why .container, .slack .okr-must .container, .slack .real-time .container{width: 100%;max-width: 100%;padding: 0 30px;}
.slack .banner img {width: 100%;}
.slack .banner .banner-title, .slack .micro-why .micro-why-title{font-size: 36px;}
.slack .real-time .real-title, .slack .real-time .real-time-grid a {font-size: 22px;}
.slack .real-time .real-time-grid {min-height: 185px;}
.slack .banner .banner-para {font-size: 16px;color: #2B2B2B;}
.slack .col-md-6{width: 100%;}
.slack .okr-must .microsoft-setting {width: 100%;}
.slack .okr-must .microsoft-app {width: 100%;}
.slack .real-time .col-md-6{width: 100%;margin-bottom: 30px;}
	.slack .micro-why .why-grid {
  min-height: auto;
}
@media (min-width: 768px) and (max-width:991px) {
.slack .okr-must .microsoft-setting {width: 100%;}
.slack .okr-must .microsoft-app {width: 100%;}
.slack .micro-why .why-grid {min-height: 290px;}
.slack .real-time .real-time-grid {min-height: 325px;}
}
@media (min-width: 992px) and (max-width:1199px) {
.slack .okr-must .microsoft-setting {width: 100%;}
.slack .okr-must .microsoft-app {width: 100%;}
}