.card-row   { width:calc(100% + 10px); margin-bottom:10px;
  					display: flex;
            display: -webkit-flex;
					  display: -webkit-box;
					  display: -moz-box;
					  display: -ms-flexbox;}


  	.card   	{ padding:50px 30px 50px 30px; background:#1a94bc; 
			           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
			           transition: 0.3s ease;
			          	flex-grow: 0;
			          flex-shrink: 1;
			           flex-basis: calc(25% - 10px);
  					    margin-bottom: 10px;
						margin-right: 10px;
						max-width: calc(25% - 10px);
                 margin-left:0}

  	.card:hover  {    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
					    transform: translateY(-10px) scale(1.02);}

	.card:hover .entry-title { background-position: -100% 0;}

	.card hr { height:1px; border:none; margin:20px 0}

  /* Safari 11+ */
    @media not all and (min-resolution:.001dpcm){
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
     .card {
        width:24.5%;
        margin-left:0.5%
      }
    }}

    /* Safari 10.1 */
    @media not all and (min-resolution:.001dpcm){ 
    @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
     .card {
        width:24.5%;
        margin-left:0.5%
      }
    }}

    /* Safari 6.1-10.0 (but not 10.1) */
    @media not all and (min-resolution:.001dpcm){ 
    @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
     .card {
        width:24.5%;
        margin-left:0.5%
      }
    }}
    



  	.entry-title {	text-transform:uppercase; margin-bottom:80px; font-size:26px; display:inline;
	  					   background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #022b4c 50%);
	    			  background-size: 200%;
	    		  background-position: 0 0;
				           transition: 0.5s ease-in-out;}

  	.entry-title a 			{ color:#fff; text-decoration:none}
  	.entry-title a:hover 	{ color:#fff; text-decoration:none}

  	small 	      { display:block; color:#333; text-transform:uppercase; font-size:12px; font-weight:800; line-height:1.4 }
  	small a       { font-weight:bold; color:#fff; text-decoration:none; }
    small .fa     { padding-right:5px}
  	.rp 		  { display:block; margin-top:5px; font-weight:700; color:#16a085; line-height:1.4}
    .rp  a 		  { color:#fff}
    .rp  a:hover  { color:#333; transition: all 0.3s ease-out;}

    .general .card hr 	{ margin:30px 0; background-color: rgba(255, 255, 255, 0.2);}  


	/* ==========================================================================
		Media
	============================================================================= */
  @media only screen and (max-width: 1400px) {
    #body.en .card h1  { font-size:26px;}
    #body.cn .card h1  { font-size:26px;}
  }

	@media only screen and (max-width: 1200px) {
  	.entry-title { font-size:16px; }
  	.card   	 { padding:10px 20px 50px 20px;}
  	small 		 { margin-top:20px; font-size:11px; font-weight:500  }
	.rp 		 { font-size:12px; font-weight:500}
    #body.en .card h1  { font-size:26px; font-weight:normal;}
    #body.cn .card h1  { font-size:26px; font-weight:normal;}

	}  	

  	@media only screen and (max-width: 1024px) {
    .card-row  { width:100%; margin-bottom:10px; display:block; gap: 0; margin-bottom:0;}
    .card      { padding:20px; width:100%;  max-width: none; flex-basis: 100%; margin-bottom:15px;box-shadow:none; box-shadow:2px 2px 5px 0px rgba(50, 50, 50, 0.16)!important}
  	small      { margin-top:0px; font-size:12px}
  	.entry-title  { font-weight:500; font-size:20px}
    .rp     	  { font-size:16px; font-weight:500}
    .general .card hr { margin:20px 0;}  
    #body.en .card h1  { font-size:24px; font-weight:normal;}
    #body.cn .card h1  { font-size:24px; font-weight:normal;}
    }

    @media only screen and (max-width: 1024px) {
    #body.en .card h1  { font-size:20px; font-weight:normal;}
    #body.cn .card h1  { font-size:20px; font-weight:normal;}
    }