/* Main left Right column
	----------------------------------------------------------------*/
	.main-blk 					{ width:100%;}
	.main-blk .main-colleft 	{ width:20%; float:left;}
	.main-blk .main-colright 	{ width:80%; float:left;}

	.main-content 	{ margin-left:15% }
	.action-blk 	{ width:100%}
	.back 			{ width:15%; float:left;}
	.back-m 		{ display:none}

	#body.programme-detail.en .back {top:-3px}
	#body.programme-detail.cn .back {top:0px}


	.half-col 			 { width:100%;}
	.half-col .hc-left   { width:30%; float:left;}
	.half-col .hc-right  { width:70%; float:left; padding-left:100px;}

	.main-content.adj-mc  { margin-top:50px}



	/* Top Quick Menu
	----------------------------------------------------------------*/
	ul.pg-item 		{ margin:0; padding:0; }
	ul.pg-item li 	{ margin:0; padding:0; list-style:none; display:inline-block; padding-right:30px; text-transform:uppercase;}
	ul.pg-item li:last-child  { padding-right:0}
	.quick-menu-m 	{ display:none}

	#body.en ul.pg-item li { top:-3px; }
	#body.cn ul.pg-item li { top:0px; }


	/* Induction Part
	----------------------------------------------------------------*/
	#intro .intro-title 	{ border-bottom:1px solid #ececec;}
	#intro .intro-detail	{ margin-top:80px}


	/* Button Part
	----------------------------------------------------------------*/
	#button  					{ background-color:#ececec; padding-top:15px; padding-bottom:15px; margin-bottom:80px}
	.btn-blk 					{ width:100%; display:flex; justify-content:center;}
	.btn-blk .btn-icon-blk 		{ width:100%; text-align:center;}
	.btn-blk .btn				{ float:left; padding-right:60px; text-align:center; }
	.btn-blk .btn:last-child 	{ padding-right:0px}
	.btn-blk .btn .btn-name		{ color:#0062a7; text-transform:uppercase; font-weight:600; line-height:1}
	.btn-blk .btn ul.btn-link  		{ margin:0; padding:0; text-align:center;}
	.btn-blk .btn ul.btn-link li 	{ margin:0; padding:0; display:inline-block; list-style:none; text-transform:uppercase;}
	.btn ul.btn-link li a 			{ color:#333; text-decoration:none; cursor:pointer;}  
	.btn ul.btn-link li a:hover 	{ color:#0062a7}  
	#body.en .btn-blk .btn ul.btn-link li 	{ font-size:80% }
	#body.cn .btn-blk .btn ul.btn-link li 	{ font-size:100% }



	.btn ul.btn-link li:after  				{ content: "\2022"; color:#e84124; font-weight: bold; width:1em; padding:0 10px;}
	.btn ul.btn-link li:last-child:after  	{ content:""; display:none } 
	.btn .btn-icon 		{ width:26px; height:26px; text-align:center; display:inline-block; margin-bottom:10px}
	.btn .btn-icon img 	{ width:auto; height:26px;}


	/* Performance Date & Venue
	----------------------------------------------------------------*/
	#detail { margin-top: 50px; }
	#detail ul.pro-detail li 				{ border-bottom:1px solid #e84124; margin-bottom:10px}
/*	#detail ul.pro-detail li:last-child 	{ border-bottom:none}*/


	/* Ticket
	----------------------------------------------------------------*/
	#ticket .early-bird img { width:25px; height:25px}

	/* free
	----------------------------------------------------------------*/
	#free { width:100%}


	/* Team
	----------------------------------------------------------------*/
	#team .team-blk { width:100%; text-align:center;}
	#team table.team-member 	{ width:100%; }
	#team table.team-member tbody tr td:first-child  { width:50%; padding-right:20px; vertical-align:top; text-align:right; color:#e84124}
	#team table.team-member tbody tr td:last-child   { width:50%; padding-left:20px;  vertical-align:top; text-align:left;}
	#team table.team-member tbody tr td:last-child a { color:#842211; text-decoration:none;}
	#team table.team-member tbody tr td:last-child a:hover { color:#3b130c; text-decoration:none;}
	#team table.team-member tbody tr td { padding-top:5px}  
	#team { background-image:url(images/bg-team.svg); background-position:top right; background-repeat:no-repeat; background-size:30%}


	/* Common
	============================================================================= */
	#body.programme-detail .general ul.pg-item li a 		  { color:#333; text-decoration:none; cursor:pointer; margin:0;}
	#body.programme-detail .general ul.pg-item li a:hover  { color:#e84124; text-decoration:none}
	#body.programme-detail .general h2,
	#body.programme-detail .general h3,
	#body.programme-detail .general h4 { color:#333}

	#body.programme-detail #detail.general h4,
	#body.programme-detail #ticket.general h4 { margin-bottom:20px}

	#middle { background-image:url(images/bg-programme-detail.svg);
				background-size:60%; 
				background-position:left 100px;
				background-repeat:no-repeat;}


	/* Adj
	============================================================================= */
	.adj-pg-edge-menu 	{ padding-top:20px; padding-bottom:120px; border-bottom:none}
	.adj-pg-edge 		{ padding-top:0; padding-bottom:80px; border-bottom:none}
	#team.adj-pg-edge 	{ padding-top:80px} 

	#body.programme-detail #ticket.general .tab.adj-programme-tab { margin-bottom:20px}	
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3,
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3:hover	 {  border:none; font-weight:normal; border-bottom:1px solid #ececec}
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3 		 { border-bottom:1px solid #ececec; padding:10px 20px 10px 0; background-color:transparent;
																					display: flex; align-items: center; }
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3::after { content:" "; width:10px; height:10px; position:absolute; display:block; 
	                  right:10px; top:16px; 
	                  background-image: url(images/arrow-left.svg); 
	                 background-repeat: no-repeat; 
	                   background-size: contain; 
	               background-position:right center; 
	                        transition: transform 300ms ease; }

	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3.with-icon::after { top:20px;}
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3>img 	{ width:30px; height:30px; padding-right:10px;}
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>div 		{ background-image:none; background-color:transparent; padding:10px 0; border-bottom:1px solid #e84124}
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec ul 		{ margin:0; padding:0}
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec ul li 	{ margin:0; padding:0; list-style:none; margin:0px 0px 10px 20px; line-height:1.3}
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec ul li::before  { content: "\2022"; color: #e84124; display:inline-block; width:1em; margin-left: -1em}



	#body.en.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3,
	#body.en.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3:hover  { font-size:14px;}	
	#body.en.programme-detail #ticket.general .tab.adj-programme-tab .esec>div  { font-size:12px;}	
	
	#body.cn.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3,
	#body.cn.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3:hover { font-size:14px; line-height:1.4!important}
	#body.cn.programme-detail #ticket.general .tab.adj-programme-tab .esec>div  { font-size:14px;}	

	#body.en.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3,
	#body.en.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3:hover { font-weight:600}	
	#body.cn.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3,
	#body.cn.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3:hover { font-weight:normal}	
	
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>div  { font-size:12px;}	

	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>div ul { margin-top:5px}

	/* slick */
	
	.slick-dots-container { margin-top: 0; }
	.main .slick-dots { 
		position: absolute; 
		left: 50%;
		transform: translateX(-50%);
		padding: initial;
		top:10px;
	}
	ul.slick-dots li { width: auto; height: auto; margin-left: 15px;}
	ul.slick-dots li.slick-active button:before { opacity: 1; } 
	.slick-slide { margin: 0; }
	.slick-slide [onclick] {
		vertical-align: top;
	}
	

	/*  adj*/
	#dvleft.hc-left    { width:65%; float:left;}
	#dvright.hc-right  { width:35%; float:left; padding-left:50px; font-size:14px}

	#detail ul.pro-detail li.rmk { font-size:14px; margin-top:20px; border-bottom:none}

    #dvleft.hc-left ul.pro-detail {font-size:18px}


	/* logo */
	.img-cols{
		width: 100%;
		overflow: hidden;
		overflow: visible;
		max-width: 1024px;
		margin: 50px auto 0;
	}
	.img-cols .flex-wrp{
		width: calc(100% + 50px);
		display: flex;
		flex-direction: row;
		text-align: center;
		flex-wrap: wrap;
		align-items: flex-end;
		overflow: hidden;
		justify-content: center;

	}
	.img-cols .txt{
		margin-bottom: 20px;
		font-size: 12px;
		line-height: 1.3;
	}
	.img-cols .vimg{
		max-width: 200px;
		height: 80px;
		display: block;
		margin: 0 auto;
	}
	.img-cols .vert-scale{
		height: 100%;
		width: 100%;
		object-fit: contain;
	}
	.img-cols .img-blk{
		overflow: visible;
	}
	.img-cols .img-blk .blk-wrp{
		padding-bottom: 80px;
		padding-right: 50px;
	}
	.img-3col .img-blk{
		width: 33.33%;
		flex-basis: 33.33%;
		flex-shrink: 0;
		flex-grow: 0;
	}
	.img-2col .img-blk{
		width: 33.33%;
		flex-basis: 33.33%;
		flex-shrink: 0;
		flex-grow: 0;
	}
	.img-1col .img-blk{
		width: 100%;
		flex-basis: 100%;
		flex-shrink: 0;
		flex-grow: 0;
	}


	/* ==========================================================================
	    Media Style:
	============================================================================= */
	@media only screen and (max-width:1200px) {
	.adj-pg-edge-menu 	{ padding-bottom:80px}
 	#team.adj-pg-edge 	{ padding-top:50px}
 	.adj-pg-edge        { padding-bottom:50px}
 	#button 			{ margin-bottom:50px}

	.main-content 		{ margin-left:0}
 	#ticket, #free 		{ padding-top:20px}
	
 	#detail .hc-left, 	
 	#ticket .hc-left,
 	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3,
 	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3,
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>h3:hover,
	#body.programme-detail #ticket.general .tab.adj-programme-tab .esec>div,	
 	#detail, #ticket, #free, #team { font-size:14px; }

 	#detail .hc-left, 	
 	#ticket .hc-left { line-height:1.6} 
 

	#dvleft.hc-left    { width:100%; float:left;}
	#dvright.hc-right  { width:100%; float:left; padding-left:0px; font-size:14px}
	#dvright.hc-right>ul>li { padding-left:20px;}

	#middle { background-image:url(images/bg-programme-article-mobile.svg);
				background-size:60%; 
				background-position:right 30px;
				background-repeat:no-repeat;}



 	}

 	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	#quick-menu .main-content 	{ margin-left:0%; width:100%; margin-top:5px}
	#quick-menu .back 			{ width:100%; float:none; display:block;}
	.adj-pg-edge-menu			{ padding-top:10px}
 	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	#quick-menu .main-content 	{ margin-left:20% }
	#quick-menu .back 			{ width:20%; float:left}
	}


	@media only screen and (max-width:767px) {
	#body.programme-detail.en .back {top:-3px}
	#body.programme-detail.cn .back {top:0px}


	.quick-menu-m 	{ display:block; border-top:1px solid #fff; text-transform:uppercase; position:sticky!important; top: 70px; z-index: 1;}
	.back-m 		{ display:block; width:100%; margin-bottom:40px}
	#quick-menu .back 	{ width:100%; float:none; display:block;}
	.adj-pg-edge-menu	{ padding-top:10px}

	#quick-menu { display:none}
	#intro 		{ margin-top:10px}
	#intro .intro-detail { margin-top:50px}
	
	.btn-blk 		{ display:block;}
	.btn-blk .btn   { width:100%; float:none; padding-right:0; padding-bottom:10px; margin-left:0; padding-left:0}
	.btn .btn-icon  { width:20px; height:20px; margin-bottom:5px }
	.btn .btn-icon>img { width:auto; height:20px;}
	.btn-blk .btn ul.btn-link li 				{ margin-bottom:0;}
	.btn-blk .btn ul.btn-link li:last-child 	{ margin-bottom:0;}


	.half-col .hc-left   { width:100%; margin-bottom:0}
	.half-col .hc-right  { width:100%; padding-left:0; margin-top:50px}

	#team table.team-member tbody tr td:first-child  { width:45%;}
	#team table.team-member tbody tr td:last-child   { width:55%; padding-left:0px;}

	#middle { background-image:url(images/bg-programme-detail-m.svg);
				background-size:70%; 
				background-position:right top;
				background-repeat:no-repeat;}

	#team 	{ background-size:40%}


	#dvright.hc-right  { margin-top:0px;}
	#dvright.hc-right>ul>li { padding-left:10px;}
	.img-cols{
		overflow: hidden;
	}
	.img-cols .img-blk{
		width: 100%;
		flex-basis: auto;
	}
	
	}