@charset "utf-8";
/* CSS Document */

.panel-top{margin-top: 1.3em;}
.panel-title{font-size: 1.5em; font-weight:700;}
.O365-price{color: rgba(236,24,28,1.00); font-size: 2.5em; font-weight:900; }
.icon-group{height:75px;}
.O365-img{width:13%; margin-top: 5px;}
.O365-p{padding:0 1em;}
#O365-Comparing table tr:nth-child(odd){background-color: #eee;}


.maskItem{
  position: absolute;
	/* bottom: 25px; */
	bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 60%;
  padding-bottom: 10%;
  
  text-align: center;
  background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));
  background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
}

.addbtn{
	z-index: 100;
	position: relative;
}
.itemRow .list-group{
	max-height: 50vh;
	overflow: hidden;
}

.itemRow .list-group.default{
	max-height: none;
	overflow: auto;
}

[v-cloak] {
  display: none;
}

/* SSLProcess */
.arrow-box, .no-arrow {
			position: relative;
			border: 4px solid #e2e2f0;
			margin-bottom: 1.2em;
			padding:.5em 1em;
		}
		.arrow-bgA{background: #7779ae;}
		.arrow-bgB{background: #9597c8;}
		.arrow-bgC{background: #b6b7e0;}
		.arrow-bgD{background: #cacbea;}
		.arrow-bgE{background: #e0e1f1;}
		
		.arrow-box:after, .arrow-box:before {
			top: 100%;
			left: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}

		.arrow-box:after {
			border-color: rgba(136, 183, 213, 0);
			border-width: 15px;
			margin-left: -15px;
		}
		/*三角形顏色*/
		.arrow-boxA:after {border-top-color: #7779ae;}
		.arrow-boxB:after {border-top-color: #9597c8;}
		.arrow-boxC:after {border-top-color: #b6b7e0;}
		.arrow-boxD:after {border-top-color: #cacbea;}
		
		.arrow-box:before {
			border-color: rgba(194, 225, 245, 0);
			border-top-color: #e2e2f0;/*三角形外框顏色*/
			border-width: 21px;
			margin-left: -21px;
    }
    
/* SSLProcess */



.itemRow {
	display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.itemRow > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

@media(min-width:767px){
.panel-body p{height: 80px;}
}

