/* DHK Media Gallery v2 */
html[dir] footer.footer{border-color:#222;}
body.modal-open{padding-right:0 !important;}
.remarks, .remarks p{margin-bottom:18px !important;}
#media-gallery{background-color:#000; color:#fff;}

/* Media Gallery header */
.mg-header{display:flex; height:750px; background-image:url(/content/dam/dhk/media-gallery/media-gallery-header-desktop.jpg); background-position:center top; background-repeat:no-repeat; background-size:auto 100%; justify-content:center; align-items:center;}
.mg-header .title h3{color:#fff; font-size:50px; text-align:center; line-height:1.5;}
.mg-header .btn-group{width:100%; margin-top:40px;}
.mg-header .btn-group ul{display:block; list-style:none; width:100%; text-align:center; padding-inline-start:0 !important;}
.mg-header .btn-group ul li{display:inline-block;}
.mg-header .btn-group ul li:not(:first-child){margin-left:40px !important;}
a.btn-style-mg-red{display:block; min-width:155px; padding:18px 28px; background-color:#ED1C24 !important; color:#fff; font-size:20px; font-weight:bold; text-align:center; border-radius:2px;}

/* Media Gallery content */
.mg-assets-wrapper{padding:66px 66px 40px; padding-top:0;}
h4.mg-assets-title{padding:25px 0; text-align:center;}
.mg-assets-grid-row{position:relative; width:100%; padding-top:44.3%;}
.mg-assets-grid-row.single-row{padding-top:22.15%;}
.mg-assets-grid{position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center;}
.mg-assets-grid-row.single-row .mg-assets-grid{flex-direction:row;}
.mg-assets-cell{position:relative; flex-grow:0; flex-shrink:1; flex-basis:50%; width:33.3%; padding:4px;}
.mg-assets-grid-row.single-row .mg-assets-cell{flex-basis:33.3%; width:auto;}
.mg-assets-cell.large{flex-basis:100%;}
.mg-assets-cell a{position:relative; display:block; width:100%; height:100%;}
.mg-assets-cell .thumbnail{width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}

.mg-assets-hover{position:absolute; left:0; top:0; width:100%; height:100%; border:22px solid #fff; border-top:50px solid #fff; display:none;}
.mg-assets-hover > span{display:inline-block; position:absolute; top:-50px; width:100%; height:50px; font-size:13px; text-align:center; line-height:49px; font-family:'Open Sans Semi Bold', Arial, sans-serif; color:#000;}
.mg-assets-hover > span:after{display:inline-block; content:''; width:17px; height:17px; margin-left:12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17.012' viewBox='0 0 17 17.012'%3E%3Cg id='Group_28' data-name='Group 28' transform='translate(-341 -17.838)'%3E%3Cg id='Path_1' data-name='Path 1' transform='translate(338 14.838)' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20,11.506A8.5,8.5,0,1,1,11.5,3,8.5,8.5,0,0,1,20,11.506Z' stroke='none'/%3E%3Cpath d='M 11.4999942779541 18.51223945617676 C 15.35980415344238 18.51223945617676 18.49998474121094 15.36930847167969 18.49998474121094 11.50611877441406 C 18.49998474121094 7.642928600311279 15.35980415344238 4.499998569488525 11.4999942779541 4.499998569488525 C 7.64018440246582 4.499998569488525 4.500004291534424 7.642928600311279 4.500004291534424 11.50611877441406 C 4.500004291534424 15.36930847167969 7.64018440246582 18.51223945617676 11.4999942779541 18.51223945617676 M 11.4999942779541 20.01223945617676 C 6.805574417114258 20.01223945617676 3.000004291534424 16.20391845703125 3.000004291534424 11.50611877441406 C 3.000004291534424 6.808318614959717 6.80558443069458 2.999998807907104 11.4999942779541 2.999998807907104 C 16.19441413879395 2.999998807907104 19.99998474121094 6.808318614959717 19.99998474121094 11.50611877441406 C 19.99998474121094 16.20391845703125 16.19441413879395 20.01223945617676 11.4999942779541 20.01223945617676 Z' stroke='none' fill='%23000'/%3E%3C/g%3E%3Cpath id='Path_2' data-name='Path 2' d='M12,18l3.336,3.338L18.671,18' transform='translate(334.164 8.384)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M18,12v6.676' transform='translate(331.5 11.006)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E%0A"); background-position:center; background-repeat:no-repeat; background-size:100% auto; vertical-align:text-top;}

/* media only */
.mg-assets-cell[data-media-only="true"] > a:before{display:block; content:'For media use only'; position:absolute; left:22px; bottom:22px; padding:8px 12px; background-color:rgba(0,0,0,.75); font-size:13px; font-weight:bold; color:#fff; border-radius:2px;}
/* video style */
.mg-assets-cell[data-type="video"] > a:after{display:block; content:''; position:absolute; left:calc(50% - 37px); top:calc(50% - 37px); width:74px; height:74px; background-image:url("data:image/svg+xml,%3Csvg id='Group_9' data-name='Group 9' xmlns='http://www.w3.org/2000/svg' width='74.142' height='74.142' viewBox='0 0 74.142 74.142'%3E%3Ccircle id='Ellipse_1' data-name='Ellipse 1' cx='22.673' cy='22.673' r='22.673' transform='translate(14.861 14.745)' fill='%23fff'/%3E%3Cpath id='Icon_ionic-ios-play-circle' data-name='Icon ionic-ios-play-circle' d='M40.446,3.375A37.071,37.071,0,1,0,77.517,40.446,37.065,37.065,0,0,0,40.446,3.375ZM55.381,41.141,30.929,55.934a.793.793,0,0,1-1.194-.7V25.653a.79.79,0,0,1,1.194-.7L55.381,39.751A.817.817,0,0,1,55.381,41.141Z' transform='translate(-3.375 -3.375)' fill='%23ed1c24'/%3E%3C/svg%3E%0A"); background-size:100% auto;}

/* Terms Popup */
#mg-terms-popup{padding-right:0 !important; overflow-y:hidden;}
/*#mg-terms-popup a{background-image:-webkit-gradient(linear, left top, left bottom, from(#E2002C), to(#E2002C)),-webkit-gradient(linear, left top, left bottom, from(#000), to(#000)); background-position: 0% 95%; background-repeat: no-repeat;
    background-size: 0% 1px, 100% 1px;}*/
#mg-terms-popup .modal-dialog{/*width:100%;*/ max-width:850px; height:100vh; margin-top:0; margin-bottom:0; display:flex; align-items:center;}
#mg-terms-popup .modal-body{height:100%; max-height:60vh; margin:8px; padding:40px 40px 0; overflow-y:auto; overflow-x:hidden;}
.mg-terms-wrapper{padding-bottom:40px;}
#mg-terms-popup label{display:inline}
#mg-terms-popup ul li, #mg-terms-popup ol li{margin-bottom:3px;}
#mg-terms-popup ul:not(:last-child), #mg-terms-popup ol:not(:last-child){margin-bottom:26px;}
#mg-terms-popup ol.nested{counter-reset:item; padding-inline-start:5px !important;}
#mg-terms-popup ol.nested li{display:block; position:relative; padding-left:20px;}
#mg-terms-popup ol.nested li:before{content:counters(item, ".") ". "; counter-increment:item; position:absolute; left:0; top:0;}
#mg-terms-popup ol.nested li ol.nested li{padding-left:40px;}
.mg-terms-agree-wrapper{/*min-height:100px;*/ margin-top:26px; padding:26px 0 0; border-top:1px solid #dee2e6;}
#mg-terms{margin-right:15px;}
button#btn-mg-terms-agree, a#btn-mg-terms-agree{display:inline-block; margin:0; border-radius:2px; filter:grayscale(100%); pointer-events:none; opacity:.3; transition-duration:.2s !important;}
button#btn-mg-terms-agree.enabled, a#btn-mg-terms-agree.enabled{filter: grayscale(0%); pointer-events: all; opacity:1;}
.mg-terms-agree-wrapper button#btn-mg-terms-agree, .mg-terms-agree-wrapper a#btn-mg-terms-agree{float:right;}
#mg-terms-popup .videopreview{min-height:70px; margin-left:-40px; margin-right:-40px; margin-top:-40px; margin-bottom:40px; background-image:url(/etc.clientlibs/dhk/clientlibs/clientlib-site/resources/images/common/search-loading.gif); background-position:center; background-repeat:no-repeat;}
.mg-video-proceed{padding-top:8px; text-align:center;}

#mg-terms-popup.no-terms .modal-body{padding:0; text-align:center;}
#mg-terms-popup.no-terms .videopreview{margin:0;}
#mg-terms-popup.no-terms .mg-terms-wrapper{display:none;}
#mg-terms-popup.no-terms a#btn-mg-terms-agree{margin-top:8px;}
#mg-terms-popup.no-terms .video-js .vjs-dock-title{text-align:left;}

/* Media Gallery footer */
.mg-footer{position:relative; /*margin-top:-80px;*/ padding-bottom:66px; /*color:#000;*/}
.mg-footer-content{/*max-width:1300px;*/ /*margin:0 16.1%;*/ padding:0 66px; /*background-color:#fff;*/ display:flex; flex-direction:row; justify-content:center; align-items:center; /*border-radius:2px;*/}
.mg-footer-left{/*float:left;*/ font-size:20px; font-family:'Open Sans Bold', Arial, sans-serif;}
.mg-footer-right{/*float:right;*/}
.mg-footer-right ul{display:block; list-style:none; width:auto; text-align:center; padding-inline-start:0 !important; margin-bottom:0 !important;}
.mg-footer-right ul li{display:inline-block; margin-left:20px !important;}
.mg-footer-right a.btn-style-mg-red{min-width:128px; padding:12px 20px; font-size:15px;}


@media (min-width:1921px) {
	
}

@media (max-width:1681px) {
	
}

@media (max-width:1200px) {
	
}


/* tablet breakpoint */
@media (max-width:991px) {
	.mg-header .title h3{font-size:35px;}

	.mg-assets-wrapper{padding:35px 35px 20px; padding-top:0;}
	.mg-assets-cell[data-type="video"] > a:after{left:calc(50% - 28px); top:calc(50% - 28px); width:56px; height:56px;}
	.mg-assets-cell[data-media-only="true"] > a:before{left:8px; bottom:8px;}

	/* Media Gallery footer */
	.mg-footer{margin-top:0;}
	.mg-footer-content{padding:0 35px;}
}


/* mobile breakpoint */
@media (max-width:767px) {
	.mg-header{height:550px; background-image:url(/content/dam/dhk/media-gallery/media-gallery-header-mobile@2x.jpg); background-size:100% auto;}
	.mg-header .title h3{font-size:25px;}
	.mg-header .btn-group ul li{display:block;}
	.mg-header .btn-group ul li:not(:first-child){margin-left:0 !important; margin-top:10px;}
	a.btn-style-mg-red{padding:12px 20px; font-size:15px;}

	.mg-assets-wrapper{padding:26px 26px 15px; padding-top:0;}
	.mg-assets-grid-row, .mg-assets-grid-row.single-row{padding-top:0;}
	.mg-assets-grid{position:relative; height:auto; flex-direction:row;}
	.mg-assets-cell, .mg-assets-grid-row.single-row .mg-assets-cell{flex-basis:100%; width:100%; padding-top:66.4%; margin-bottom:10px;}
	.mg-assets-cell.large{padding-top:134.4%;}
	.mg-assets-cell a{position:absolute; left:0; top:0;}

	#mg-terms-popup .modal-body{max-height:70vh; padding:20px 20px 0;}
	.mg-terms-wrapper{padding-bottom:20px;}
	button#btn-mg-terms-agree{float:none; display:block; margin-top:20px;}
	.mg-terms-agree-wrapper button#btn-mg-terms-agree, .mg-terms-agree-wrapper a#btn-mg-terms-agree{float:none; display:block; text-align:center; margin-top:20px;}
	#mg-terms-popup .videopreview{margin-left:-20px; margin-right:-20px; margin-top:-20px; margin-bottom:20px;}

	/* Media Gallery footer */
	.mg-footer{margin-top:0;}
	.mg-footer-content{padding:0 26px; flex-direction:column;}
	/*.mg-footer-content > div{flex-basis:50%;}*/
	.mg-footer-right{margin-top:15px;}
	.mg-footer-right ul li:first-child{margin-left:0 !important;}
	.mg-footer-left{font-size:18px;}
}


/* touch device fix */
@media (hover: none) and (pointer: coarse) {

}


/* IE 10 & 11 fix */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.mg-assets-grid-row.single-row .mg-assets-cell{flex-basis:32%;}
}


/* TC & SC */
#media-gallery.zh-tc .mg-header .title h3,
#media-gallery.zh-tc .mg-assets-title,
#media-gallery.zh-tc .mg-footer-left,
#media-gallery.zh-cn .mg-header .title h3,
#media-gallery.zh-cn .mg-assets-title,
#media-gallery.zh-cn .mg-footer-left{
	font-weight:bold;
}
#media-gallery.zh-tc .mg-assets-cell[data-media-only="true"] > a:before{content:'僅供傳媒查閱';}
#media-gallery.zh-cn .mg-assets-cell[data-media-only="true"] > a:before{content:'仅供媒体查阅';}