@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
:root {
	--main-color: #4581A7;
	--second-color: #73B3DB;
	--third-color: #0C2F54;
}
/*---DEFAULT---*/ 
html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body { background:#000000; }
body::before{ display: block; content: ''; position: fixed; z-index: -1; top: -20%; left: 0; width: 100%; height: 120%; background: url(../images/bg2.jpg); background-size: cover;}
body, th, td, input { font-size: 100%; }
a { text-decoration: none; }
p { font-size: 1em; line-height: 1.8em; margin-bottom: 1em; color: #333; font-weight: 400;}
li { font-size: 1em; line-height: 1.8em; color: #333; font-weight: 400;}
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans TC', sans-serif; font-weight: 700;}
h1 { font-size: 2.142em; line-height: 1.1333em; margin-bottom: .2666em; }
h2 { font-size: 1.714em; line-height: 1.1666em; margin-bottom: .4555em; }
h3 { font-size: 1.429em; line-height: 1.4em; margin-bottom: .4em; }
h4 { font-size: 1.143em; line-height: 1.5em; margin-bottom: .4555em; }
h5 { font-size: 1em; line-height: 1.5em; margin-bottom: .5em; }
h6 { font-size: 0.857em; line-height: 1.5em; margin-bottom: .4555em; }
a:link, a:visited { text-decoration: none;}
::selection { background: var(--main-color); color: #FFF;}
	/*SCROLL BAR*/
	body.pc::-webkit-scrollbar{ width:8px; }
	body.pc::-webkit-scrollbar-track{ background:#000;}
	body.pc::-webkit-scrollbar-thumb{ background:var(--main-color); }
	body.pc::-webkit-scrollbar-thumb:hover{ background:var(--second-color); }
@media only screen and (max-width: 992px) {
	p,li { font-size: 15px; }
}
/*------*/

/*---loading_box---*/
.loading_box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999;}
.loading_box::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;  background: url(../images/loading.gif) no-repeat center center; background-size: 60px; }
.loading_box::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: var(--third-color);}
.loading_box .icon{ width: 40px; }
.loading_box .icon img{ display: block; width: 100%;}
/*------*/

/* =============================================================================
   BASIC END
   ========================================================================== */


/* =============================================================================
   MODULE
   ========================================================================== */

/*---page width---*/
.inner-width { position: relative; max-width:1200px; margin: 0 auto;}
@media only screen and (max-width: 1280px) {
	.inner-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 576px) {
	.inner-width { max-width: calc(100% - 60px); margin: 0 30px;}
}
/*------*/

/*---title_bar---*/
.title_bar{ position: relative; text-align: left; margin: 0; padding: 0;}
.title_bar.left{ text-align: left; }
.title_bar.right{ text-align: right; }
.title_bar.center{ text-align: center; }
.title_bar .title{ position: relative; display: block; margin: 0; font:600 60px/1em 'Jost', 'Noto Sans TC', sans-serif;}
.title_bar .title b{ display: block; font: 600 18px/1.1em 'Jost', 'Noto Sans TC', sans-serif; margin-bottom: 10px; letter-spacing: 2px;}
.title_bar .title span{ display: block; color: #FFF;}
.title_bar .title span.sm{ font-size: 40px;}
.title_bar .title span.ap{ font-size: 24px; line-height: 1em;}
@media only screen and (max-width: 992px) {
	.title_bar .title span{ font-size: 40px; line-height: 1.2em;}
}
@media only screen and (max-width: 576px) {
	.title_bar .title span.sm{ font-size: 30px; line-height: 1.2em;}
	.title_bar .title span.ap{ font-size: 20px;}
}
/*------*/

/*---button---*/
.btn_more{ position: relative; display: inline-block; color: var(--second-color); text-align: center; padding: 0 20px; border-radius: 4px; background: transparent; border: solid 1px var(--second-color); box-sizing: border-box; vertical-align: middle;
	font: 600 16px/40px 'Jost', sans-serif; overflow: hidden;
	transition: 200ms ease;
}
.btn_more:hover, .btn_more:focus{ color: #FFF; border: solid 1px var(--second-color); background: var(--second-color); padding: 0 20px;}
.btn_send{ position: relative; display: inline-block; min-width: 120px; line-height: 40px; text-align: center; padding: 0 20px; border-radius: 4px; color: var(--second-color); border: solid 1px var(--second-color); background: transparent; box-sizing: border-box;
	font: 600 16px/40px 'Jost', sans-serif; overflow: hidden;
	transition: 200ms ease;
}
.btn_send:hover, .btn_send:focus{ color: #FFF; background: var(--second-color);}
.btn_send.disabled{ color: #FFF; background: var(--second-color); opacity: 0.2; cursor: default;}


/*------*/

/*---to_top---*/
.to_top{ position: fixed; cursor: polato; bottom: -60px; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; background: var(--main-color); border-radius: 30px 0 0 0; color: #FFF; font-size: 20px; z-index: 100; transition: 300ms ease;}
.to_top:hover{ background: var(--second-color); color: #FFF;}
.to_top.ed{ bottom: 0; }
/*------*/

/* =============================================================================
   MODULE END
   ========================================================================== */

/* =============================================================================
   BLOCK
   ========================================================================== */
#wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden;}
#content { position: relative;}
/* =============================================================================
   BLOCK END
   ========================================================================== */

/* =============================================================================
   HEADER
   ========================================================================== */
#header { position:fixed; z-index:1000; width: 100%; top: 0; left:0; }

/*---logo---*/
#header .logo { position: absolute; top: 10px; left: 10px; z-index: 1;
	transition: 300ms ease;
}
#header .logo a { display: flex; width: 60px; height: 60px; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); border-radius: 30px; backdrop-filter: blur(10px);}
#header .logo a img{ width: 30px;}
@media only screen and (max-width: 1600px) {
	#header .inner-width{ max-width: 1400px;}
}
@media only screen and (max-width: 992px) {
	#header .inner-width{ margin: 0 10px;}
}
/*------*/

/*---MENU---*/
/*menu_btn*/
.menu_btn{ position: absolute; top:10px; right:10px; z-index: 100; display: flex; width: 60px; height: 60px; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); border-radius: 30px; backdrop-filter: blur(10px); cursor: pointer;} 
.menu_btn>div{ position:absolute; width:30px; height:3px; background: #FFF; left: 15px; transition: 0.2s ease-in; }
.menu_btn.on>div{ background: #FFF; }
.menu_btn .m1{ top:19px; width: 30px;}
.menu_btn .m2{ top:29px; width: 30px;}
.menu_btn .m3{ top:39px; width: 30px;}
.menu_btn.on .m1{ top:29px; right: 10px; width: 30px; transform: rotateZ(45deg) }
.menu_btn.on .m2{ opacity: 0; width:0; right:10px;}
.menu_btn.on .m3{ top:29px; right: 10px; width: 30px; transform: rotateZ(-45deg); }
/*lan_menu*/
.lan_menu{ position: absolute; top:10px; right:80px; z-index: 100; display: flex; padding: 0 15px; height: 60px; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); border-radius: 30px; backdrop-filter: blur(10px); cursor: pointer;} 
.lan_menu .icon{ display: flex; align-items: center; height: 40px; margin-right: 10px;}
.lan_menu span{ font: 600 18px/40px 'Jost', 'Noto Sans TC', sans-serif; color: #FFF; line-height: 40px; }
.lan_menu .list{ position: absolute; top: 70px; width: 100%; background: rgba(0, 0, 0, 0.5); border-radius: 20px; overflow: hidden; 
	pointer-events: none;
	opacity: 0;
	transform: translateY(-100px);
	transition: 300ms ease;
}
.lan_menu.on{ background: var(--second-color);}
.lan_menu.on .list{ 
	pointer-events: visible;
	opacity: 1;
	transform: translateY(0px);
}
.lan_menu .list a{ display: block; font: 600 18px/40px 'Jost', 'Noto Sans TC', sans-serif; color: #FFF; line-height: 40px; padding: 0 20px; text-align: center;
	transition: 300ms ease;
}
.lan_menu .list a:hover{ background-color: var(--second-color);}
.lan_menu .list a+a{ border-top: solid 1px rgba(255,255,255,0.2);}
/*top_menu*/
.top_menu{ padding: 80px; position:fixed; top:0; left: 0; width:100%;  z-index:100; height: 100%; box-sizing: border-box; letter-spacing: 0.1em; overflow: auto; opacity: 0; pointer-events: none;
	background: var(--third-color);
	transition: 300ms ease;
}
.top_menu::before{ display: block; content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url(../images/bg.jpg); background-size: cover; opacity: 0.05;}
.top_menu ul{ display: block; text-align: left; list-style: none; margin: 0 auto; padding: 0; max-width: 400px; border-radius: 20px; overflow: hidden;}
.top_menu>ul>li{ display: block; border-left:none; margin: 0; padding: 0;}
.top_menu>ul>li { display: block; border-top: solid 1px var(--second-color); }
.top_menu>ul>li:first-child{ border: none;}
.top_menu>ul>li>a{ display: block; padding:20px 10px; line-height: 1.2em; font-size: 16px; color: var(--second-color); text-align: center;
	transition: 300ms ease;
}
.top_menu>ul>li>a span{ display: block; font:700 30px/1.1em 'Jost', 'Noto Sans TC', sans-serif; }
.top_menu>ul>li>a b{ display: block; font: 600 18px/1.4em 'Jost', 'Noto Sans TC', sans-serif; letter-spacing: 4px; }
.top_menu>ul>li>a:hover{ color: #b6e3ff;}
.top_menu>ul>li>a.cur { color: #FFF; background-color: transparent; cursor: default;}
.top_menu.on{ opacity: 1; pointer-events:unset}
.top_menu_mask{ display:block; position:fixed; top:0; left:100%;; width:100%; height:100%; z-index:0; opacity:0; background: rgba(0,0,0,0.8); transition: opacity 500ms ease-in; }
.top_menu_mask.on{ left:0; opacity:1; z-index: 2;}
@media only screen and (max-width: 576px) {
	.top_menu{ padding: 80px 30px; }
}

/*------*/
/* =============================================================================
   HEADER END
   ========================================================================== */


/* =============================================================================
   FOOTER
   ========================================================================== */
#footer { position:relative; padding:  40px 0; z-index: 200; background: #000;}
#footer .foot_logo{ text-align: center; max-width: 180px; margin: auto;}
#footer .attention {display: block; text-align: center; margin-bottom: 10px;}
#footer .attention a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-size: 24px; color: #FFF; 
	transition: 300ms ease;
}
#footer .attention a img{ display: inline-block; width: 24px; vertical-align: middle; margin-top: -4px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(89deg) brightness(109%) contrast(101%);}
#footer .attention a:hover{ color: var(--second-color); background: #FFF;}
#footer .attention a:hover img{ filter: invert(62%) sepia(43%) saturate(403%) hue-rotate(159deg) brightness(101%) contrast(86%); }
#footer .copyright { color: #FFF; text-align: center; font: 400 12px/20px sans-serif; }
#footer .copyright span{ display: block; }
#footer .copyright a{ display: inline-block; color: #FFF; text-decoration: underline;}
/* =============================================================================
	FOOTER END
	========================================================================== */


/*---top_banner---*/
.top_banner { position: relative; height: calc(90vh); max-height: 900px; overflow: hidden;}
.top_banner .cover{ position:relative; top:0; left:0; width:100%; height:100%; z-index: 0;}
.top_banner .cover::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1;}
.top_banner .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.top_banner .txt{ position:absolute; top:0; left:0; width:100%; height: 100%; z-index: 100;
	filter: blur(20px); opacity: 0;
	transform: translateX(200px);
	transition: 500ms ease;
}
.top_banner .txt .inner-width{ display: flex; justify-content: center; align-items: center; height:100%; }
.top_banner .txt .title{ color: var(--second-color); font:700 70px/1.05em 'Jost', 'Noto Sans TC', sans-serif; text-align: center; max-width: 550px;}
.top_banner .txt .title b{ display: block; font: 600 18px/1.1em 'Jost', 'Noto Sans TC', sans-serif; margin-bottom: 10px; }
.top_banner .txt .title span{ display: block; margin-bottom: 20px; border-bottom: solid #73B3DB 1px; padding-bottom: 20px;}
.top_banner .txt .title p{ font-size: 16px; color: var(--second-color); font-weight: 500; letter-spacing: 4px; margin-bottom: 0;}
.top_banner .swiper-slide-active .txt{
	filter: blur(0); opacity: 1;
	transform: translateX(0);
}
.top_banner .swiper-pagination-bullet{width:10px;height:10px;background:var(--main-color);opacity:0.5;border-radius:5px;}
.top_banner .swiper-pagination-bullet-active{opacity:1;width:30px;}

@media only screen and (max-width: 992px) {
	.top_banner { height: 80vh; min-height: 400px;}	
	.top_banner .txt .title{ font-size: 50px;}
}
@media only screen and (max-width: 576px) {
	.top_banner { height: 90vh;}	
	.top_banner .txt .title{ font-size: 40px;}
}
/*------*/

/*---page_banner---*/
.page_banner { position: relative; min-height: 400px; overflow: hidden;}
.page_banner .cover{ position:absolute; top:0; left:0; width:100%; height:100%; z-index: 0;}
.page_banner .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.page_banner .txt{ position:absolute; top:0; left:0; width:100%; height: 100%; z-index: 100; display: flex; align-items: end;}
.page_banner .txt .inner-width{ width: 100%;}
.page_banner .txt .title{ color: #FFF; font:700 70px/1.05em 'Jost', 'Noto Sans TC', sans-serif; }
.page_banner .txt .title b{ display: block; font: 600 18px/1.1em 'Jost', 'Noto Sans TC', sans-serif; margin-bottom: 10px; letter-spacing: 4px; }
.page_banner .txt .title span{ display: block; margin-bottom: 20px; padding-bottom: 20px;}
@media only screen and (max-width: 992px) {
	.page_banner { min-height: 300px;}
	.page_banner .txt .title{ font-size: 50px;}
}
@media only screen and (max-width: 576px) {
	.page_banner .txt .title{ font-size: 40px;}
}
/*------*/

/*---wbg---*/
.wbg{ position: absolute; z-index: -1;  top: 0; width: 100%; height: 100%;}
.wbg .item{ position: absolute; top: -50%; left: 0; width: 100%; height: 150%; }
.wbg .item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.wbg .item2{ position: absolute; top: -50%; left: 0; width: 100%; height: 150%; }
.wbg .item2::before{ position: absolute; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
	background: rgba(0, 0, 0, 0.70);
	backdrop-filter: blur(15px);
}
.wbg .item2 img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.wbg .item3{ position: absolute; top: -50%; left: 0; width: 100%; height: 150%; }
.wbg .item3::before{ position: absolute; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
	background: rgba(10, 10, 10, 0.90);
}
.wbg .item3 img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.wbg .item4{ position: absolute; top: -50%; left: 0; width: 100%; height: 150%; }
.wbg .item4::before{ position: absolute; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
	background: rgba(10, 10, 10, 0.80);
}
.wbg .item4 img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}


.wbg .bg{ position: absolute; top: 0%; left: 0; width: 100%; height: 100%; }
.wbg .bg.bc1{ background: #111;}
/*------*/

/*---info_box---*/
.info_box{ position: relative; padding: 5rem 0; overflow: hidden; }
.info_box .txt{ color: #FFF; width: 100%;}
.info_box .txt.sm{ max-width: 800px; margin: auto;}
.info_box .txt.xs{ max-width: 560px; margin: auto;}
.info_box .txt p{ color: #FFF;}
.info_box .txt li{ color: #FFF;}
.info_box .pdf_list{ position: relative; display: flex; gap: 50px; padding: 20px 0; justify-content: center; flex-wrap: wrap;}
.info_box .pdf_list a{ display: block; text-align: center; width: 220px;}
.info_box .pdf_list a img{ max-width: 100%; border-radius: 10px;}
.info_box .pdf_list a span{ display: block; color: #FFF; margin-top: 10px;}
.info_box .tab_list{ max-width: 800px; margin: auto; padding-top: 130px; margin-top: 40px; overflow: auto;}
.info_box .tab_list th{ position: relative; font-size: 18px; background-color: rgba(100,100,100,0.6); padding: 8px 16px;}
.info_box .tab_list td{ font-size: 16px; background-color: rgba(80,80,80,0.6); padding: 8px 16px; font-weight: 400;}
.info_box .tab_list th.hl{ color: #9DD9FF; }
.info_box .tab_list td.hl{ color: #9DD9FF; font-weight: 700;}
.info_box .tab_list table{ border: solid 1px #5B5B5B; min-width: 700px;}
.info_box .tab_list .cover{ position: absolute; top: -130px; left: 0;}
.info_box .video_item{ display: block; position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 20px;}
.info_box .video_item::before{ display: block; content: ''; padding-bottom: 56.25%;}
.info_box .video_item::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/icon_play.svg) rgba(0, 0, 0, 0.5) center center no-repeat;}
.info_box .video_item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.info_box .attention {display: flex; gap: 10px; margin-left: 4px;}
.info_box .attention a{ width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-size: 24px; color: #000; background: var(--second-color);
	transition: 300ms ease;
}
.info_box .attention a img{ display: inline-block; width: 24px; vertical-align: middle; margin-top: -4px; }
.info_box .attention a:hover{ color: #FFF; background: var(--main-color);}
.info_box .attention a:hover img{ filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(89deg) brightness(109%) contrast(101%);}

@media only screen and (max-width: 992px) {
	.info_box{ padding: 4rem 0; }
}
@media only screen and (max-width: 576px) {
	.info_box .tab_list{ padding: 130px 30px 0 30px; margin: 0 -30px;}
}
/*------*/

/*---about_box---*/
.about_box{ position: relative; padding: 5rem 0; overflow: hidden; min-height: 700px; display: flex; align-items: center;}
.about_box .txt{ max-width: 560px; margin: 0 auto; color: #FFF;}
.about_box .txt p{ color: #FFF;}
@media only screen and (max-width: 992px) {
	.about_box{ padding: 4rem 0; }
}
@media only screen and (max-width: 576px) {
	.about_box{ padding: 3rem 0; }
}
/*------*/

/*---app_box---*/
.app_box{ position: relative; height: auto; }
.app_box .item_list{ position: relative;}
.app_box .item_list .item{ position: relative; display: block; width: 100%; height: 400px; overflow: hidden;}
.app_box .item_list .item::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(115, 179, 219, 0.5); z-index: 1; opacity: 0;
	transition: 200ms ease; 
}
.app_box .item_list .item:hover::before{ opacity: 1;}
.app_box .item_list .item .inner-width{ display: flex; height: 100%; justify-content: flex-start; align-items: center;}
.app_box .item_list .item .cover{ position: absolute; z-index: -1;  top: 0; width: 100%; height: 100%;}
.app_box .item_list .item .cover .bg{ position: absolute; top: -100%; left: 0; width: 100%; height: 200%; object-fit: cover;}
.app_box .item_list .item .cover .bg::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;}
.app_box .item_list .item .cover .bg img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.app_box .item_list .item .title{ position: relative; z-index: 2; color: #FFF; font: 500 60px/1.1em 'Jost', 'Noto Sans TC', sans-serif; }
.app_box .item_list .item .title b{ display: block; font: 500 18px/1.1em 'Jost', 'Noto Sans TC', sans-serif;  }
.app_box .item_list .item .title span{ display: block;}
.app_box .item_list .item .title .con{ font-size: 30px; line-height: 1em; color: var(--second-color); font-weight: 500;}
@media only screen and (max-width: 1280px) {
	.app_box .item_list .item .inner-width{ max-width: 100%; }
	.app_box .item_list .item .title{ width: 560px; margin: auto;}
	.app_box .item_list .item .title{ font-size: 40px; line-height: 1.1em;}
	.app_box .item_list .item .title .con{ font-size: 20px; line-height: 1.1em;}
}
@media only screen and (max-width: 576px) {
	.app_box .item_list .item{ height: 300px;}
}
/*------*/

/* =============================================================================
   INNER LAYOUT
   ========================================================================== */

/*---EDITOR---*/
.edit img{ max-width: 100%; height: auto !important;}
.edit iframe{ max-width: 100%;}

/*---text img---*/
.pic_br20{ position: relative; display: block; overflow: hidden; border-radius: 20px;}
.pic_br20 img{ width: 100%;}
.pic_br20.s43::before{ display: block; content: ''; padding-bottom: 75%;}
.pic_br20.s43 img{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.if_br20{ position: relative; display: block; overflow: hidden; border-radius: 20px;}
.if_br20::before{ display: block; content: ''; padding-bottom: 75%;}
.if_br20 iframe{  position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*------*/

/*===POPUP===*/
/*---pop_box---*/
.pop_box{ position:fixed; top:0%; left:0; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch; z-index:1000; display: none;}
.pop_box.on{ top:0; opacity:1;}
.pop_box .mask{  position: fixed; top:0%; left:0; width:100%; height:100%; z-index:1; background: rgba(0,0,0,.85); opacity:1;
	transition: 800ms ease;
}
.pop_box .view{ position: absolute; top: 0; left: 0; width: 100vw; min-height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.pop_box .close_btn{ position: relative; width:24px; text-align:center; z-index:100; opacity:0.5; margin: 20px auto; cursor: pointer;}
.pop_box .close_btn.in{ position: absolute; top: 10px; right: 10px; margin: 0;}
.pop_box .close_btn.fixed{ position: fixed; top: -44px; right: -44px; margin: 0; padding: 10px; width: 44px; height: 44px; background: #000;}
.pop_box.on .close_btn.fixed{ top: 10px; right: 10px; opacity: 0.9;}
.pop_box .close_btn img{ display: block; max-width:100%;}
.pop_box .close_btn:hover{ opacity:1;}
.pop_box .video { position: relative; width: 100%; z-index: 10; }
.pop_box .video::before{ content: ''; display: block; padding-bottom: 56.25%;}
.pop_box .video iframe{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
	/*txt*/
	.pop_box .txt{ position: relative; max-width:1200px; z-index:10; box-sizing: border-box; border-radius: 10px;  background: #FFF;}
	.pop_box .txt .con{ position: relative; padding: 30px ;}
	.pop_box .txt .con .name{ font:700 32px/1em 'Josefin Sans', sans-serif; margin-bottom: 10px;}

@media only screen and (max-width: 1280px) {
	.pop_box .txt{ margin: 40px;}
}
@media only screen and (max-width: 720px) {
	.pop_box .txt{ margin: 40px 20px;}
	.pop_box .txt .cover{ flex: 0 0 100%;}
	.pop_box .txt .con{ padding: 20px ; flex: 0 0 100%; }
}
/*------*/

/* =============================================================================
   INNER LAYOUT END
   ========================================================================== */

/*---pswp-caption-conten---*/
.pswp__dynamic-caption{color:#fff;position:absolute;width:100%;left:0;top:0;transition:opacity 120ms linear !important;}
.pswp-caption-content{display:none;}
.pswp__dynamic-caption a{color:#fff;}
.pswp__dynamic-caption--faded{opacity:0 !important;}
.pswp__dynamic-caption--aside{width:auto;max-width:300px;padding:20px 15px 20px 20px;margin-top:70px;}
.pswp__dynamic-caption--below{width:auto;max-width:700px;padding:15px 0 0;}
.pswp__dynamic-caption--on-hor-edge{padding-left:15px;padding-right:15px;}
.pswp__dynamic-caption--mobile{width:100%;background:rgba(0,0,0,0.5);padding:10px 15px;right:0;bottom:0;top:auto !important;left:0 !important;}