/*=== page-about ===*/
#page-about {
	font-family: "Montserrat", sans-serif;
	--color-gold:#c3996d;
	--color-yellow:#ecc265;
	background:#000;
    overflow: hidden;
	position:relative;
    --neon-blue: #00eeff;
    --glow-blue: 0 0 .2em var(--neon-blue), 0 0 .4em var(--neon-blue), 0 0 1.5em var(--neon-blue);
}
#page-about .fontTC {
	font-family: 'Noto Serif TC', serif;
	font-weight:bold;
}
#page-about img {
	max-width:100%;
}

/*top*/
.bgTOP{
	position:relative;
}
.bgTOP span{
	position:absolute;
    top: 6.4vw;
	z-index:0;
}
.bgCloudTop{
	position:relative;
}
.bgCloudTop span{
	position:absolute;
    left: -18vw;
    z-index: 1;
    top: 24.4vw;
    opacity: 0.6;
}
.bgCloudTop span img{
	width: 80.8vw;
    height: auto;
}
#colud_move_left{
	position:absolute;
	animation:CloudMoveLeft 8s; /*IE*/
	-moz-animation:CloudMoveLeft 8s; /*FireFox*/
	-webkit-animation:CloudMoveLeft 8s; /*Chrome, Safari*/
}

@keyframes CloudMoveLeft{
0%{left:-20vw; opacity:0.4;}
50%{left:-15vw;  opacity:0.5;}
100%{left:-18vw;  opacity:0.6;}
}

.bgCloudCenter{
	position:relative;
}
.bgCloudCenter span{
	position:absolute;
    right: -12.5vw;
    z-index: 0;
    top: -16vw;
    opacity: 1;
}
.bgCloudCenter span img{
	width: 54.1vw;
    height: auto;
}
#colud_move_right{
	position:absolute;
	animation:CloudMoveRight 8s infinite; /*IE*/
	-moz-animation:CloudMoveRight 8s infinite; /*FireFox*/
	-webkit-animation:CloudMoveRight 8s infinite; /*Chrome, Safari*/
}
@keyframes CloudMoveRight{
0%{right:-12.5vw;opacity:1;}
50%{right:-10vw;  opacity:0.8;}
100%{right:-13.5vw;  opacity:1;}
}
@-moz-keyframes CloudMoveRight{
0%{right:-12.5vw;opacity:1;}
50%{right:-10vw;  opacity:0.8;}
100%{right:-13.5vw;  opacity:1;}
}
@-webkit-keyframes CloudMoveRight{
0%{right:-12.5vw;opacity:1;}
50%{right:-10vw;  opacity:0.8;}
100%{right:-13.5vw;  opacity:1;}
}

.bgBTM{
	position:relative;
	z-index:1;
}
.bgBTM span{
	position:absolute;
    top: -20.8vw;
	z-index:0;
}
.bgBTM .bgCloud2 {
	z-index:0; 
	position:absolute; 
    top: 4vw;
	left:0; 
	width:100%; 
	height:100%; 
	background-repeat:no-repeat; 
	background-position: center top; 
	pointer-events:none;
}
#smoke_3{
    position:absolute;
	z-index:2;
    animation:SmokeMove3 10s infinite; /*IE*/
    -moz-animation:SmokeMove3 10s infinite; /*FireFox*/
    -webkit-animation:SmokeMove3 10s infinite; /*Chrome, Safari*/
}
@keyframes SmokeMove3{
	0%{top:0; 
	left:-390px; 
	transform-origin:center bottom; transform: scale(1) rotate(0deg); opacity:0;}
	50%{opacity:0.5;}
	100%{top:-7%; left:0; transform: scale(1.2) rotate(30deg); transform-origin:100% 100%; opacity:0;}
}
@-moz-keyframes SmokeMove3{
	0%{top:0; left:-390px; transform-origin:center bottom; transform: scale(1) rotate(0deg); opacity:0;}
	50%{opacity:0.5;}
	100%{topm:-7%; left:0; transform: scale(1.2) rotate(30deg); transform-origin:100% 100%; opacity:0;}
}
@-webkit-keyframes SmokeMove3{
	0%{top:0; left:-390px; transform-origin:center bottom; transform: scale(1) rotate(0deg); opacity:0;}
	50%{opacity:0.5;}
	100%{top:-7%; left:0; transform: scale(1.2) rotate(30deg); transform-origin:100% 100%; opacity:0;}
}

#smoke_2{
    position:absolute; 
	z-index:2;
    animation:SmokeMove2 10s infinite; /*IE*/
    -moz-animation:SmokeMove2 10s infinite; /*FireFox*/
    -webkit-animation:SmokeMove2 10s infinite; /*Chrome, Safari*/
}
@keyframes SmokeMove2{
	0%{top:0; left:-390px; transform-origin:center bottom; transform: scale(1) rotate(0deg); opacity:0;}
	50%{opacity:0.5;}
	100%{top:-7%; left:0; transform: scale(1.2) rotate(-30deg); transform-origin:0% 100%; opacity:0;}
}
@-moz-keyframes SmokeMove2{
	0%{top:0; left:-390px; transform-origin:center bottom; transform: scale(1) rotate(0deg); opacity:0;}
	50%{opacity:0.5;}
	100%{topm:-7%; left:0; transform: scale(1.2) rotate(-30deg); transform-origin:0% 100%; opacity:0;}
}
@-webkit-keyframes SmokeMove2{
	0%{top:0; left:-390px; transform-origin:center bottom; transform: scale(1) rotate(0deg); opacity:0;}
	50%{opacity:0.5;}
	100%{top:-7%; left:0; transform: scale(1.2) rotate(-30deg); transform-origin:0% 100%; opacity:0;}
}

@media (max-width: 991px) {
.bgCloudTop span {
    left: -18vw;
    top: 90.4vw;
}	
	
.bgCloudCenter span img {
    width: 80vw;
}
.bgCloudCenter span {
    right: -12.5vw;
    top: -10vw;
}
.bgBTM {
    margin-bottom: 5vw;
}
.bgBTM .bgCloud2 {
    top: 18vw;
}
}

/*
@media (max-width: 576px) {
.bgCloudTop span {
	left: -18vw;
	top: 230.4vw;
}
}*/


.top{
	position:relative;
    z-index: 3;
}
.top .contentBOX{
	position:relative;
	padding:0 12.5vw;
	padding-top:8vw;
	display:flex;
	
}
.top .contentBOX .col-brand{
	position:relative;
	width:28.1vw;
}
.top .contentBOX .col-text{
	width:calc(100% - 28.1vw);
	padding-left:6.3vw;
}
.top .contentBOX .col-brand .txtBOX{
	text-align:center;
	position:relative;
	z-index:2;
}
.top .contentBOX .col-brand .txtBOX img{
	width:15vw;
	height:auto;
}
.top .contentBOX .col-brand h2{
    color: #fff;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1;
    font-size: min(max(3.43vw, 46px), 66px);
    text-shadow: var(--glow-blue);
    padding-top: 1.04vw;
    padding-left: 1.04vw;
    text-align: left;
}
.top .contentBOX .col-brand h2 span{
	position:relative;
	top:3.65vw;
}
.top .contentBOX .col-brand h3{
	color:rgba(198,156,109,33%);
	font-weight: bold;
    margin-bottom:0;
	line-height:1;
    font-size: min(max(5vw, 72px), 96px);
	padding-left:3.125vw;
}
.top .contentBOX .col-brand .decoBOX_left{
	position:absolute;
	z-index:1;
    top: 11.27vw;
    left: -1.8vw;
}
.top .contentBOX .col-brand .decoBOX_left img{
	width:25.625vw;
	height:auto;
}
.top .contentBOX .col-text .txtBOX{
	position:relative;
	z-index:2;
}
.top .contentBOX .col-text p{
	color:#fff;
	font-weight: 400;
	line-height:1.6;
    font-size: min(max(0.938vw, 14px), 18px);
	margin-bottom:3.125vw;
}
.top .contentBOX .col-text .decoBOX_right{
	position:absolute;
	z-index:1;
    top: 50%;
    right: 5.208vw;
}
.top .contentBOX .col-text .decoBOX_right img{
	width:6.458vw;
	height:auto;
}
@media (max-width: 1300px) {
.top .contentBOX {
    padding: 0 80px;
    padding-top: 110px;
}
.top .contentBOX .col-brand h2 {
    font-size: min(max(3.43vw, 40px), 66px);
}
.top .contentBOX .col-brand h3 {
    font-size: min(max(5vw, 52px), 96px);
}
}

@media (max-width: 991px) {
.top .contentBOX {
    flex-direction: column;
}
.top .contentBOX .col-brand {
    width: 100%;
	max-width:80vw;
	margin:0 auto;	
}
.top .contentBOX .col-text {
    width: 100%;
    padding-left: 0;
	max-width:80vw;
	margin:0 auto;	
}
.top .contentBOX .col-brand .txtBOX img {
    width: 20vw;
}
.top .contentBOX .col-brand h2 {
    text-align: center;
	margin-left:-16vw;
}
.top .contentBOX .col-brand h2 span {
    top: 0;
    padding-left: 10px;
}
.top .contentBOX .col-brand h3 {
    position: relative;
    top: -4.2vw;
    padding-left: 12.125vw;
}
.top .contentBOX .col-text p {
    margin-bottom: 5.125vw;
}
.top .contentBOX .col-text .decoBOX_right {
    top: 76%;
}
.top .contentBOX .col-brand .decoBOX_left img {
    width: 73.14vw;
}
.top .contentBOX .col-brand .decoBOX_left {
    top: 13.27vw;
}
}

@media (max-width: 576px) {
.top .contentBOX {
	padding: 0 10vw;
	padding-top: 100px;
}
.top .contentBOX .col-brand {
	padding-bottom: 10px;
}
.top .contentBOX .col-brand h2 {
	font-size: 36px;
	margin-left: -24vw;
}	
.top .contentBOX .col-brand h3 {
	font-size: 48px;
	top: -30px;
}
.top .contentBOX .col-brand .txtBOX img {
	width: 120px;
}
.top .contentBOX .col-text p {
	margin-bottom: 30px;
	font-size: 13px;
}	
.top .contentBOX .col-text .decoBOX_right img {
    width: 60px;
}
.top .contentBOX .col-text .decoBOX_right {
    right: 2vw;
}
.top .contentBOX .col-brand .decoBOX_left img {
	width: 94vw;
}
.top .contentBOX .col-brand .decoBOX_left {
    top: 24vw;
	left:-8vw;
}

}

/*factory video*/
#factory {
	position:relative;
	z-index: 3;
}
#videoTXT .texTXT{
	max-width:57.292vw;
	margin:0 auto;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:4.16vw 3.125vw 2.083vw;
}
#videoTXT .col-text{
	width:60%;
    font-size: min(max(2.396vw, 32px), 46px);
	line-height:1.4;
	color:var(--color-yellow);
	
}
#videoTXT .col-img{
	width:40%;
}
#video-control {
  background:url(images/about/img-video_unmute.svg) no-repeat center;
}
.unmute-video {
	background:url(images/about/img-video_mute.svg) no-repeat center !important;
}
#video_mp4 {
	padding-top:6.25vw;
    position: relative;
	z-index:3;
}
#video_mp4 .videoBOX {
	max-width:52.083vw;
	margin:0 auto;
    height: auto;
    padding: 2.125vw;
    position: relative;
    border-radius: 0px;
    background: rgba(0, 0, 0, 0.6);
}
#video_mp4 .videoBOX:after {
	content: "";
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border-radius: 0px;
    border: 0.208vw solid #fff;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    box-shadow: 0 0 0.625vw #2fbfd7, 0 0 0.156vw #2fbfd7, 0 0 0.833vw #2fbfd7, 0 0 0.833vw #2fbfd7, inset 0 0 0.833vw #2fbfd7, inset 0 0 1.042vw #2fbfd7;
}

#video_mp4 .video-image {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

#video_mp4 .video-image img.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    transition: all 1.3s ease;
}
#video_mp4 .video-image img.img-responsive:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

@media (max-width: 1300px) {
#video_mp4 .videoBOX {
    max-width: 58vw;
}
#videoTXT .texTXT {
    max-width: 60vw;
    padding: 3.16vw 3.125vw 2.083vw;
}
#videoTXT .col-img {
    width: 42%;
}
#videoTXT .col-text {
    width: 58%;
    font-size: min(max(2.396vw, 26px), 46px);
}
#video_mp4 {
    padding-top: 8.25vw;
}
#video_mp4 .videoBOX:after {
    box-shadow: 0 0 8px #2fbfd7, 0 0 2px #2fbfd7, 0 0 12px #2fbfd7, 0 0 12px #2fbfd7, inset 0 0 12px #2fbfd7, inset 0 0 16px #2fbfd7;
}
}

@media (max-width: 991px) {
#video_mp4 {
	padding-top: 110px;
}
#video_mp4 .videoBOX {
        max-width: 560px;
}
#videoTXT .texTXT {
	max-width: 580px;
        padding: 40px 3.125vw 2.083vw;
}

#video_mp4 .videoBOX:after {
    box-shadow: 0 0 8px #2fbfd7, 0 0 2px #2fbfd7, 0 0 12px #2fbfd7, 0 0 12px #2fbfd7, inset 0 0 12px #2fbfd7, inset 0 0 16px #2fbfd7;
}
}

@media (max-width: 576px) {
    #video_mp4 {
        padding-top: 60px;
    }
    #video_mp4 .videoBOX {
        max-width: 82vw;
    }
    #videoTXT .texTXT {
        max-width: 82vw;
        flex-direction: column;
    }
    #videoTXT .col-text {
        width: 100%;
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    #videoTXT .col-img {
        width: 80%;
    }
	
}

/*=== video-item ===*/
.video-item video {
    position: absolute;
    width: auto;
    height: 80vh;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: popout .5s;
}
.video-item .audioBOX {
    position: absolute;
    right: 100px;
    bottom: 100px;
}
.video-item .audio-control {
	width:48px;
	height:48px;
}

/*=== modal ===*/
#videoModal.modal .modal-dialog,
#videoModal.modal .modal-content {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
#videoModal.modal .modal-dialog {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}
#videoModal.modal .modal-content {
  border: none;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
  -o-box-shadow: inherit;
  box-shadow: inherit;
  background: rgba(0,0,0,0.75);
}
#videoModal.modal .modal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 0px solid #dee2e6;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#videoModal.modal .modal-body {
  padding: 0;
  height: calc(100% - 3px);
}
#videoModal.modal .modal-header button {
    outline: none;
    float: none;
    position: absolute;
    z-index: 9999;
    opacity: 1;
    color: #fff;
    text-shadow: 0 0px 0 #fff;
    font-weight: 500;
    font-size: 100px;
    top: 0px;
    right:100px;
	background: none;
	border: none;
}
#videoModal.modal button[type="button"] {
  min-width: auto !important;
}
#videoModal.modal-header button[type="button"] {
  line-height: 1;
}
#videoModal.modal.in .modal-dialog {
    vertical-align: middle;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 576px) {
#videoModal.modal .modal-header button {
    font-size: 72px;
    top: 10px;
    right: 20px;
}
.video-item .audio-control {
    width: 48px;
    height: 48px;
}
.video-item .audioBOX {
    right: calc(50% - 48px);
    bottom: 100px;
}
}

/*heading*/
.heading {
	position:relative;
	z-index:3;
}
.heading .headingBOX{
	text-align:center;
	max-width:62.5vw;
	margin:0 auto;
	padding:0 3.125vw;
	padding-top:10.292vw;
	padding-bottom:2.604vw;
}
.heading .headingBOX .col-img img{
	width:8.542vw;
	height:auto;
}
.heading .headingBOX h2{
    font-size: min(max(1.979vw, 26px), 38px);
	color:var(--color-yellow);
    margin-top: 0.6rem;
    margin-bottom: 0.5rem;
}
.heading .headingBOX h2 span{
	padding:0 0.4vw;
}
.heading .headingBOX h2 img.deco_3star{
	width:3.958vw;
	height:auto;
    position: relative;
    top: -0.2vw;
}

.heading .headingBOX p{
    font-size: min(max(0.938vw, 14px), 18px);
	color:#fff;
	padding-top:1.563vw;
}

@media (max-width: 1300px) {
.heading .headingBOX {
    max-width: 72vw;
}
}

@media (max-width: 991px) {
.heading .headingBOX {
	max-width: 90vw;
    padding-top: 110px;
    padding-bottom: 36px;
}
.heading .headingBOX .col-img img {
    width: 18vw;
}
.heading .headingBOX h2 img.deco_3star {
    width: 50px;
    top: -5px;
}
}

@media (max-width: 576px) {
.heading .headingBOX {
	max-width: 96vw;
	padding-top: 80px;
}	
.heading .headingBOX .col-img img {
	width: 100px;
}
.heading .headingBOX h2 {
    font-size: min(max(1.979vw, 20px), 38px);	
}
.heading .headingBOX p {
    font-size: 13px;
    padding-top: 15px;
}
.heading .headingBOX h2 img.deco_3star {
	width: 40px;
	top: -2px;
}
}


/*==review==*/
.reviewBOX {
	z-index:3;
    position: relative;
	text-align:center;
	margin:0 auto;
    padding: 0 50px;
}
.reviewBOX .review-border{
    position: relative;
    padding: 1.56vw 1.1vw;
}
.reviewBOX .review-border:after {
	content: "";
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border-radius: 0px;
    border: 4px solid #fff;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    box-shadow: 0 0 0.625vw #ED1E79, 0 0 0.156vw #ED1E79, 0 0 0.833vw #ED1E79, 0 0 0.833vw #ED1E79, inset 0 0 0.833vw #ED1E79, inset 0 0 1.042vw #ED1E79;
}
.reviewBOX img{
  width: 100%;
  height: auto;
}
.reviewBOX .slider-container {
  position: relative;
  padding: 0px;
}
.reviewBOX .image-slider {
  z-index:2;
}
.reviewBOX .slick-slide {
  text-align: center;
  padding:0 10px !important;
}
.reviewBOX .slick-dots {
    bottom: -35px;
}
.reviewBOX .slick-dots li button:before {
	display:none;
}
.reviewBOX .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}

.reviewBOX .slick-dots li button:before {
    font-family: slick;
    font-size: 8px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    content: '•';
    opacity: .35;
    color: #fff;
}
.reviewBOX .slick-prev:before,
.reviewBOX .slick-next:before {
  font-weight:300;
  line-height:1;
  opacity:1;
  color: #fff;
  font-size: 4.583vw;
}
.reviewBOX .slick-prev:before {
  content: "<";
  text-shadow:
      0 0 2px #fff,
      0 0 4px #00ffff,
      0 0 8px #00ffff,
      0 0 14px #00ffff,
      0 0 20px #00ffff,
      -6px 6px 4px #333;
}
.reviewBOX .slick-next:before {
  content: ">";
  text-shadow:
      0 0 2px #fff,
      0 0 4px #00ffff,
      0 0 8px #00ffff,
      0 0 14px #00ffff,
      0 0 20px #00ffff,
      6px 6px 4px #333;
}
.reviewBOX .slick-next,
.reviewBOX .slick-prev {
    z-index: 2;
	width: 4.583vw;
	height: 4.583vw;
    top: calc(50% - 1.125vw);
}
.reviewBOX .slick-next {
    right: -3.1vw;
}
.reviewBOX .slick-prev {
    left: -3.1vw;
}

@media (max-width: 991px) {
.reviewBOX .review-border {
    padding: 15px 10px;
}
.reviewBOX .slick-dots {
    bottom: -35px;
}
.reviewBOX .slick-dots li button:before {
	display:block;
}
}

@media (max-width: 576px) {
.reviewBOX .review-border:after {
	display:none;
}
.reviewBOX {
    padding: 0;
}
.reviewBOX .slick-next, .reviewBOX .slick-prev{
	display:none;
}
.reviewBOX .slick-prev:before,
.reviewBOX .slick-next:before{
	display:none;
}
.reviewBOX .review-border {
    padding: 0px 0px;
}
.reviewBOX .slick-slide {
    text-align: center;
    padding: 0px !important;
	margin: 0 6px;
}
}

/*==MEDIA-Slide==*/
#media_slide {
	padding-top:0px;
	position:relative;
	z-index: 3;
}
#media_slide .mediaBOX {
	max-width:52.083vw;
    padding: 0 2.125vw;
	margin:0 auto;
    height: auto;
    position: relative;
    border-radius: 0px;
}
#media_slide .media-image {
    position: relative;
    z-index: 2;
    cursor: pointer;
}
#media_slide .media-image img.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    transition: all 1.3s ease;
}
#media_slide .media-image img.img-responsive:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
#media_slide .media-title {
    background: rgba(0, 0, 0, 0.5);
    color: #C69C6D;
	margin-bottom:0;
    font-size: min(max(1.25vw, 16px), 24px);
    text-align: center;
    padding: 1.042vw 0.781vw;
    position: relative;
    bottom: 3.125vw;
    z-index: 2;
}
/*=== slick ===*/
.mediaBOX .slick-prev:before,
.mediaBOX .slick-next:before {
  font-weight:300;
  line-height:1;
  opacity:1;
  color: #fff;
  font-size: 4.583vw;
}
.mediaBOX .slick-prev:before {
  content: "<";
  text-shadow:
      0 0 2px #fff,
      0 0 4px #00ffff,
      0 0 8px #00ffff,
      0 0 14px #00ffff,
      0 0 20px #00ffff,
      -6px 6px 4px #333;
}
.mediaBOX .slick-next:before {
  content: ">";
  text-shadow:
      0 0 2px #fff,
      0 0 4px #00ffff,
      0 0 8px #00ffff,
      0 0 14px #00ffff,
      0 0 20px #00ffff,
      6px 6px 4px #333;
}
.mediaBOX .slick-next,
.mediaBOX .slick-prev {
    z-index: 2;
	width: 4.583vw;
	height: 4.583vw;
    top: calc(50% - 3.125vw);
}
.mediaBOX .slick-next {
    right: 1.521vw;
}
.mediaBOX .slick-prev {
    left: 1.521vw;
}

@media (max-width: 1300px) {
#media_slide .mediaBOX {
	max-width:58vw;	
}
#media_slide .media-title {
    padding: 1.042vw 0.781vw;
    bottom: 3.125vw;
}
}

@media (max-width: 991px) {
#media_slide .mediaBOX {
	max-width: 560px;
}
.mediaBOX .slick-prev:before, .mediaBOX .slick-next:before {
    font-size: 48px;
}
.mediaBOX .slick-prev {
    left: 20px;
}
.mediaBOX .slick-next {
    right: 20px;
}
.mediaBOX .slick-next, .mediaBOX .slick-prev {
    top: calc(50% - 40px);
}
}

@media (max-width: 576px) {
#media_slide .mediaBOX {
	max-width: 82vw;
}
.mediaBOX .slick-prev:before, .mediaBOX .slick-next:before {
	font-size: 36px;
}
#media_slide .media-title {
	padding: 3px 0;
	bottom: 20px;
	font-size: 12px;
}
}

/*=== media-item ===*/
.media-item video {
    position: absolute;
    width: auto;
    height: 80vh;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: popout .5s;
}
.media-item .audioBOX {
    position: absolute;
    right: calc(50% - 1.25vw);
    bottom: 5.729vw;
}
.media-item .audio-control {
	width:2.5vw;
	height:2.5vw;
}
#media-control {
  background:url(images/about/img-video_unmute.svg) no-repeat center;
}
.unmute-media {
	background:url((images/about/img-video_mute.svg ) no-repeat center !important;
}

/*=== modal ===*/
#mediaModal.modal .modal-dialog,
#mediaModal.modal .modal-content {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
#mediaModal.modal .modal-dialog {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}
#mediaModal.modal .modal-content {
  border: none;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
  -o-box-shadow: inherit;
  box-shadow: inherit;
  background: rgba(0,0,0,0.75);
}
#mediaModal.modal .modal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 0px solid #dee2e6;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#mediaModal.modal .modal-body {
  padding: 0;
  height: calc(100% - 3px);
}
#mediaModal.modal .modal-header button {
    outline: none;
    float: none;
    position: absolute;
    z-index: 9999;
    opacity: 1;
    color: #fff;
    text-shadow: 0 0px 0 #fff;
    font-weight: 500;
    font-size: 100px;
    top: 0px;
    right:100px;
	background: none;
	border: none;
}
#mediaModal.modal button[type="button"] {
  min-width: auto !important;
}
#mediaModal.modal-header button[type="button"] {
  line-height: 1;
}

#mediaModal.modal.in .modal-dialog {
    vertical-align: middle;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 576px) {
#mediaModal.modal .modal-header button {
    font-size: 72px;
    top: 10px;
    right: 20px;
}
.media-item .audio-control {
    width: 48px;
    height: 48px;
}
.media-item .audioBOX {
    right: calc(50% - 48px);
    bottom: 7vh;
}
}