/* ========================================================================================================
                                     Light Box Video (改善現有樣式)
   ======================================================================================================== */

   .modal-content, 
   .lightbox_modal.modal #lightbox_iframe {
       border-radius: 6px;
   }

   /* Partner Video Lightbox */
   .lightbox_richcontent .video-image {
    border-radius: 6px 0px 0px 6px;
  }

#lightbox_iframe {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* Close Button */
.modal-content .modal-header button.close {
    z-index: 2;
    position: relative;
}



/* LightBox > 背景黑色 */
.modal-backdrop.in {
    opacity: 0.8 !important;

    /* 底部模糊 */
    backdrop-filter: blur(5px);
}



/* Home Play Video >> 小 Icon */
.home_channel_videos a.play_btn::before {
    width: 100%;
    height: 100%;
    background: rgba(0%,0%,0%,.25) url(/file/template/1/images/icons/Play_Icon_Sline.png) no-repeat center center;
    background: rgba(0%,0%,0%,.25) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Sline.png) no-repeat center center;
	filter: drop-shadow(1px 5px 5pxrgba(0,9,35,0.8));
	transition: all .3s ease-in-out 0s;
}

/* Play Video for Light Box >> 大 Icon */
a.play_btn::before:not(a.mega-menu-advertisement-image.play_btn::before)  {
    width: 100%;
    height: 100%;
    /*background: rgba(0%,0%,0%,.2) url(/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center; */
	background: rgba(0%,0%,0%,.1) url(/file/template/1/images/icons/Play_Icon_XSolidT.png) no-repeat center center;
    background: rgba(0%,0%,0%,.1) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_XSolidT.png) no-repeat center center;
	filter: drop-shadow(1px 5px 5pxrgba(0,9,35,0.8));
	transition: all .3s ease-in-out 0s;
}


/* Video Button > Hover */
a.play_btn:hover::before, 
.home_channel_videos a.play_btn:hover::before {
    background-color: rgba(0%,0%,0%,.15);
    transition: all .2s ease-in-out 0s;
}


.videos-item .caption h4 {
    font-size: 0.9em !important;
}


.modal-header h4 {
    color: #000;
    font-size: 1.2em !important;
    font-weight: 400 !important;
	padding-bottom: 0px !important;
}


.modal-header {
    border-bottom: none !important;
    padding: 15px 15px 11px 17px !important;
}

.modal-body {
    padding: 5px !important;
}

.fluid-width-video-wrapper {
    min-height: 400px;
    padding-top: 50%;
}

.fluid-width-video-wrapper iframe, 
.fluid-width-video-wrapper object, 
.fluid-width-video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-dialog {
    /*max-width: 915px;*/
    max-width: 760px;
    width: 97%;
}

/*  1200 以上 */
@Media (min-width: 1200px) {

    .videos-item .caption {
    display: flex;
    align-items: center;
    }

    .videos-item .caption h4 {
    display: block;
    width: 100%;
    }

}

/*  1366 以上 */
@Media (min-width: 1366px) {
    .modal-dialog {
        /*max-width: 915px;*/
        max-width: 900px;
        width: 97%;
    }
}


/*  1500 以上 */
@Media (min-width: 1500px) {

	.modal-dialog {
	max-width: 1000px;
	}

}


/*  1900 以上 */
@Media (min-width: 1900px) {

	.modal-dialog {
	max-width: 1100px;
	}

}



/*  1390 以下 */
@Media (max-width: 1390px) {
    .modal-dialog {
    -webkit-transform: scale(0.9) translate(0,-25%);
    -ms-transform: scale(0.9) translate(0,-25%);
    -o-transform: scale(0.9) translate(0,-25%);
    transform: scale(0.9) translate(0,-25%) !important;
    }
}








/* ========================================================================================================
                       放大 Light Box Section (放大目前現有的所有 Lightbox 播放區)
   ======================================================================================================== */

   .Xlarge_Box.Visible-Title .modal-content, 
   .Xlarge_Box.Visible-Title .lightbox_modal.modal #lightbox_iframe, 
   .Xlarge_Box .modal-content, 
   .Xlarge_Box .lightbox_modal.modal #lightbox_iframe, 
   .Visible-Title .modal-content, 
   .Visible-Title .lightbox_modal.modal #lightbox_iframe {
       border-radius: 6px;
   }

.Xlarge_Box #lightbox_iframe {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}


/*  1366 以上 */
@Media (min-width: 1366px) {

    /* for 一般 Lightbox */
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg, 
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"] {
    max-width: 1100px;
    width: 50% !important;
    margin-top: 9% !important;

    max-width: 1100px;
    width: 65% !important;
    margin-top: 5% !important;
    }

    /* for Rich Content Lightbox */
    .Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog {
    max-width: 1100px;
    width: 85% !important;
    margin-top: 9% !important;
    }

    /* for for Rich Content Lightbox (NoOutline_HideTitle) > ..modal-dialog */
    .Xlarge_Box.NoOutline_HideTitle div[id^="modal-"].modal.fade.in .modal-dialog, 
    .NoOutline_HideTitle.Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog {
    margin-top: 7% !important;
    }

    /* for for Rich Content Lightbox (NoOutline_HideTitle) > .fluid-width-video-wrapper */
    .Xlarge_Box.NoOutline_HideTitle div[id^="modal-"].modal.fade.in .modal-dialog .fluid-width-video-wrapper, 
    .NoOutline_HideTitle.Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog .fluid-width-video-wrapper {
    min-height: 600px; /* 要再測試 */
    }


    /* for Image-Gallery-Lightbox */
    .Xlarge_Box div#showroom_info_modal.modal.in .modal-dialog, 
    .Xlarge_Box div.image_gallery_lightbox.modal.in .modal-dialog {
    max-width: 1200px;
    width: 95% !important;
    }


    /* .Xlarge_Box + .Visible-Title (標題可見) */
    .Xlarge_Box.Visible-Title .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg, 
    .Xlarge_Box.Visible-Title .lightbox_modal.fade.in div[class^="modal-dialog"] {
    width: 50% !important;
    max-height: 630px !important;
    margin-top: 2% !important;
    }

}


/*  1550 以上 */
@Media (min-width: 1550px) {

    .Xlarge_Box .image_gallery_lightbox .modal-content button.close, 
    .modal-content button.close:not(#download_form .modal-content button.close):not(.lightbox_modal .modal-content button.close):not([id*="modal-"].modal.fade.in .modal-content button.close):not(.lightbox_richcontent button.close) {
    left: 1175px !important;
    left: 97% !important;
    }

}



/*  1900 以上 */
@Media (min-width: 1900px) {


    /* for 一般 Lightbox */
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg, 
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"] {
    max-width: 1100px;
    width: 50% !important;
    margin-top: 9% !important;

    max-width: 1100px;
    width: 65% !important;
    margin-top: 5% !important;
    }

    /* for Rich Content Lightbox */
    .Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog {
    max-width: 1100px;
    width: 85% !important;
    margin-top: 9% !important;
    }

    /* for for Rich Content Lightbox (NoOutline_HideTitle) > ..modal-dialog */
    .Xlarge_Box.NoOutline_HideTitle div[id^="modal-"].modal.fade.in .modal-dialog, 
    .NoOutline_HideTitle.Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog {
    margin-top: 7% !important;
    }

    /* for for Rich Content Lightbox (NoOutline_HideTitle) > .fluid-width-video-wrapper */
    .Xlarge_Box.NoOutline_HideTitle div[id^="modal-"].modal.fade.in .modal-dialog .fluid-width-video-wrapper, 
    .NoOutline_HideTitle.Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog .fluid-width-video-wrapper {
    min-height: 600px;
    }


    /* for Image-Gallery-Lightbox */
    .Xlarge_Box div#showroom_info_modal.modal.in .modal-dialog, 
    .Xlarge_Box div.image_gallery_lightbox.modal.in .modal-dialog {
    max-width: 1700px;
    width: 85% !important;
    }

    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg img, 
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"] img, 
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg, 
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"] {
    max-height: 740px !important;
    }

    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg img, 
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"] img {
    height: 100%;
    width: auto;
    }


    /* .Xlarge_Box + .Visible-Title (標題可見) */
    .Xlarge_Box.Visible-Title .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg, 
    .Xlarge_Box.Visible-Title .lightbox_modal.fade.in div[class^="modal-dialog"] {
    margin-top: 4% !important;
    }


}



/*  1900 以上 */
@Media (min-width: 2000px) {

    /* for 一般 Lightbox */
    .Xlarge_Box .lightbox_modal.fade.in .modal-dialog2.modal-lg, 
    .Xlarge_Box .lightbox_modal.fade.in div[class*="modal-dialog"] {
    margin-top: 7% !important;
    }

    /* Rich Content 裡呼叫的 Lightbox 模組 */
    .modal-content button.close:not(#download_form .modal-content button.close):not(.lightbox_modal .modal-content button.close):not(.lightbox_richcontent button.close) {
    left: unset !important;
    right: 0 !important;
    }


}


@media (min-width: 1281px) and (max-width: 1366px) {

	/* for 一般 Lightbox */
	.Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg, 
    .Xlarge_Box .lightbox_modal.fade.in div[class^="modal-dialog"] {
	max-width: 1100px;
	width: 50% !important;
	margin-top: 9% !important;
	margin-top: 16.5% !important;
	}

	/* for Rich Content Lightbox */
	.Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog {
	max-width: 1100px;
	width: 85% !important;
	margin-top: 16.5% !important;
	}

	/* for for Rich Content Lightbox (NoOutline_HideTitle) > ..modal-dialog */
	.Xlarge_Box.NoOutline_HideTitle div[id^="modal-"].modal.fade.in .modal-dialog, 
	.NoOutline_HideTitle.Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog {
	margin-top: 7% !important;
	}

	/* for for Rich Content Lightbox (NoOutline_HideTitle) > .fluid-width-video-wrapper */
	.Xlarge_Box.NoOutline_HideTitle div[id^="modal-"].modal.fade.in .modal-dialog .fluid-width-video-wrapper, 
	.NoOutline_HideTitle.Xlarge_Box div[id^="modal-"].modal.fade.in .modal-dialog .fluid-width-video-wrapper {
	min-height: 600px; /* 要再測試 */
	}


	/* for Image-Gallery-Lightbox */
    .Xlarge_Box div#showroom_info_modal.modal.in .modal-dialog, 
	.Xlarge_Box div.image_gallery_lightbox.modal.in .modal-dialog {
	max-width: 1200px;
	width: 95% !important;
	}


    /* .Xlarge_Box + .Visible-Title (標題可見) */
    .Xlarge_Box.Visible-Title .lightbox_modal.fade.in div[class^="modal-dialog"].modal-lg, 
    .Xlarge_Box.Visible-Title .lightbox_modal.fade.in div[class^="modal-dialog"] {
    width: 48% !important;
    max-height: 568px !important;
    margin-top: 2% !important;
    }


}







/* iPad >> 979 以下 */
@Media (max-width: 979px) {

    #header.dark {
    z-index: 100 !important;
    }

    /* Lightbox >> 模塊 */
    #showroom_info_modal.modal.in .modal-dialog {
    width: 95% !important;
    margin-top: 20% !important;
    margin-top: 25% !important;
    }

    /* Lightbox > Close Button */
    #showroom_info_modal .modal-content button.close {
    font-size: 25px !important;
    top: -56px !important;
    left: unset !important;
    right: 0px !important;
    }

    /* Colse Button >> 手機版時 (在 .modal-content) >> 因為要譨 .modal-content 能 Scoll >> 所以設 overflow:hidden >> 會消失 */
    #showroom_info_modal .modal-content button:has(i.fa-times-circle).close, 
    .image_gallery_lightbox .modal-content button:has(i.fa-times-circle).close {
    font-size: 18px !important;
    top: 0px !important;
    left: unset !important;
    right: 0px !important;
    font-weight: 200;

    color: #000 !important;
    position: fixed;
    top: 2px !important;
    right: -11px !important;
    background-color: rgba(255, 255, 255, 0.8);
    }

    /* Colse Button >> 手機版時 (在 .modal-content) >> 因為要譨 .modal-content 能 Scoll >> 所以設 overflow:hidden >> 會消失 */
    #showroom_info_modal .modal-content button:has(i.fa-times-circle).close .fa-times-circle:before, 
    .image_gallery_lightbox .modal-content button:has(i.fa-times-circle).close .fa-times-circle:before {
    content: "\f057";
    content: "×";
    }

    /* Lightbox > Content Block > 變成垂直塊狀顯示 */
    #showroom_info_modal .modal-content.row {
    display: block;
    padding: 1% 1% !important;
    position: relative;
    
    overflow-x: hidden;
    overflow-y: scroll;
    height: 75vh;

    border-color: #fff !important;
    border-width: 1px 0px 3px 0px;
    border-style: solid;
    }

    #showroom_info_modal .modal-content .showroom_info {
    max-height: unset !important;
    height: auto !important;
    min-height: unset;
    }

    /* Lightbox > Html > Left Image */
    #showroom_info_modal div.html .left_Section img {
    width: 95% !important;
    }

    /* Lightbox > Right Image */
    #showroom_info_modal .flexslider .slider-wrap img {
    width: 98%;
    width: 100%;
    display: block;
    }

    /* 隱藏灰線 */
    #showroom_info_modal .modal-content .flexslider > .slider-wrap {
    border-left: 1px solid transparent !important;
    }


    #showroom_info_modal .slide.flex-active-slide {
    min-height: 270px !important;
    }

}


/* Phone >> 480 以下 */
@Media (max-width: 480px) {

    #header.dark {
    z-index: 100 !important;
    }

    #showroom_info_modal.modal.in .modal-dialog {
    margin-top: 40% !important;
    }

    #showroom_info_modal .flexslider > .slider-wrap {
    height: auto !important;
    display: block !important;
    width: 98%;
    }

    #content:has(#showroom_info_modal) .pop .item div span.country {
    font-size: 1.4em !important;
    }

    #content:has(#showroom_info_modal) .pop .item div span {
    padding: 0 0px !important;
    }

    #content:has(#showroom_info_modal) .pop .item div::before {
    display: none !important;
    }

    #showroom_info_modal .act_btn {
    min-height: 50px;
    }

}



















/* ========================================================================================================
                       Get Quote Cart >> Lightbox 模組
   ======================================================================================================== */

@media (min-width: 1024px) {

    .modal.get-quote .close {
    right: -20px !important;
    top: -60px !important;
    }

}

@media (min-width: 768px) {


}