#body.index.inside { }


   	/* Top (Left banner + search + right big logo)
   	=================================================== */
		.top-wrapper 				{ margin-left:-100px}
		.top-wrapper .left-col 		{ padding-right:0px}
	  	.top-wrapper .right-col 	{ top:0;}
	  	.top-wrapper .right-col .logo-drug-formulary 		{ width:100%; padding:0 40px; }
	  	.top-wrapper .right-col .logo-drug-formulary>img 	{ width:70%; height:auto; margin:auto auto;}
		#body.index.inside .top-wrapper .right-col			{ display:flex; justify-content:center; align-items:center;}

		#body.index.inside.theme1 img.rc-logo-theme1 { display:block;}
		#body.index.inside.theme2 img.rc-logo-theme1 { display:none;}

		#body.index.inside.theme1 img.rc-logo-theme2 { display:none;}
		#body.index.inside.theme2 img.rc-logo-theme2 { display:block;}

	   	/* Banner + Search
	   	------------------------------------------------------------------------- */
	   	.index-banner 	{ position:relative; z-index:5 }
	   	
	   	.index-search			{ position:relative; top:-44px; width:100%; z-index:10;}
	   	.is-inner 				{ position:relative}
	   	.is-absolute-center 	{ position:absolute; top:0; left:50%; transform: translate(-50%, 0);}
		.is-width 				{ z-index:5; width:70%; margin-top:-150px; }


	   	/* Search Box
	   	------------------------------------------------------------------------- */
		.main-search input:-webkit-autofill,
		.main-search input:-webkit-autofill:hover,
		.main-search input:-webkit-autofill:focus,
		.main-search input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #49a5b2 inset; color:#fff}

		.main-search ::placeholder 				{ color:#356793; opacity:1}
		.main-search :-ms-input-placeholder 	{ color:#356793;}
		.main-search ::-ms-input-placeholder 	{ color:#356793;}

		.main-search input[type=text],
		.main-search input[type=search] 	{  width:100%; height:60px; padding:8px 20px; border:none; outline:none; float:left;
		    			  					  font-family: 'Lexend Deca Regular', "Helvetica Neue","Helvetica","Arial",sans-serif; font-size:18px;
		    			  					  color:#fff; background-color:#add4eb;
		    			  				-webkit-border-top-right-radius: 60px;
									 -webkit-border-bottom-right-radius: 60px;
									  -webkit-border-bottom-left-radius: 20px;
								     	    -moz-border-radius-topright: 60px;
									     -moz-border-radius-bottomright: 60px;
									      -moz-border-radius-bottomleft: 20px;
									            border-top-right-radius: 60px;
									         border-bottom-right-radius: 60px;
									          border-bottom-left-radius: 20px;}

		.main-search button 	{ 	float:left; width:15%;  height:60px; padding:10px; background:#2196F3; color:#fff;
								font-size:20px; font-weight:normal; border:none; outline:none; cursor:pointer; transition: all 0.3s ease-out;
								position:absolute; right:0;
										  -webkit-border-radius: 20px;
						 -webkit-border-top-left-radius: 0;
							         -moz-border-radius: 20px;
							 -moz-border-radius-topleft: 0;
							              border-radius: 20px;
							     border-top-left-radius: 0;}

		.main-search button:hover 	{ 	background:#0b7dda;}

		.main-search::after 	{ content:""; clear:both; display:table;}


	   	/* Search -> Categories expand panel
	   	------------------------------------------------------------------------- */
	   	.categories-pannel { position:absolute}

	    .flex-container { width:100%; min-height:300px; margin:0 auto;
						    display: -webkit-flex; /* Safari */     
						    display: flex; /* Standard syntax */
						  flex-flow: wrap;
						  background-color:#bde5fd;
						  -webkit-box-shadow: 1px 1px 13px 0px rgba(50, 50, 50, 0.26);
							 -moz-box-shadow: 1px 1px 13px 0px rgba(50, 50, 50, 0.26);
							      box-shadow: 1px 1px 13px 0px rgba(50, 50, 50, 0.26);
							-webkit-border-radius: 10px;
				   -webkit-border-top-left-radius: 0;
					           -moz-border-radius: 10px;
					   -moz-border-radius-topleft: 0;
					                border-radius: 10px;
					       border-top-left-radius: 0;  }

		.flex-container .column 			{ /*font-size:14px;*/ text-align:center; padding:15px; background-color:#bde5fd;  transition: all 0.3s ease-out;
								   		 	  border:1px dotted #a3cce5; border-right:none; border-top:none; width:16.6666667%; cursor:pointer;
								   		 	-webkit-border-radius: 10px;
								   -webkit-border-top-left-radius: 0;
									           -moz-border-radius: 10px;
									   -moz-border-radius-topleft: 0;
									                border-radius: 10px;
										   border-top-left-radius: 0;}
		.flex-container .column.combin 		{ width:33.3333334%}
		.flex-container .column img 		{ width:60px; height:auto;}
		.flex-container .column .col-name 	{ padding-top:5px}
		.flex-container .column:hover { background-color:#93c1dd; color:#13426b}


		#body.index.inside.en .flex-container .column { font-size:14px;}
		#body.index.inside.cn .flex-container .column { font-size:16px;}
 
   	/* Middle (What's New)
   	=================================================== */
	/*   .left-bg	{ background:url(images/pattern-dna.svg); background-position:left bottom; background-repeat:no-repeat; background-size:35%}*/

	   	/* Left col -> News items
	   	------------------------------------------------------------------------- */
		.middle-wrapper 			 		 { padding-top:100px; padding-bottom:100px; }
		.middle-wrapper .mw-left-col-adj 	 { padding-left:15%; padding-right:80px }
		.news-items 		{ width:100%; text-align:right;  margin-bottom:40px; border-bottom: 1px solid #ececec; padding-bottom:40px; cursor:pointer; color:#333; }
		.news-items:last-child { margin-bottom:0}
		.news-cat			{ font-size:26px;  /*font-weight:500; display:flex; align-items:flex-start*/}
		.news-cat>div      	{ line-height:1.2; float:left; width:calc(100% - 60px); /*font-size:140%;*/ transition: all 0.3s ease-out;}
		.news-cat img 		{ width:40px; height:40px; margin-left:20px; float:left;  transition: all 0.3s ease-out;}
		.news-items.noicon .news-cat>div { width:100%}
		.news-intro 		{ /*font-size:20px;*/ padding-top:10px; transition: all 0.3s ease-out;}
		.news-date 			{ /*font-size:16px;*/ transition: all 0.3s ease-out;}

		#body.index.inside.en .news-cat { font-weight:600;}
		#body.index.inside.cn .news-cat { font-weight:500;}

		#body.index.inside.font-a .news-items.noicon .news-cat>div,
		#body.index.inside.font-aa .news-items.noicon .news-cat>div,
		#body.index.inside.font-aaa .news-items.noicon .news-cat>div  { width:100%}

		.news-items .news-cat, 	
		.news-items .news-intro,
		.news-items .news-date 			{ color:#333; transition: all 0.3s ease-out;}

		.news-items:hover .news-cat 	{ color:#2196F3 }
		.news-items:hover .news-intro,
		.news-items:hover .news-date 	{ color:#666;}


	   	/* Right col -> Whats News title + Big img 
	   	------------------------------------------------------------------------- */
	   	.logo-for-sm-device	{ display:none}

	   	.middle-wrapper .right-col .rc-pos	{ width:100%; padding:0 40px;}
	   	.rc-title	{ font-size:90px; font-weight:bold; text-transform:uppercase; line-height:0.8; margin-bottom:10px;  transition: all 0.3s ease-out;}
	   	.rc-more	{ font-size:90%; }
	   	#body.index.inside.en .rc-more	{ padding-top:0}
	   	#body.index.inside.cn .rc-more	{ padding-top:10px}

	   	.rc-more>a  		{ text-decoration:none; font-weight:500}
	   	.rc-more>a:hover    { color:#333; text-decoration:none;}

	   	.rc-img-pos		{ margin-top:50px}
	   	.rc-img 		{ width:100%; height:auto;}

	   	#body.index.theme1 .rc-img.img-for-theme1 { display:block }
	   	#body.index.theme2 .rc-img.img-for-theme1 { display:none  }
	   	#body.index.theme1 .rc-img.img-for-theme2 { display:none  }
	   	#body.index.theme2 .rc-img.img-for-theme2 { display:block }

	   	#body.index .fa-long-arrow-right { padding-left:5px }
	   	
	   	/* Left col -> scroll bar
	   	------------------------------------------------------------------------- */
	   	.scrollbar 		{ margin-left:30px; float:left; max-height:570px;  overflow-y:scroll; padding-bottom:10px; width:100%;}
	   	.scrollbar-pos 	{ padding-right:50px}
	   	#wrapper	{ margin:auto;}

	   	#style-5::-webkit-scrollbar-track	{ background-color:#ececec;}
		#style-5::-webkit-scrollbar			{ width:10px; background-color:#f5f5f5;}
		#style-5::-webkit-scrollbar-thumb 	{ background-color: #0ae;
										      background-image: -webkit-gradient(linear, 0 0, 0 100%,
												                color-stop(.5, rgba(255, 255, 255, .2)),
																color-stop(.5, transparent), to(transparent));}

		.title-news-for-sm-device	{ display:none}								      

   	/* Bottom (Quick Links)
   	=================================================== */
   		.bottom-wrapper 	{ background-color:#ececec; padding:80px 200px}

   		.tile {   width: 90%; 
   				display: -webkit-flex; 
   			    display: flex; 
   			  flex-flow: wrap;
   		  justify-items: center; 
   		justify-content: center;
        justify-content: center;
                    gap: 15px;
				    gap: 15px 40px; /* row-gap column gap */
				row-gap: 15px;
			 column-gap: 40px;
				 margin: 0 auto;}

		a.tile-item 			{ width:12%; margin-bottom:20px; text-decoration:none; color:#333;}
		a.tile-item .ti-icon 	{ width:100%}
		a.tile-item .ti-icon .ti-icon-circle		{ width:100%; height:100%; border-radius:50%; padding-bottom:100%; background-color:#fff; transition: all 0.3s ease-out;
													  border:5px solid #13426b; box-sizing: content-box !important; }

	/*#body.index.theme1 a.tile-item .ti-icon .ti-icon-circle { border:5px solid #13426b; }
	#body.index.theme2 a.tile-item .ti-icon .ti-icon-circle { border:5px solid #13426b; }*/

		a.tile-item .ti-icon .ti-icon-circle>img 	{ position:absolute; width:50%; height:50%;  top:50%; left:50%; transform: translate(-50%, -50%);}
		a.tile-item .ti-title	{ font-size:1.2vw; line-height: 1.1em; text-align:center; margin-top:10px}

		h2.quick-link	{ font-size:40px; margin-bottom:30px; text-align:center;}



   	/* aaa
   	=================================================== */

		#body.index.inside.font-a .news-cat>div,
		#body.index.inside.font-a h2.quick-link       	{ font-size:36px}
		#body.index.inside.font-aa .news-cat>div,
		#body.index.inside.font-aa h2.quick-link      	{ font-size:40px}
		#body.index.inside.font-aaa .news-cat>div,
		#body.index.inside.font-aaa h2.quick-link       { font-size:46px}

/*		#body.index.inside.font-a .news-intro      		{ font-size:20px}
		#body.index.inside.font-aa .news-intro      	{ font-size:24px}
		#body.index.inside.font-aaa .news-intro      	{ font-size:28px}

		#body.index.inside.font-a .news-date 			{ font-size:14px}
		#body.index.inside.font-aa .news-date 			{ font-size:16px}
		#body.index.inside.font-aaa .news-date 			{ font-size:20px}*/

		#body.index.inside.font-a .news-cat>div      	{ width:calc(100% - 60px)} /* width + margin-left 20px */
		#body.index.inside.font-a .news-cat img 		{ width:40px; height:40px}
		#body.index.inside.font-aa .news-cat>div      	{ width:calc(100% - 70px)} /* width + margin-left 20px */
		#body.index.inside.font-aa .news-cat img 		{ width:50px; height:50px}
		#body.index.inside.font-aaa .news-cat>div      	{ width:calc(100% - 80px)} /* width + margin-left 20px */
		#body.index.inside.font-aaa .news-cat img 		{ width:60px; height:60px}


	/* ==========================================================================
	 Media Style
	============================================================================= */
	@media only screen and (max-width:1700px) {
		.is-width 	{ width:80%;}
	  	.top-wrapper .right-col .logo-drug-formulary>img 	{ width:100%;}

	   	#body.index.inside.en .rc-title		{ font-size:75px;  line-height:1}
	   	#body.index.inside.cn .rc-title		{ font-size:65px;  line-height:1}
	   	#body.index.inside.cn .rc-more	{ padding-top:5px}

   		.bottom-wrapper { padding:80px 100px}
	}

/*	@media only screen and (max-width:1500px) {
		.is-width 	{ width: 86%;}
		.top-wrapper 					 { margin-left:-50px}
		.flex-container .column 		 { width:20%;}
		.middle-wrapper .mw-left-col-adj { padding-left:10%}
	}

	@media only screen and (max-width:1440px) {
		.is-width 						 { width:84%;}
		.middle-wrapper .mw-left-col-adj { padding-left:0}
   		.bottom-wrapper 				 { padding:80px 50px}
	}*/



	@media only screen and (max-width:1200px) {
		.is-width 	{ width:80%;}

		#body.index.inside .right-col,
		#body.index.inside .top-wrapper .right-col,
		#body.index.inside .top-wrapper .right-col .logo-drug-formulary,
		#body.index.inside .middle-wrapper .right-col,
		.middle-wrapper .logo-for-sm-device	{ display:none}

		#body.theme1.index #particles-js,
		#body.theme2.index #particles-js 				{ display:none}

		.top-wrapper	{ margin-left:-30px}
		.middle-wrapper	{ padding-top:80px}

		.middle-wrapper .mw-left-col-adj 			{ padding-left:0; padding-right:20px}
		.middle-wrapper .left-col.mw-left-col-adj	{ width: 100%}

		/* Search tab
		----------------------------------------*/
		#body.index.inside .ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding:8px 20px}
	   	.index-search	{ top:-40px; }

		.main-search button				{ height:45px; 
											-webkit-border-radius: 0;
								  -webkit-border-top-right-radius: 10px;
						       -webkit-border-bottom-right-radius: 10px;
								      -moz-border-radius-topright: 10px;
								   -moz-border-radius-bottomright: 10px;
									      border-top-right-radius: 10px;
									   border-bottom-right-radius: 10px;}

		.main-search input[type=text],
		.main-search input[type=search] 	{ height:45px; font-size:14px;
						          -webkit-border-top-right-radius: 20px;
									  -moz-border-radius-topright: 20px;
										  border-top-right-radius: 20px;
								   -webkit-border-top-left-radius: 0px;
									   -moz-border-radius-topleft: 0px;
										   border-top-left-radius: 0px;}

	a.tile-item .ti-icon .ti-icon-circle		{ border:3px solid #13426b;}
	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		.is-width 			{ width:90%; margin-top:-140px}

		#body.theme1.index.inside { background:none}
		#body.theme2.index.inside { background:none}

		.middle-wrapper .left-col.mw-left-col-adj 	 	{ padding-right:30px;}

		/* Search panel
		----------------------------------------*/
		.flex-container .column { width:25%; /*font-size:12px*/}

		#body.index.inside.en .flex-container .column { font-size:12px;}
		#body.index.inside.cn .flex-container .column { font-size:16px;}

		/* What's New
		----------------------------------------*/
		.middle-wrapper		{ padding-top:80px}
		.scrollbar 			{ height:auto; overflow-y:auto;}
		.scrollbar-pos 		{ padding-right:0}
	}


    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
		.is-width 			{ width:75%; margin-top:-140px}

		/* Top part
		----------------------------------------*/
		.top-wrapper .right-col .logo-drug-formulary img {  margin-top:50px}
		.main-search button				{ height:45px;}
		.main-search input[type=text],
		.main-search input[type=search] 	{ height:45px; font-size:14px;}

		#body.index.inside.cn .flex-container .column { font-size:16px;}

		/* What's New
		----------------------------------------*/
		.scrollbar 			{ height:auto; overflow-y:auto;}
		.scrollbar-pos 		{ padding-right:0}
		.middle-wrapper .mw-left-col-adj	{ padding-left:0px}

		/* Frame
		----------------------------------------*/
		#body.index.inside .right-col,
		#body.index.inside .middle-wrapper .right-col	{ display:block;}

		#body.theme1.index #particles-js,
		#body.theme2.index #particles-js 				{ display:block}

		#body.index.inside .top-wrapper .right-col,
		#body.index.inside .top-wrapper .right-col .logo-drug-formulary {display:none}

		#body.theme1.index.inside { background:#bde5fd url(images/bg-theme1.gif); background-repeat: repeat-y; background-position:right top }
		#body.theme2.index.inside { background:#2c8faa url(images/bg-theme2.gif); background-repeat: repeat-y; background-position:right top }
	}




	@media only screen and (max-width:767px) {
		.is-width	{ margin-top:0; width:100%; position:relative;}

		/* Top part
		----------------------------------------*/
		.top-wrapper 		{ margin-left:-20px}
		.esbanner+.esbrmtxt { display:none}

		/* Search
		----------------------------------------*/
		#body.index.inside .ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding:8px 10px}
	   	.index-search	{ top:0px;  }

		.main-search button				{ height:45px; -webkit-border-radius: 0}
		.main-search input[type=text],
		.main-search input[type=search] 	{ height:45px; font-size:14px}

		 .flex-container,
		 .flex-container .column {	 -webkit-border-radius: 10px;
							-webkit-border-top-left-radius: 0px;
						   -webkit-border-top-right-radius: 0px;
							            -moz-border-radius: 10px;
							    -moz-border-radius-topleft: 0px;
							   -moz-border-radius-topright: 0px;
							                 border-radius: 10px;
							        border-top-left-radius: 0px;
							       border-top-right-radius: 0px; }

		.flex-container .column { width:50%; padding:10px; }
		.flex-container .column img 		{ width:40px; height:auto;}
		.flex-container .column.combin 		{ width:100%}
		.flex-container .column .col-name 	{ padding-top:3px}

		/* What's New
		----------------------------------------*/
		.middle-wrapper	{ padding-top:80px}
		.middle-wrapper .left-col.mw-left-col-adj	{ width:100%; padding-left:0; padding-right:20px}

		table.t-title-blk-sm tr td:first-child		{ font-size:30px; }
		table.t-title-blk-sm tr td:last-child      	{ font-size:14px;}

		.news-items				{ text-align:left;}
		.scrollbar 				{ height:auto; overflow-y:hidden; margin-left:0; max-height:fit-content;}
		.scrollbar-pos 			{ padding-right:0}


		/* Quick Links (Bottom)
		----------------------------------------*/
   		.bottom-wrapper 	{ padding:30px 20px}
		h2.quick-link		{ font-size:30px; margin-bottom:20px; }
		a.tile-item 		{ width:20%; margin-bottom:20px;}
   		.tile {   width: 100%; 
   				display: -webkit-flex; 
   			    display: flex; 
   			  flex-flow: wrap;
   		  justify-items: center; 
   		justify-content: center;
        justify-content: center;
                    gap: 25px;
				    gap: 25px 50px; /* row-gap column gap */
				row-gap: 25px;
			 column-gap: 50px;}
		a.tile-item .ti-title	{ font-size:14px;}

		/* Frame
		----------------------------------------*/
		#body.theme1.index #particles-js,
		#body.theme2.index #particles-js 	{ display:none}

		/* aaa
		----------------------------------------*/

		#body.index.inside.en table.t-title-blk-sm tr td:first-child	{ font-weight:300; font-size:28px;}
		#body.index.inside.cn table.t-title-blk-sm tr td:first-child	{ font-weight:200; font-size:40px; line-height:1;}

		#body.index.inside.font-a .news-cat>div,
		#body.index.inside.font-a h2.quick-link       	{ font-size:16px}
		#body.index.inside.font-aa .news-cat>div,
		#body.index.inside.font-aa h2.quick-link     	{ font-size:18px}
		#body.index.inside.font-aaa .news-cat>div,
		#body.index.inside.font-aaa h2.quick-link       { font-size:28px}

		#body.index.inside.font-a .news-intro      		{ font-size:14px}
		#body.index.inside.font-aa .news-intro      	{ font-size:18px}
		#body.index.inside.font-aaa .news-intro      	{ font-size:20px}

		#body.index.inside.font-a .news-date 			{ font-size:12px}
		#body.index.inside.font-aa .news-date 			{ font-size:14px}
		#body.index.inside.font-aaa .news-date 			{ font-size:18px}

		#body.index.inside.font-a .news-cat>div      	{ width:calc(100% - 40px)} /* width + margin-left 20px */
		#body.index.inside.font-a .news-cat img 		{ width:20px; height:20px}
		#body.index.inside.font-aa .news-cat>div      	{ width:calc(100% - 50px)} /* width + margin-left 20px */
		#body.index.inside.font-aa .news-cat img 		{ width:25px; height:25px}
		#body.index.inside.font-aaa .news-cat>div      	{ width:calc(100% - 60px)} /* width + margin-left 20px */
		#body.index.inside.font-aaa .news-cat img 		{ width:40px; height:40px}
	}

	@media only screen and (max-width:280px) {

		/* Search
		----------------------------------------*/
		#body.index.inside .ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding:8px 10px; font-size: 60%;}
		#body.index.inside.en .rc-more	{ font-size: 80%;}
		#body.index.inside.theme1 .top-wrapper .right-col.right-col-adj h2 { font-size: 130%; }
		.tile { width: 90%; column-gap: 35px; }
		a.tile-item .ti-title { font-size: 10px; }
	}