/* ==========================================================================
   Font
   ========================================================================== */
   @font-face {
	  font-family: DIN;
	  src: url('../fonts/DIN/dinnextltpro-light.ttf');
	}
	@font-face {
	  font-family: DIN Medium;
	  src: url('../fonts/DIN/DIN Next LT Pro Medium.ttf');
	}
	@font-face {
	  font-family: DIN Bold;
	  src: url('../fonts/DIN/DINNextLTPro-Bold.ttf');
	}
	@font-face {
	  font-family: PlayheadFREE;
	  src: url(../fonts/PlayheadFREE.otf);
	}
	@font-face {
	  font-family: Ubuntu-Regular;
	  src: url(../fonts/Ubuntu-Regular.ttf);
	}
	@font-face {
	  font-family: Ubuntu-Light;
	  src: url(../fonts/Ubuntu-Light.ttf);
	}
/* ==========================================================================
   Common Initialization
   ========================================================================== */
	* {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}
	body {
		position:relative;
		font-family:DIN,'Microsoft JhengHei';
		font-size:16px;
		color:#333;
	}
	body.open-menu{overflow:hidden;}
	body:after{
		content:'';
		position:fixed;
		left:0;
		top:0;
		height:100%;
		width:100%;
		background-color:rgba(255,255,255);
		opacity:1;
		transition: opacity 0.25s ease-in;
	}
	body.ready:after{
		opacity:0;
		pointer-events: none;
	}
	.common-wrapper{
		width:95%;
		margin:0 auto;
	}
	main {
		line-height:1;
	}
	.clear-both {
		clear: both;
	}
	.clear::after,
	.common-wrapper::after{
		content: '';
		clear: both;
		display: table;
	}
	b,.bold {
		font-weight: bold;
	}
	em,.italic {
		font-style: italic;
	}
	p{
		margin-bottom:0;
	}
	dl, ol, ul{
		margin-bottom:0;
	}
	@media (min-width: 1025px){
		.mobile{display:none;}
	}
	@media (max-width: 1024px){
		.desktop{display:none;}
	}
/* ==========================================================================
   Header
   ========================================================================== */
   header{padding-top:25px;position:relative;}
   header .wrapper{display:flex;align-items: flex-end;justify-content: space-between;}
   header .left > a{width:330px;}
   header .left img{width:100%;}
   header .right{width:calc(100% - 330px);justify-content: flex-end;display:flex;align-items: flex-end;}
   
   header .menu{margin-right:10px;min-width: 60%;text-align:center;}
   header .menu a{font-size:1.45em; max-width: 200px;text-align: center;margin-right:15px;padding-bottom:5px;}
   html[lang="zh-Hant"] header .menu a, html[lang="zh-Hans"] header .menu a{width:225px;}
   header .menu a.active{position:relative;}
   header .menu a.active:after{content:'';position:absolute;height:5px;background-color:#dfa45e;width:100%;left:0;bottom:0;}
   
   header .lang{padding-bottom:7.5px;width:100px;text-align:right;}
   header .lang a{color:#ab6502;margin:0 2.5px;}
   header .lang a.active{color:#000;}
   
    @media (min-width: 1025px){
	   header .right{display: flex !important;}
    }
   
    @media (max-width: 1200px){
		header .menu a{font-size:1.2em;max-width:150px;}
		header .left > a{width:270px;}
	}
	
	@media (max-width: 1024px){
		header{padding-top:10px;background-color:white;z-index:1050;padding-top:0;top: 0;width: 100%;left: 0;position:fixed;}
		header .wrapper{width:100%;}
		header .left{background-color:white;padding-top:10px;width:95%;margin: 0 auto;display:flex;align-items:center;height:54.22px}
		header .left > a{width:200px;}
		header .right{position:absolute;right:0;top:0;display:flex;flex-wrap:wrap;background-color:#fff;z-index:-1;display:none;padding-top:74.22px;padding-left:50px;width:auto;padding-right:2.5vw;}
		header .menu{width:100%;}
		header .menu a{max-width:none;display:block;text-align:right;padding-bottom:0;margin-bottom:25px;font-size:1.2em;margin-right:0;font-weight:bold;}
		header .menu a.active:after{
			right:0;
			width:40%;
			height:3px;
			left:auto;
		}
		header .lang{width:100%;padding-bottom:15px;margin-top:80px;}
		
		header .menu-btn{position:absolute;right:2.5vw;top:50%;transform:translateY(-50%);width:30px;cursor:pointer;z-index:11;background-color:white;font-size:0;}
		header .menu-btn img.close{display:none;width:25px;}
		header .menu-btn.open-menu img{display:none}
		header .menu-btn.open-menu img.close{display:block;}
	}
	
	@media (max-height: 400px){
		header .right{overflow-y: scroll;height: 330px;}
	}
	
	@media (max-height: 300px){
		header .right{overflow-y: scroll;height: 230px;}
	}
	
/* ==========================================================================
   Blur when open menu
   ========================================================================== */
@media (max-width: 1025px){
	body.open-menu main .musical-wrapper,
	body.open-menu #musicalModal,
	body.open-menu .musical-menu,
	body.open-menu .musical-caption{filter: blur(2px);}
}
/* ==========================================================================
   Main
   ========================================================================== */
    main{min-height:calc(100vh - 78.16px - 53px);}
	.landing,.gz{height:calc(100vh - 78.16px - 53px);}
   .musical-wrapper{min-height:calc(100vh - 78.16px - 53px - 76px);}
   
    @media (max-width: 1200px){
		main{min-height:calc(100vh - 69.22px - 53px);}
		.landing,.gz{height:calc(100vh - 69.22px - 53px);}
		.musical-wrapper{min-height:calc(100vh - 69.22px - 53px - 76px);}
	}
	@media (max-width: 1024px){
		main{min-height:calc(100vh - 55px);padding-top:54.22px;}
		.landing,.gz{height:calc(100vh - 55px);padding-top:54.22px;}
		.musical-wrapper{min-height:calc(100vh - 54.22px - 55px - 61px);}
		
		body.open-menu main{pointer-events:none;}
	}
	@media (max-width: 600px){
		.musical-wrapper{min-height:calc(100vh - 54.22px - 55px - 50px);}
	}
/* ==========================================================================
   Footer
   ========================================================================== */
   footer{font-size:0.7em;}
   html[lang="zh-Hant"] footer, html[lang="zh-Hans"] footer{font-family:'Microsoft JhengHei';}
   footer .wrapper{display:flex;align-items: flex-end;justify-content: space-between;padding:20px;border-top:1px solid #ccc;}
   footer .left{width:70%;}
   footer .right{text-align:right;width:30%;}
   
   @media (max-width: 1024px){
	    footer .wrapper{padding:15px;}
		footer .wrapper{flex-wrap:wrap;}
		footer .left,footer .right{width:100%;text-align:center;line-height:1.2em;}
   }
/* ==========================================================================
   Landing
   ========================================================================== */
   .landing{
	   background-color:#f5debe; /* Temp */
   }
   .landing .title{
	   
   }
   .landing .text-block{
	   color:#000;
	   background-color:white;
   }
   .landing a{background-color:#ab6502;color:white;}
   .landing{
		background-color:#f5debe;
		position:relative;
		font-family: 'Ubuntu', sans-serif;
		max-width:100%;
		overflow:hidden;
		min-height:780px;
	}
	.landing .pattern-1{
		position:absolute;
		top:0;
		width:38%;
		left:5%;
	}
	.landing .title-area{
		position:absolute;
		bottom:0;
		left:0;
		width:37%;
		background-color:#e3ded3;
		padding:0 2.5vw;
		padding-right:3.5vw;
		padding-top:70px;
		padding-bottom:40px;
	}
	.landing .title-area:before{
		content:'';
		position:absolute;
		right:0;
		top:0;
		height:25%;
		width:10%;
		background-color:#f5debe;
	}
	.landing .title-area > img{
		width:100%;
	}
	.landing .title-area .text-block{
		display:inline-block;
		font-size:1.67vw;
		padding:20px 10px;
		font-weight:300;
		margin-bottom:30px;
	}
	.landing .title-area .btn-list{
		text-align:right;
	}
	.landing .title-area .btn-list a{
		display:inline-block;
		font-size:1.35vw;
		line-height:1.25em;
		text-align:left;
		width:230px;
		margin-right:20px;
		padding:30px 20px;
		max-width:calc(100% / 2 - 13px);
		font-weight:300;
	}
	.landing .title-area .btn-list a:last-child{
		margin-right:0;
	}
	.landing .title-area .btn-list a span{display:inline-block;vertical-align:middle;width:calc(100% - 2vw - 18px);margin-right:10px;}
	.landing .title-area .btn-list a img{display:inline-block;vertical-align:middle;width:2vw;}

	.landing .main-title{
		position:absolute;
		top:40%;
		transform:translateY(-50%);
		left:2.5%;
		padding-bottom:0.5vw;
	}
	.landing .main-title p{
		font-size:2.7vw;
		line-height:1.25em;
	}
	.landing .main-title p.title-2{
		transform:translateX(25%);
	}
	.landing .main-title .title-underline{
		position:absolute;
		width:100%;
		bottom:0;
		left:0;
	}

	.landing .landingImage{
		position:absolute;
		top:50%;
		transform:translateY(-50%) translateX(3%);
		right:0;
		width:57%;
	}
	.landing .pattern-3{
		position:absolute;
		right:0;
		top:0;
		width:47.2%;
	}
	
	html[lang="zh-Hant"] .landing .main-title,
	html[lang="zh-Hans"] .landing .main-title{
		overflow: hidden;
		margin-left: 50px;
		padding-right: 75px;
		padding-left: 50px;
	}
	html[lang="zh-Hant"] .landing .main-title p,
	html[lang="zh-Hans"] .landing .main-title p{
		font-size: 50px;
	}
	html[lang="zh-Hant"] .landing .main-title p.title,
	html[lang="zh-Hans"] .landing .main-title p.title{
		
	}
	html[lang="zh-Hant"] .landing .main-title p.title-2,
	html[lang="zh-Hans"] .landing .main-title p.title-2{
		transform: none;
		padding-left: 120px;
	}
	html[lang="zh-Hant"] .landing .main-title .title-underline,
	html[lang="zh-Hans"] .landing .main-title .title-underline{
		width: 675px;
		max-width: none;
	}

	@media(max-width:1600px){
		.landing .title-area .btn-list a{
			padding:20px 15px;
			padding-right:10px;
		}
	}
	@media(max-width:1300px){
		html[lang="zh-Hant"] .landing .main-title,
		html[lang="zh-Hans"] .landing .main-title{
			margin-left: auto;
		}
	}

	@media(max-width:1024px){
		.landing{
			padding-bottom:275px;
			height:auto;
			text-align:center;
			min-height:0;
		}
		.landing .pattern-1{
			width:60%;
			max-width:350px;
		}
		.landing .landingImage {
			position:relative;
			display:block;
			top: auto;
			transform: none;
			right: auto;
			margin:0 auto;
			margin-top: 18vw;
			width: 100%;
			max-width:550px;
		}
		.landing .pattern-3{
			width:100%;
			left:50%;
			transform:translateX(-45%);
			top:0;
			max-width:550px;
		}
		.landing .title-area{
			width:90%;
			max-width: 450px;
			padding:0 5vw;
			padding-bottom: 30px;
			padding-top: 40px;
			text-align:left;
		}
		.landing .title-area:before{
		}
		.landing .title-area .text-block{
			font-size:1.2em;    
			padding: 10px;
			margin-bottom: 20px;
		}
		.landing .title-area .btn-list a{font-size:1em;width:42.5%;}
		.landing .title-area .btn-list a span{width:calc(100% - 25px - 18px);margin-right:10px;}
		.landing .title-area .btn-list a img{width:25px;}
		
		.landing .main-title{
			position:relative;
			top:auto;
			transform:none;
			left:auto;
			max-width: 500px;
			margin: 0 auto;
			padding-bottom: 10px; 
			margin-top:40px;
		}
		.landing .main-title p{font-size:2em;text-align:left;}
	}
	@media(max-width:800px){
		html[lang="zh-Hant"] .landing .main-title,
		html[lang="zh-Hans"] .landing .main-title{
			margin: 20px auto;
			padding-right: 50px;
			transform: none;
			padding-left: 35px;
		}
		html[lang="zh-Hant"] .landing .main-title p,
		html[lang="zh-Hans"] .landing .main-title p{
			font-size: 35px;
		}
		html[lang="zh-Hant"] .landing .main-title p.title,
		html[lang="zh-Hans"] .landing .main-title p.title{
			
		}
		html[lang="zh-Hant"] .landing .main-title p.title-2,
		html[lang="zh-Hans"] .landing .main-title p.title-2{
			padding-left: 90px;
		}
		html[lang="zh-Hant"] .landing .main-title .title-underline,
		html[lang="zh-Hans"] .landing .main-title .title-underline{
			width: 480px;
		}
	}
	@media(max-width:650px){
		.landing .main-title p{font-size:4.95vw;}
		.landing .main-title{padding-bottom:1.6vw;width:auto;display:inline-block;transform: translateX(-10%);}
		.landing .title-area{padding-bottom:20px;padding-top:30px;}
		.landing .title-area .text-block{font-size:3.2vw;}
		.landing .title-area .btn-list a{font-size:3vw;}
		.landing .title-area .btn-list a img{width:17.5px;}
		.landing .title-area .btn-list a span {
			width: calc(100% - 17.5px - 18px);
		}
	}
	@media(max-width:500px){
		.landing{padding-bottom:calc(53.5vw + 15px);}
	}
/* ==========================================================================
	Musical
   ========================================================================== */	
	.musical-main-container{
		display:flex;
		overflow:hidden;
		position:relative;
	}
	.musical-wrapper{
		background-color:#c0b8ad;
		padding:30px 0;
		display:flex;
		width:100%;
		align-items:center;
		position:relative;
	}
	.musical{
		position:relative;
		display:block;
		width:90%;
		max-width:1235px;
		margin:0 auto;
		font-size:0;
	}
	.musical.western{
		max-width:1170px;
	}
	.musical .musical-bg{
		height:auto;
		width:100%;
		transition:filter 0.25s ease-in;
	}
	.musical.hoverIn .musical-bg{
		filter: blur(2.5px);
	}
	.musical .musical-person{
		position:absolute;
		left:0;
		top:0;
		transition:filter 0.25s ease-in;
		z-index:1;
	}
	.musical.hoverIn .musical-person:hover{
		z-index:2;
	}
	.musical.hoverIn .musical-person:not(:hover):not(.target-instruments){
		filter: blur(1.5px);
	}
	.musical .musical-person .arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;width:35px;}
	.musical .musical-person .arrow img.on-hover{display:none;}
	.musical .musical-person .arrow:hover img{display:none;}
	.musical .musical-person .arrow:hover img.on-hover{display:block;}
	.musical .musical-person .arrow .text{
		font-size:0;
		position: absolute;
		left: 110%;
		white-space: nowrap;
		top: 45%;
		transform: translateY(-50%);
		background-color: white;
		padding:0 2.5px;
	}
	.musical .musical-person .arrow .text.left-pos{
		left: auto;
		right: 110%;
	}
	.musical .musical-person .arrow:hover .text{
		font-size: 1.1rem;
		padding:5px 2.5px;
	}

	.musical .musical-person2{
		position:absolute;
		left:0;
		top:0;
		transition:filter 0.25s ease-in;
		z-index:1;
	}
	.musical.hoverIn .musical-person2:hover{
		z-index:2;
	}
	.musical.hoverIn .musical-person2:not(:hover):not(.target-instruments){
		filter: blur(1.5px);
	}
	.musical .musical-person2 .arrow2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;width:35px;}
	.musical .musical-person2 .arrow2 img.on-hover{display:none;}
	.musical .musical-person2 .arrow2:hover img{display:none;}
	.musical .musical-person2 .arrow2:hover img.on-hover{display:block;}
	.musical .musical-person2 .arrow2 .text{
		font-size:0;
		position: absolute;
		left: 110%;
		white-space: nowrap;
		top: 45%;
		transform: translateY(-50%);
		background-color: white;
		padding:0 2.5px;
	}
	.musical .musical-person2 .arrow2 .text.left-pos{
		left: auto;
		right: 110%;
	}
	.musical .musical-person2 .arrow2:hover .text{
		font-size: 1.1rem;
		padding:5px 2.5px;
	}

	.musical-remark {
		display: block;
		position: absolute;
		right: 0%;
		top: 85%;
		bottom: 10%;
		font-size: 1.45em;
		padding-left: 5%;
	}
	
	.musical-remark p{
		width: 500px;
		
	}
	
	.musical-menu{
		position:relative;
		display:flex;
		width:455px;
		margin-right:-400px;
		transition:margin-right 0.5s;
		background-color:#e3dfd4;
	}
	.musical-menu.open{
		margin-right:0;
	}
	.musical-menu .musical-menu-btn{
		height:100%;
		cursor:pointer;
		width:55px;
		position:relative;
		display:inline-block;
		transition:width 0.5s;
	}
	.musical-menu.open .musical-menu-btn{
		width:40px
	}
	.musical-menu .musical-menu-btn img{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 10px;
	}
	.musical-menu.open .musical-menu-btn img{
		left:50%;
		transform: translate(-50%,-50%) rotate(180deg);
	}
	.musical-menu .musical-menu-btn p{
		position:absolute;
		transform-origin: top right;
		right:10px;
		top:50%;
		transform: rotate(-90deg) translateY(-100%) translateX(50%);
		font-weight:bold;
		font-size:1.1em;
	}
	.musical-menu.open .musical-menu-btn p{
		display:none;
	}
	.musical-menu .musical-menu-detail{
		width:400px;
		margin: 30px 0;
		padding:0px 20px;
		border-left:1px solid #000;
		font-size:1.2em;
	}
	.musical-menu .musical-menu-detail .title{
		display:inline-block;
		background-color:white;
		font-size:1.15em;
		line-height:1.35em;
		margin-bottom:5px;
	}
	.musical-menu .musical-menu-detail .title:not(:first-child){
		margin-top:20px;
	}
	.musical-menu .musical-menu-detail .musical-menu-row{
		width:calc(50% - 3.5px);
		display:inline-block;
		vertical-align:top;
	}
	.musical-menu .musical-menu-detail .musical-menu-row a{
		display:block;
		line-height:1.3em;
	}

	.musical-menu .menu-remark {
		font-size: 0.8em ;
	}

	.musical-caption{
		background-color:#f0e9e1;
		padding-bottom:5px;
		padding-top:35px;
	}
	.musical-caption p{
		font-family:'DIN Bold','Microsoft JhengHei';
		font-size:2.25em;
		width:95%;
		margin:0 auto;
		padding:0 20px;
	}


	@media (max-width: 1700px){
		.musical-remark {
			top: 80%;
		}
	
		.musical-remark p{
			width: 260px;
		}
	}
	@media (max-width: 1024px){
		.musical-caption{padding-top:30px;}
		.musical-caption p{font-size:1.65em;}
		
		.musical-wrapper .pattern-top{position:absolute;left:0;max-width:100%;top:50px;width: 100%;max-width: 450px;}
		.musical-wrapper .pattern-bottom{position:absolute;right:0;max-width:100%;bottom:0;width: 100%;max-width: 450px;}
		

		.musical-menu{
			position: fixed;
			left: 0;
			top: 54.22px; /*base on header*/
			overflow:auto;
			width: 100%;
			padding-bottom:45px;
			margin-right:0;
			overflow:hidden;
			height:45px;
			transition:height 0.5s;
			z-index:3;
		}
		.musical-menu.open{
			height:calc(100% - 54.22px);
		}
		.musical-menu .musical-menu-btn-text{    
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 1.15em;
			width: 100%;
			text-align: center;
			padding: 7px 0;
			background-color: #e3dfd4;
			transition:padding 0.5s;
		}
		.musical-menu.open .musical-menu-btn-text{padding:16px 0;}
		.musical-menu .musical-menu-btn{position:absolute;height:45px;width:100%;bottom:0;transition:border 0.5s;}
		.musical-menu.open .musical-menu-btn{
		    transform: translateX(-50%);
			left:50%;
			width:90%;
			border-top: 1px solid #000;
			height:35px;
		}
		.musical-menu .musical-menu-btn img{transform: translateX(-50%) rotate(-90deg);left:50%;bottom: 0px;width:10px;top:auto;}
		.musical-menu.open .musical-menu-btn img{transform:translate(-50%,-50%) rotate(90deg);top:50%;}
		.musical-menu .musical-menu-btn p{display:none;}
		.musical-menu .musical-menu-detail{width:100%;border-left:0;height:0;overflow:auto;width:90%;max-width:400px;padding:0;margin:0 auto;transition:all 0.5s;padding-bottom:30px;}
		.musical-menu.open .musical-menu-detail{height:100%;padding-top:50px;}
		
		.musical .musical-person .arrow{display:none;}

		.musical .musical-person2 .arrow2{display:none;}

		.musical-remark {display: none;}
		
		/* Hide scrollbar for Chrome, Safari and Opera */
		.musical-menu .musical-menu-detail::-webkit-scrollbar{
		  display: none;
		}

		/* Hide scrollbar for IE, Edge and Firefox */
		.musical-menu .musical-menu-detail{
		  -ms-overflow-style: none;  /* IE and Edge */
		  scrollbar-width: none;  /* Firefox */
		}
	}
	@media (max-width: 600px){
		.musical-caption{padding-top:20px;height:50px;display: flex;align-items: flex-end;}
		.musical-caption p{padding:0 10px;font-size:5vw;}

		.musical-remark {
			display: none;
		}
		
	}
/* ==========================================================================
	Musical Popup
   ========================================================================== */	
   #musicalModal{z-index:1049;}
   #musicalModal .modal-dialog{width:90%;max-width:1360px;padding: 50px 0;}
   #musicalModal .modal-content{
		background: transparent;
		box-shadow: none;
		border: none;
   }
   #musicalModal .modal-content .modal-body{
	   padding:0;
	   display:flex;
	   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   }
   #musicalModal .left{
	    width:37%;
		display: flex;
		align-items: center;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
   }
   #musicalModal[color-type="red"] .left{
	    background-image:url(../images/common/popup_bg_percussion.jpg);
		background-color: #974949;
   }
   #musicalModal[color-type="blue"] .left{
	   background-image:url(../images/common/popup_bg_woodwind.jpg);
	   background-color: #6888a1;
   }
   #musicalModal[color-type="green"] .left{
	   background-image:url(../images/common/popup_bg_brass.jpg);
	   background-color: #678b5d;
   }
   #musicalModal[color-type="yellow"] .left{
	   background-image:url(../images/common/popup_bg_strings.jpg);
	   background-color: #f69757;
   }
   #musicalModal .left img{width:85%;max-width:85%;margin:75px auto;}
   #musicalModal .right{
	   background-color: #e3dfd4;
	   width:63%;
	   font-size:1.25em;
   }
   #musicalModal .right p{
	   line-height:1.3em;
	   color:#000;
	   margin-bottom:20px;
   }
   #musicalModal .right .title{
	   background-color:#f0e9e1;
	   font-size:1.45em;
	   font-family:'DIN Bold','Microsoft JhengHei';
	   padding:0 15px;
	   padding-top:25px;
	   line-height:1em;
	   margin-bottom:0;
   }
   #musicalModal .right .desc{
	   padding:20px 15px;
   }
   #musicalModal .right .close-btn{
	   position:absolute;
	   right:10px;
	   top:10px;
   }
   #musicalModal .right .label-text{
	   padding:10px;
	   padding-bottom:0;
	   line-height:1em;
	   background-color:white;
	   display:inline-block;
	   vertical-align: middle;
	   margin-right:10px;
   }
   #musicalModal .audio-btn img{
	   display:none;
   }
   #musicalModal[color-type="red"] .audio-btn img.red{
	    display:block;
   }
   #musicalModal[color-type="blue"] .audio-btn img.blue{
	   display:block;
   }
   #musicalModal[color-type="green"] .audio-btn img.green{
	   display:block;
   }
   #musicalModal[color-type="yellow"] .audio-btn img.yellow{
	   display:block;
   }
   
   #musicalModal .iframe-container{
		width: 100%;
		max-width: 400px;
		margin: 0 auto;		   
   }
   #musicalModal .iframe-container .iframe-wrapper{
	   width:100%;
	   padding-top: 60.5%;
		position: relative;
   }
   #musicalModal .iframe-container iframe{
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
   }
   
   .modal-backdrop.show{opacity:0;}
   .vertical-alignment-helper {
		display:table;
		height: 100%;
		width: 100%;
		pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
	}
	.vertical-align-center {
		/* To center vertically */
		display: table-cell;
		vertical-align: middle;
		pointer-events:none;
	}
	.modal-content {
		/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
		width:inherit;
		max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
		height:inherit;
		/* To center horizontally */
		margin: 0 auto;
		pointer-events: all;
	}
	@media (min-width: 1025px){
		#musicalModal .right {
			min-height: 625px;
		}	
	}
	@media (max-width: 1024px){
		#musicalModal .modal-dialog{padding: 80px 0;}
		#musicalModal .modal-content .modal-body{flex-wrap:wrap;}
		#musicalModal .left,
		#musicalModal .right{
			width:100%;
		}
		#musicalModal .left img{
			max-width:400px;
			margin:60px auto;
		}
		#musicalModal .right .title{
		    margin-top: -20px;
			width: 80%;
		}
		body.open-menu #musicalModal{overflow:hidden;}
	}

/* ==========================================================================
	Popup Modal
   ========================================================================== */	
	#popupModal{
		line-height:1.5em;
	}
	#popupModal .popup-title{
	   position:relative;
	}
	#popupModal .popup-title p{
	   font-size:2em;
	   color:#cc2c06;
	}
	#popupModal .news-block{
	   padding:30px 0;
	}
	#popupModal .news-block .title{
	   font-size:1.5em;
	   color:#0a6e81;
	   text-align:center;
	   margin-bottom:20px;
	}
	#popupModal .news-block .desc{
	   font-size:1.2em;
	   color:#333;
	}
	#popupModal .news-block .desc table{
	   max-width:100%;
	}
	#popupModal .news-block .desc .table-wrapper{
	   margin:30px 0;
		max-width:100%;
		overflow:auto;
	}
	#popupModal .news-block .desc table th,
	#popupModal .news-block .desc table td{
	   padding:10px;
	   border:1px solid red;
	}
	#popupModal .news-block .desc table tr:first-child td{
	   color:#0a6e81;
	}
	#popupModal .close-btn{
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-50%);
		width: 3%;
		min-width:20px;
		cursor:pointer;
	}
	#popupModal .modal-dialog{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		min-height: calc(100% - (2rem * 2));
	}
	@media (min-width: 1192px){
		#popupModal .modal-dialog{
			width: 1100px;
		}
	}
	#popupModal .modal-content{
	   width:100%;
	   border-radius: 0px;
	}
	#popupModal .modal-body{
	   padding: 5% 6%;
	}
/* ==========================================================================
	Loading overlay
   ========================================================================== */	
	.loading-overlay{
		position:fixed;
		left:0;
		top:0;
		height:100%;
		width:100%;
		background-color:#f9f7f8;
		z-index:9999;
	}
	.loading-overlay img{
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		width:10%;
		max-width:100px;
		min-width:75px;
	}
	body.loading-overlay-open{
		overflow:hidden;
	}
/* ==========================================================================
	Zoom
   ========================================================================== */	
	.zoom {
	  background-position: 50% 50%;
	  position: relative;
	  width: 500px;
	  overflow: hidden;
	  cursor: zoom-in;
	}
	.zoom img:hover {
	  opacity: 0;
	}
	.zoom img {
	  transition: opacity 0.5s;
	  display: block;
	  width: 100%;
	}
/* ==========================================================================
	Lufy
   ========================================================================== */
	sup  
	{
		font-family: none;
		left: 0;
		font-size: 70%;
		padding-top:-5%;
		vertical-align: top; position: relative; top: -0.5em;
	}
	#musicalModal .right .desc .desc-content
	{
		text-align: justify;
     　	text-justify: auto;
	}