p.dd-type { padding-right:10px; font-size:20px; color:#fff; }

	.drop-down-wrapper { background-color: rgba(0, 46, 109, 1); margin-bottom:50px; padding:20px; display:flex; align-items:center;
							-webkit-border-radius: 10px;
						       -moz-border-radius: 10px;
						            border-radius: 10px;}
	#body.ports	.drop-down-wrapper { padding:20px 20px 20px 20px; z-index:50;}
  	.dd-items 				{ display:flex; align-items:center; margin-right:30px; text-transform:uppercase;}
    .dd-items:last-child 	{ margin-right:0; }


	/* width
	---------------------------------------------*/	
	.width-year			  { width:150px}
	.width-category		{ width:400px}
	.width-region 		{ width:300px}
	.width-port		  	{ width:360px}



	/* Common ==> Select Style (issued by/year)
	===================================================*/	
    .select         { top:0px; margin-bottom:0; height:40px; padding:5px 40px 5px 15px; line-height:1.8; font-size:100%;
		                           white-space: nowrap;
								      overflow: hidden;
						  	     text-overflow: ellipsis;
                         -webkit-border-radius: 3px;
                            -moz-border-radius: 3px;
                                 border-radius: 3px; 
								     cursor: pointer;}
    .select::after { content:""; width:12px; height:12px; position:absolute; display:block; right:15px; top:14px;
                                  background-repeat:no-repeat; background-size:contain; 
                                  background-position:right center; transition:transform 300ms ease; }

    .select-down        { background-color:#ececec; margin-top:1px; line-height:1.4; font-size:90%;}
    .select-down a      { text-decoration:none; padding:10px 15px; border-bottom:1px solid #fff; 
                          display: flex;
                        align-items: flex-start;}
	
	#body.en .select {line-height:1.9}
	#body.cn .select {line-height:1.8; font-weight:bold}
	
	.dropdownwrp{ display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index:100; }



	/* White Style
	===================================================*/
	.white-style .select-down a  	{ color:#666; border-bottom: 1px solid #fff;}
   
    .white-style .select,
    .white-style input[type="text"],
    .white-style input[type="search"]      { background-color:#fff; color:#333;}

    .white-style .select::after	 { background-image:url(images/arrow-left-black.svg); }

    .white-style .select-down div:hover,
	.white-style .select-down a:hover{ background-color:#ececec; color:#333; text-decoration:none; transition: all 0.3s ease-out;}

	.white-style input::placeholder			     { color:#333; opacity: 1}
	.white-style input:-ms-input-placeholder 	 { color:#333;}
	.white-style input::-ms-input-placeholder    { color:#333;}


    .white-style .select-down        { background-color:#fff; margin-top:1px; line-height:1.4; border-left:1px solid #ececec; max-height: 250px; overflow: auto;
												    -webkit-box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13);
							    					   -moz-box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13);
							    						    box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13);}
    .white-style .select-down a      { text-decoration:none; padding:10px 15px; border-bottom: 1px solid #ececec; }




	/* For "Milestone"
	===================================================*/
	#body.blue .general .blue-pattern-style .select-down a  	{ color:#333; border-bottom: 1px solid #fff;}


    .blue-pattern-style .select,
    .blue-pattern-style input[type="text"],
    .blue-pattern-style input[type="search"]      { background-color:#fff; }
    .blue-pattern-style .select 	{ color:#333;
    								  background: rgb(154,202,235);
									  background: linear-gradient(145deg, rgba(154,202,235,1) 0%, rgba(154,202,235,1) 65%, rgba(118,154,193,1) 65%, rgba(118,154,193,1) 80%, rgba(154,202,235,1) 80%);
								     }


    .blue-pattern-style .select::after	 		{ background-image:url(images/arrow-left-black.svg); }
    .blue-pattern-style .select-down a:hover	{ background-color:#ececec; color:#333; text-decoration:none; transition: all 0.3s ease-out;}


    .blue-pattern-style .select-down        { background-color:#dbe9f6; color:#333; margin-top:1px; line-height:1.4; border-left:none;
												    -webkit-box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13);
							    					   -moz-box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13);
							    						    box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13);}
    .blue-pattern-style .select-down a      { text-decoration:none; padding:10px 15px; border-bottom: 1px solid #ececec; }




	/* ==========================================================================
		Media
	============================================================================= */
	
	
  @media only screen and (max-width:1800px) {			
 	.width-region 		{ width:280px}
	.width-port		  	{ width:280px}
	.width-year			  { width:120px}

 	}


	@media only screen and (max-width:1300px) {			
 	.width-region 		{ width:230px}
	.width-port		  	{ width:230px}
 	}


 	@media only screen and (max-width:1200px) {			
	
	.width-year		{ width:120px}
	.width-region,
	.width-port		{ width:200px}

	#body.ports .drop-down-wrapper 			{ width:100%; display:block; float:left; padding:20px 20px 20px 20px;}
	#body.ports .drop-down-wrapper::after   { content:""; clear:both; display:table; }

	#body.ports .dd-items:nth-child(1) 	{ width:calc(50% - 15px); display:block; float:left; margin-right:15px; }
	#body.ports .dd-items:nth-child(2) 	{ width:calc(50% - 30px); display:block; float:left; margin-left:15px; margin-right:0}
	#body.ports .dd-items:nth-child(3) 	{ display: block; float:right; margin-right:20px;  }
	#body.ports .width-region  { width:100%; }
	#body.ports .width-port    { width:100%; }
	#body.ports .dd-items.dd-items-btn { top: 0; margin-top:20px;}
	}
	


 	@media only screen and (max-width:1024px) {			
	/* .width-year		{ width:120px}
	.width-region,
	.width-port		{ width:240px} */
	p.dd-type 		{ font-size:16px; }

	.dd-items {/*  border:1px solid red; */ display:inline-grid; }
	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	.width-year 		 { width:100px}
	.width-category,
	.width-region,
	.width-port		  	 { width:320px}
	
	#body.list 	.width-port		  { width:240px} 
	#body.list 	.width-region		{ width:240px}
	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	.width-year 		 { width:100px}
	.width-category,
	.width-region,
	.width-port		  	 { width:380px}
	
	#body.list 	.width-port		  { width:260px} 
	#body.list 	.width-region		{ width:260px} 
	}


 	@media only screen and (max-width:767px) {	
	.width-year,
	.width-category,
	.width-region,
	.width-port		  	 { width:100%}

	.drop-down-wrapper 	 { display:block; width:100%; padding:15px; margin-bottom:30px; }
	.dd-items 			 { display:block; width:100%; margin-right:0; margin-bottom:8px; }
	.dd-items:last-child { margin-bottom:0; }

	#body.news .grid-3cols { grid-row-gap: 50px; }


	#body.ports .dd-items:nth-child(1) 	{ width:100%; margin-right:0; }
	#body.ports .dd-items:nth-child(2) 	{ width:100%; margin-left:0; }
	#body.ports .dd-items:nth-child(3) 	{ display:block; float:right; margin-right:0px; width:auto  }

 	}