/* • intro blk
   	------------------------------------------------------------------------- */
   	#body .intro-blk						{ width:100%; margin-bottom:40px }
   	#body .intro-blk .intro-pos				{ padding:20px 30px}
   	#body.en .intro-blk .intro-pos	.intro-col	{ float:left; }
   	#body.cn .intro-blk .intro-pos	.intro-col	{ float:left; }
    #body .intro-blk .intro-pos	.intro-desc		{ font-size: 28px;line-height:normal;/*font-family: 'Raleway'*/}

	/* • promotion blk
   	------------------------------------------------------------------------- */
	#body .promo-blk 					{ display:table; table-layout:fixed; height:100%; width:100%; margin-bottom:10px; background-color:#ececec;  transition: all 0.3s ease-out; cursor:pointer; }
	#body .promo-blk .col-sm			{ display:table-cell; float:none; height: 100%; vertical-align:top; }
	#body .promo-blk .col-sm.col-l 	{ width:45%;  transition: all 0.3s ease-out; }
	#body .promo-blk .col-sm.col-r 	{ width:55%;  transition: all 0.3s ease-out; }
	#body .promo-blk .col-sm.col-r .category 	{ position:absolute; top:0; right:0; padding:5px 10px; font-weight:bold; }
	#body .promo-blk .col-sm.col-r .col-pos 	{ padding:30px}
	#body .promo-blk .col-sm.col-r .intro 		{ padding-top:5px;}

	#body .promo-blk:hover { background-color: #fff0f6}
	#body .promo-blk:hover img {  -webkit-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);
									 -moz-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);
										  box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);}
	
	
	/* svg mask */
	#body .svgMask-2 				{ width:20%; padding-bottom:calc(20% / 758 * 824); position:absolute; bottom:0; right:30px; animation: bubble2inf 8s infinite ease-in-out 0s; }
	#body .svgMask-2 .big-bubble		{ position:absolute; top:0; left:0; width:100%; height:100%; }
	
	@keyframes bubble2inf			{ 0%   	{ transform: translate(0px, 0px);			   } 
									  20% 	{ transform: translate(8px, 0px); 		       }
									  40%	{ transform: translate(-8px, 0px); 		       }
									  60%	{ transform: translate(8px, -0.5px);		   } 
									  80%	{ transform: translate(-8px, 0.5px); 		   } 
									  100%	{ transform: translate(0px, 0px); 	 		   } 
									 }	
	

      /* • Pagination
     ------------------------------------------------------------------------- */
	#body .pagination { padding:0 20px; text-align:right; color:#666;
	                  -webkit-border-bottom-left-radius: 20px;
	                      -moz-border-radius-bottomleft: 20px;
	                          border-bottom-left-radius: 20px; background-color:#ececec}
   
    #body .pagination input [type=text] { width: 25px; margin:0 10px; padding: 15px 10px; border:none; outline:none; color:#fff}
    #body .pagination .fa-angle-left    { padding:0 20px 0 0; font-size:18px; line-height:normal; vertical-align:middle; }
    #body .pagination .fa-angle-right   { padding:0 0 0 20px; font-size:18px; line-height:normal; vertical-align:middle; }

    #body .pagination .fa:hover { cursor:pointer; color:#ccc; transition: all 0.3s ease-out; }

    #body .page       { width:25px; margin:0 10px; padding: 15px 10px;
                  		border:none; outline:none; background-color:#ccc; transition: all 0.3s ease-out;}
    #body .page:focus { background-color:#dedede; color:#ec2a74;}

	/* ==========================================================================
		Media Style
	============================================================================= */

	@media only screen and (max-width: 1024px) {
   	#body .intro-blk .intro-pos				{ padding:15px 20px }
   	#body.en .intro-blk .intro-pos	.intro-col	{ width:75%; }
   	#body.cn .intro-blk .intro-pos	.intro-col	{ width:75%; }
	#body .svgMask-2 						{ width:20%; }
	
	#body .promo-blk 					{ margin-bottom:15px }
	#body .promo-blk .col-sm.col-r .col-pos 	{ padding:30px 20px;}
	#body .promo-blk .col-sm.col-r .category 	{ padding:3px 8px; font-weight:normal;}
	#body .promo-blk .col-sm.col-l 	{ width:50% }
	#body .promo-blk .col-sm.col-r 	{ width:50% }
    #body.en .intro-desc, #body.cn .intro-desc    		 { font-size:18px; line-height:normal;}
	}

	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
	#body.en .promo-blk .col-sm.col-r .category 	{ font-size:10px }
	#body .promo-blk .col-sm.col-l 	{ width:45% }
	#body .promo-blk .col-sm.col-r 	{ width:55% }
	#body .svgMask-2 	{ width:25%; padding-bottom: calc(25% / 758 * 824); }
	}

	@media only screen and (max-width: 745px) {
   	#body .intro-blk .intro-pos	.intro-col	{ width:100%; }
	#body .svgMask-2	{ display:none; }
   	#body.en .intro-blk .intro-pos	.intro-col	{ width:100%;}
   	#body.cn .intro-blk .intro-pos	.intro-col	{ width:100%;}	

	#body .promo-blk .col-sm		{ display:block; float:left; height: auto; vertical-align:top}
	#body .promo-blk .col-sm.col-l 	{ width:100% }
	#body .promo-blk .col-sm.col-r 	{ width:100% }
	#body .promo-blk .col-sm.col-r .category 	{ width:calc(100% - 40px); left:0; padding:5px 20px; position:relative; }
	#body .promo-blk .col-sm.col-r .col-pos 	{ padding:15px 20px 15px 20px}

	}