/* • for inside page 2 cols
   ------------------------------------------------------------------------- */
   	#body .artical-col1			{ width:15%; float:left;}
   	#body .artical-col2			{ width:85%; float:left;}
  
   	#body .artical-col1 .ac-pos 			       { padding:0 50px 0 0; text-align:center; float:right}
   	#body .artical-col1 .ac-pos .btn-back 	 { width:100px; height:100px; display:table-cell; vertical-align:middle; background-color:#ececec; cursor:pointer; transition: all 0.3s ease-out;
                    											   	-webkit-border-radius: 100px;
                    												     -moz-border-radius: 100px;
                    														      border-radius: 100px;}

   	#body .artical-col2 .ac-title-blk			      { width:calc(100% - 60px) ; padding:20px 30px; color:#fff; margin-bottom:50px}
  	/*
          #body .artical-col2 .ac-title-blk .ac-date	{ font-family: 'Raleway-Bold';}
    */
   	#body .artical-col2 .ac-content-pos			    { padding:0px 30px 50px 30px}

    #body .artical-col1 .ac-pos .btn-back .icon-left-open-big       { font-size:50px; color:#999; transition: all 0.3s ease-out;}
    #body .artical-col1 .ac-pos .btn-back:hover .icon-left-open-big { font-size:40px; color:#ec2a74;}
    #body .artical-col1 .ac-pos .btn-back:hover   { background-color:#fff0f6;}

    #body .artical-col1 .ac-pos .btn-back .icon-left-open-big .txt   { display:none}


 	/* • General content
   	------------------------------------------------------------------------- */
   	#body .general {}
   	#body .general img 		{ width:100%; height:auto;}
   	#body .general a      	{ color:#ec2a74; text-decoration:underline;  transition: all 0.3s ease-out;}
   	#body .general a:hover  { color:#951244; text-decoration:underline;}
   	#body .general hr 		{ height:1px; background-color:#e7e7e7; border:none; margin:2% 0;}
  

  	/* • General template - color table style */
  	#body .general table.gen        	{ text-align:left; vertical-align:top;}
  	#body .general table.gen th     	{ background-color:#ec2a74; padding:10px 20px; color:#fff; text-align:left; vertical-align:top; font-weight:normal;  }
  	#body .general table.gen tr.even td { background-color:#dbdbdb; padding:10px 20px; border-bottom:1px solid #fff; text-align:left; vertical-align:top; }
  	#body .general table.gen tr.odd td  { background-color:#e7e7e7; padding:10px 20px; border-bottom:1px solid #fff; text-align:left; vertical-align:top; }


  	/* • General template - Grey box & color box */
    #body .general .greyBox   { background-color:#ededed; padding:20px; }
  	#body .general .colorBox  { background-color:#ec2a74; padding:20px; color:#fff;}
  	#body .general .colorBox a 			{ color:#fff}
   	#body .general .colorBox a:hover  	{ color:#951244}

  	/* • General template - left content, right photo */
  	#body .content-left      		{}
  	#body .content-left img     	{ margin-top:8px}
  	#body .content-left .cl-left 	{ width:67%; float:left; padding-right:3%; max-height:999999px} 
  	#body .content-left .cl-right	{ width:30%; float:left} 


  	/* • General template - left photo, right content */
  	#body .content-right       		{}
 	  #body .content-right img      	{ margin-top:8px}
  	#body .content-right .cr-left 	{ width:30%; float:left} 
  	#body .content-right .cr-right	{ width:67%; float:left; padding-left:3%;} 


  	/* • General template - ul li */
  	#body .general ul   	{ margin:0px; padding:10px 0px; text-indent:0;}
  	#body .general ul li  	{ margin:0px 0px 0px 30px; padding:0; line-height:1.8; list-style-type:disc;}

  	#body .caption { margin-top:10px; line-height:1.6;}


  	/* • 2 col responsive table */
  	#body .general .col2-table-row 					{ display:table; table-layout:fixed; height:100%; width:100%;}
  	#body .general .col2-table-row .table-col 		{ display:table-cell; float:none; height:100%; padding:10px; border-bottom:1px solid #fff; vertical-align:top;}
  	#body .general .col2-table-row:nth-child(odd) 	{ background-color:#dbdbdb}
  	#body .general .col2-table-row:nth-child(even) 	{ background-color:#e7e7e7}
  	#body .general .col2-table-row .field   		{ text-align:right; width:25%; background-color:#ec2a74; color:#fff;} 
 	  #body .general .col2-table-row .detail  		{ width:75%}
  


    /* • 50% photo and content */
    #body .general .halfcol-l	{ width:calc(50% - 1.5%); float:left; padding-right:1.5%}
    #body .general .halfcol-r	{ width:calc(50% - 1.5%); float:left; padding-left:1.5%}




	/* ==========================================================================
		Media Style
	============================================================================= */
 
  	@media only screen and (max-width: 1024px) {

   /* • for inside page 2 cols
   ------------------------------------------------------------------------- */
   	#body .artical-col1			{ width:100%; float:left;}
   	#body .artical-col2			{ width:100%; float:left;}

   	#body .artical-col1 .ac-pos 			       { padding:0 0 0 0; text-align:left; float:left; width:100%; margin-bottom:10px}
   	#body .artical-col1 .ac-pos .btn-back 	 { width:auto; height:auto; display:block; vertical-align:top;  padding:5px 0;
                											   	       -webkit-border-radius: 0px;
                												            -moz-border-radius: 0px;
                														             border-radius: 0px;}

    #body .artical-col1 .ac-pos .btn-back .icon-left-open-big,
    #body .artical-col1 .ac-pos .btn-back:hover .icon-left-open-big       { font-size:20px;}
    #body .artical-col1 .ac-pos .btn-back .icon-left-open-big .txt        { display:inline-block; font-size:14px; line-height:normal; top:-2px;}



   	#body .artical-col2 .ac-title-blk		   { width:calc(100% - 30px) ; padding:10px 15px; margin-bottom:25px}
   	#body .artical-col2 .ac-content-pos		 { padding:0 15px 25px 15px}


   /* • General
   ------------------------------------------------------------------------- */
  	#body .general .col2-table-row { display:block; table-layout:inherit; width:100%; height:100%; border:none}
  	#body .general .col2-table-row .table-col { display:block; float:inherit; height:100%; padding:inherit; border-bottom:none;}
  	#body .general .col2-table-row .field   { width:calc(100% - 40px); padding:10px 20px; text-align:left; line-height:1.4} 
  	#body .general .col2-table-row .detail  { width:calc(100% - 40px); padding:10px 20px;}
  	#body .general .col2-table-row:nth-child(odd)  { background-color:#dbdbdb}
  	#body .general .col2-table-row:nth-child(even) { background-color:#dbdbdb}

  	#body .general ul   			{ text-indent:inherit; padding-left:20px}
  	#body .general ul li  			{ margin:0; padding:0; line-height:1.8; list-style-type:disc;}
  	#body .general ul li:before  	{ content: ""; color:inherit; padding-right:0;}

  	#body .general .greyBox   		{ padding:20px;}
  	#body .general .colorBox  		{ padding:20px;}

 	  #body .content-pos 				{ padding:0 20px;}
  	#body .content-pos .right-col .rc-pos 	{ padding:20px 0px 50px 0px}
  	#body .content-left .cl-left 			{ width:100%; float:left; margin-bottom:20px} 
  	#body .content-left .cl-right			{ width:100%; float:left;} 
  	#body .content-right .cr-left 			{ width:100%; float:left;  margin-bottom:20px} 
	  #body .content-right .cr-right			{ width:100%; float:left; padding-left:0;} 


    #body .general .halfcol-l	{ width:100%; padding-right:0; margin-bottom: 25px}
    #body .general .halfcol-r	{ width:100%; padding-left:0}

	 }

	@media only screen and (max-width: 745px) {
  	#body .general .col2-table-row .field   { width:calc(100% - 40px); padding:10px 20px;} 
  	#body .general .col2-table-row .detail  { width:calc(100% - 40px); padding:10px 20px;}

  	#body .general .greyBox   		{ padding:20px 20px;}
  	#body .general .colorBox  		{ padding:20px 20px;}

	}