/*---yt_box---*/
.yt_box{ position: relative; display: flex; z-index: 1; flex-wrap: wrap;}
.yt_box .item{ flex: 0 0 50%;}
.yt_box .item.full{ flex: 0 0 100%;}
@media only screen and (max-width: 992px) {
	.yt_box .item{ flex: 0 0 100%;}
}
/*----*/

/*===POPUP===*/
/*---pop_box---*/
.pop_box{position:fixed;left:0;width:100%;-webkit-overflow-scrolling:touch;z-index:1000;display:none;top:0;opacity:1;height:100%;overflow:auto;}
.pop_box .mask{position:fixed;top:0%;left:0;width:100%;height:100%;z-index:1;background:rgba(0,0,0,.7);background-size:cover;opacity:0;transition:800ms height ease,800ms opacity ease;}
.pop_box.on .mask{ opacity:1;}
.pop_box .title_bar{ margin-bottom: 1em;}
.pop_box .txt{ position: relative; max-width:600px; background:#FFF; margin:50px auto; z-index:10; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 10px; overflow: hidden;}
.pop_box .txt.xl{ max-width: 1200px;}
.pop_box .txt.sm{ max-width: 350px; padding: 40px 0; background: transparent; box-shadow: none; border: none;}
.pop_box .close_btn{ position: absolute; top: 10px; right: 10px; width:40px; height: 40px; }
.pop_box .close_btn .fixed{ position: fixed; width:40px; height: 40px; line-height: 38px; text-align:center; z-index:10; cursor: pointer; font-size: 24px; border-radius: 20px; background: #FFF; color: #DF603C; border:solid 1px #CCC;}
.pop_box .close_btn .fixed:hover{ background: #DF603C; color: #FFF;}
.pop_box .cover{ height: 500px; }
.pop_box .con{ padding: 40px; }
.pop_box .list-title{ font:800 20px/1.6em 'Inter', 'Noto Sans TC', sans-serif; color: #333;}
.pop_box .tel{ font:800 30px/1.6em 'Inter', 'Noto Sans TC', sans-serif; color: #DF603C;}
@media only screen and (max-width: 1200px) {
	.pop_box .txt.xl{ margin: 50px 20px;}
}
@media only screen and (max-width: 992px) {
	.pop_box .cover{ height: 0; padding-bottom: 50%; }
	.pop_box .con{ padding: 50px 20px; }
}
@media only screen and (max-width: 576px) {
	.pop_box .txt{ margin: 50px 20px;}
}
/*NEW*/
.pop_box .pop_txt.vi{ display: flex; align-items: center; height: calc(100vh - 160px);}
.pop_box .video { position: relative; width: 100%; border-radius: 20px; overflow: hidden;}
.pop_box .video::before{ content: ''; display: block; padding-bottom: 56.25%;}
.pop_box .video iframe{ position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%;}
.pop_box.on .video iframe{ display: block;}
/*close_btn*/
.pop_box .close_btn.fixed{ position: fixed; top: -44px; right: -44px; margin: 0; background: rgba(0, 0, 0, 0.2); cursor: pointer;}
.pop_box.on .close_btn.fixed{top:6px;right:8px;opacity:0.8;stroke:#4f4f4f;stroke-width:1px;fill:#f2f2f2;}
.pop_box.on .close_btn.fixed:hover{opacity:1;fill:#FFF;}

/*pop_txt*/
.pop_box .pop_txt{ position: relative; max-width:520px; margin:20vh auto; z-index:10; box-sizing: border-box; }
.pop_box .pop_txt.inner{ background:#FFF; margin: 80px auto; border-radius: 10px; overflow: hidden;}
.pop_box .pop_txt.xxl{ max-width: 1200px; margin: 80px auto;}
.pop_box .pop_txt.xl{ max-width: 1000px; margin: 80px auto;}
.pop_box .pop_txt.lg{ max-width: 720px; margin: 80px auto;}
.pop_box .pop_txt.sm{ max-width: 480px; margin: 80px auto;}
/*view*/
.pop_box .view{ position: relative; padding: 40px;}
@media only screen and (max-width: 1200px) {
	.pop_box .pop_txt.xxl{ margin: 80px 0;}
	.pop_box .pop_txt.xxl.vi{ margin: 80px 20px;}
}
@media only screen and (max-width: 992px) {
	.pop_box .pop_txt.xl{ margin: 80px 0;}
	.pop_box .view{padding:20px;}
}
@media only screen and (max-width: 720px) {
	.pop_box .pop_txt.lg{ margin: 80px 0;}
}
@media only screen and (max-width: 576px) {
	.pop_box .pop_txt .pop_title .name{ font:500 16px/1.4em 'Roboto', sans-serif; }
	.pop_box .pop_txt.sm{ margin: 80px 0; max-width: 576px;}
	.pop_box .pop_txt .cover_lg { position: relative; max-height: inherit; }
	.pic_lg{ position: relative;  display: block; width: calc( 100% + 60px); margin:-20px -20px 20px -20x;}
	.pic_lg img{ position: relative; width: calc(100%+ 40) ; margin:-20px 0 20px -20x;}
}	
/*------*/

/*---video_box---*/
.video_box{ position: relative; padding: 60px 0 40px;}
.video_box .list{ position: relative; padding:0 60px 60px;}
.video_box .list .item{ position: relative; display: block; cursor: pointer;}
.video_box .list .item .pic{position:relative;width:100%;margin:0;overflow:hidden;border-radius:20px;transition:opacity 500ms ease,transform 500ms ease;}
.video_box .list .item .pic::before{ content: ''; display: block; padding-bottom: 56.25%;}
.video_box .list .item .pic::after{display:block;position:absolute;color:#FFF;opacity:0.9;z-index:2;top:50%;left:50%;margin:-16px 0 0 -16px;width:32px;height:32px;line-height:32px;text-align:center;font-size:32px;font-family:"FontAwesome";font-weight:900;content:"\f144";font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased;transition:500ms ease-in-out;text-shadow:0 0 10px rgba(0,0,0,0.2);}
.video_box .list .item .title{ margin: 20px 0 10px; text-align: left; font-size: 18px; font-weight: 700; color: #222; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow: hidden;}
.video_box .list .item .con{ margin: 0 0 10px 0; text-align: left; font-size: 14px; color: #666; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow: hidden;}
.video_box .list .item:hover .pic{ transform: scale(1.02); }
.video_box .swiper-pagination-bullets{ bottom: 0;}
.video_box .swiper-pagination-bullet{ background: #16A2A3; border: solid 0.5px #FFF; width: 10px; height: 10px;}
.video_box .swiper-button-next,.video_box .swiper-button-prev{top:20px !important;width:40px !important;background:#16A2A3;height:100% !important;opacity:0.5;transition:opacity 500ms ease-in-out;}
.video_box .swiper-button-next:hover,.video_box .swiper-button-prev:hover{opacity:1;}
.video_box .swiper-button-prev,.video_box .swiper-rtl .swiper-button-next{left:0 !important;}
.video_box .swiper-button-next,.video_box .swiper-rtl .swiper-button-prev{right:0 !important;}
.video_box .swiper-button-next.swiper-button-disabled,.video_box .swiper-button-prev.swiper-button-disabled{opacity:0 !important;}
.swiper-button-next:after,.swiper-button-prev:after{font-size:20px !important;color:#FFF;}
@media only screen and (max-width: 576px) {
	.video_box .swiper-button-next, .video_box .swiper-button-prev { display: none;}
	.video_box{ position: relative; padding: 40px 0 20px;}
	.video_box .cover .item .pic{ border-radius: 10px;}
	.video_box .list{ position: relative; padding:0 40px 40px;}
	.video_box .list .item .pic{ border-radius: 10px;}
}
/*------*/