@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
/*---DEFAULT---*/
/* html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none; max-width: 1360px; margin: 0px auto; background:#0b0909;} */
/* body { background:#FFF9F4; background-size: 100%; max-width: 1360px;}
body.bc1 { background:#FFF;}
body.bc2 { background:#F8F4F0;}
body, th, td, input { font-size: 100%; }
a { text-decoration: none; }
p { font-size: 1em; line-height: 1.5em; margin-bottom: 0.6em; color: #333; font-family: sans-serif; }
li { font-size: 1em; line-height: 1.5em; color: #333; font-family: sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
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.7em; margin-bottom: .6em; }
h6 { font-size: 0.857em; line-height: 1.7em; margin-bottom: .6em; } */



	a:link, a:visited { text-decoration: none;}
	::selection { background: #222; color: #FFF;}

	/* body.pc::-webkit-scrollbar{ width:8px; }
	body.pc::-webkit-scrollbar-track{ background:#FFF9F4;}
	body.pc::-webkit-scrollbar-thumb{ background:white; }
	body.pc::-webkit-scrollbar-thumb:hover{ background: white; } */
/*------*/

/*---Title---*/

.title_60px{color: #FFF; text-align: center; font-family: Oswald; font-size: 60px; font-style: normal; font-weight: 300; 
line-height: 70px; /* 116.667% */ letter-spacing: 6px; text-transform: uppercase; margin: 0px auto;}

.title_40px {color: #FFF; text-align: center; font-family: Oswald; font-size: 40px; font-style: normal; font-weight: 300;
line-height: 45px; /* 112.5% */ letter-spacing: 4px; text-transform: uppercase; }

.title_18px{color: #F2F2F2; font-family: Noto Sans TC; font-size: 18px; font-style: normal; font-weight: 400; 
	line-height: 24px; /* 133.333% */ text-transform: uppercase;}

.title_16px{color: #FFF; font-family: Noto Sans TC; font-size: 16px; font-style: normal; font-weight: 700;
                 line-height: 20px; /* 125% */ letter-spacing: 3.2px;}
.title_15px{color: #FFF; text-align: center; font-family: Noto Sans TC; font-size: 15px; font-style: normal; 
font-weight: 400; line-height: 20px; /* 133.333% */ text-transform: uppercase;}

.title_15px_2{color: #F2F2F2; text-align: center; font-family: Noto Sans TC; font-size: 15px; 
font-style: normal; font-weight: 400; line-height: 24px; /* 160% */ text-transform: uppercase;}

.title_14px{color: #FFF; font-family: Noto Sans TC; font-size: 14px; font-style: normal; font-weight: 500;
                 line-height: 24px; /* 171.429% */}

.title_12px{color: #FFF; font-family: Noto Sans TC; font-size: 12px; font-style: normal; font-weight: 400;
                 line-height: 24px; /* 200% */}

.title_12px_2{color: #FFF; text-align: center; font-family: Microsoft JhengHei; font-size: 12px; font-style: normal; 
	font-weight: 700; line-height: 18px; /* 150% */}
/*------*/

/*---IMG LOAD---*/
.imgLiquidCenter, .imgLiquidFill{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
.imgLiquid_ready { opacity: 1; }
div.lazy{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
div.lazy.imgLiquid_ready{ opacity: 1;}
img.lazy{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
img.lazy.ed{ opacity: 1;}
/*------*/

/*---SCALE---*/
/* .if_16by9 { position: relative; padding-bottom: 56.25%;}
.if_16by9 iframe{  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}
.if_21by9 { position: relative; padding-bottom: 42.85%;}
.if_21by9 iframe{  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}
.if_4by3 { position: relative; padding-bottom: 75%;}
.if_4by3 iframe{  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}
.if_1by1 { position: relative; padding-bottom: 100%;}
.if_1by1 iframe{  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}
.item_16by9::before{ content: ''; display: block; padding-bottom: 56.25%;}
.item_4by3::before{ content: ''; display: block; padding-bottom: 75%;}
.item_1by1::before{ content: ''; display: block; padding-bottom: 100%;}
.item .s16by9::before{ display: block; content: ''; padding-bottom: 56.25%;}
.item .s4by3::before{ display: block; content: ''; padding-bottom: 75%;}
.item .s1by1::before{ display: block; content: ''; padding-bottom: 100%;} */
/*------*/


/*---ELEMENT---*/
/* .ie { position: fixed; width: 60%; height: 80%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #f2f2f2; z-index: 9999; }
.ie .title { color: #333 !important; font-size: 2em; }
.ie p { text-align: center; color: #333 !important; font-size: 0.9375em; }
.ie a { color: #F36; } */
/*------*/

/*---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: #A78E87;}
.loading_box .icon{ width: 60px; margin-top: 0;}
.loading_box .icon img{ display: block; width: 100%;} */
/*------*/

/* @media only screen and (max-width: 1024px) {

	input::-webkit-date-and-time-value {text-align: left;}
	input[type="date"]::-webkit-inner-spin-button,
	input[type="date"]::-webkit-calendar-picker-indicator { position: relative; display: none; -webkit-appearance: none;}
	input[type="date"]::before{ position: absolute; z-index: 100; display: block; top: 0; right: 0; background: #FFF; width: 36px; height: 36px;
		font-family: "FontAwesome"; content: "\f133"; color: #333; font-size: 16px; line-height: 36px;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
	}
}
@media only screen and (max-width: 576px) {
	.update_pic a{ flex: 0 0 calc(70% - 20px); }
} */

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


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

/*---page width---*/
/* .inner-width { position: relative; max-width:1200px; margin: auto; padding: 2%;}
.txt-width { position: relative; max-width:800px; margin: auto; }
@media only screen and (min-width: 1921px) {
	.inner-width { max-width:1600px;}
	.txt-width { max-width:1000px;}
}
@media only screen and (max-width: 1600px) {
	.inner-width { max-width:1200px;}
}
@media only screen and (max-width: 1200px) {
	.inner-width { margin: 0 25px;}
}
@media only screen and (max-width: 992px) {
	.txt-width { margin: 0 25px;}
}
@media only screen and (max-width: 576px) {
	.inner-width { margin: 0 20px;}
	.txt-width { margin: 0 20px;}
} */
/*------*/

/*---more_bar---*/
/* .more_bar{ position: relative; z-index: 100; text-align: left;}
.more_bar.center{ text-align: center;}
.more_bar.right{ text-align: right;}
.more_bar.pos_tr{ position: absolute; right: 0; top: 0; margin: 0;}
.more_bar.ad{ right: 320px;}
.more_bar .arr{ display: inline-block; margin: 0 20px;  vertical-align: middle; transition: 200ms ease; }
.more_bar .arr:hover{ opacity: 0.5;}
.more_bar>a+a{ margin-left: 10px;} */
/*------*/

/*---cookie_bar---*/
/* .cookie_bar{ position: fixed; bottom: 0; left: 0; padding: 20px; background: rgba(0, 0, 0, 0.9); color: #FFF; width: 100%; z-index: 1000;}
.cookie_bar .txt{ font-size: 14px; margin-bottom: 10px; text-align: center;}
.cookie_bar .txt a{ color: #A57F74;}
.cookie_bar .control_bar{ text-align: center;}
@media only screen and (max-width: 576px) {
	.cookie_bar .txt{ text-align: justify;}
} */
/*------*/

/*---control_bar---*/
/* .control_bar{ position: relative; }
.control_bar>*+*{ margin-left: 5px;}
@media only screen and (max-width: 576px) {
	.control_bar>*{ margin:0 5px 5px;}
} */
/*------*/

/*---title_bar---*/
/* .title_bar{ position: relative; text-align: left; 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:500 30px/1.2em 'Faustina', sans-serif; color: #333; } */
/* .title_bar .title::before{ content: ''; display: block; position: absolute; top: -10px; left: 2px; width: 8px; height: 8px; background: #A57F74; border-radius: 4px;} */
/* .title_bar .sec_title{  font:500 24px/1.2em 'Faustina', sans-serif; color: #222;}
.title_bar .sub_title{  font:400 20px/1.2em 'Faustina', sans-serif; color: #333;}
.title_bar .con{  font:400 15px/1.2em 'Faustina', sans-serif; color: #666; letter-spacing: 1px;}
.title_bar .date{ font:400 20px/1.4em 'Share', sans-serif; color: #85676A;} */

/*---list element---*/
/* .tag_list{ position:relative; z-index: 10; display: flex; flex-wrap: wrap;}
.tag_list.postl{ position: absolute; top:0; left: 0; padding: 5px;}
.tag_list.postr{ position: absolute; top:0; right: 0; padding: 5px;}
.tag_list .item{ font-size: 13px; background: #85676A; padding: 0 8px; line-height: 20px; color: #FFF; border-radius: 4px; margin: 2px;}
.tag_list .item.c1{ background: #F64953;}
.tag_list .item.c2{ background: #F67349;}
.tag_list .item.c3{ background: #a03ce2;}
.tag_list .item.c4{ background: #C28978;}
.tag_list .item.c5{ background: #999;}
.tag_list .item.big{ font-size: 16px; line-height: 2em;} */
/*------*/

/*---tag_menu---*/
/* .tag_menu{ position: relative; display: flex; flex-wrap: wrap;}
.tag_menu .item{ margin: 2px; background: #A8A8A8; color: #FFF; padding: 0 8px; line-height: 24px; font-size: 13px;}
.tag_menu a.item{ background: #C28978; color: #FFF; border-radius: 4px;}
.tag_menu a.item:hover{ background: #e6c472;} */
/*------*/



/*---at_box---*/
/* .at_box{ position: relative;}
.at_box .inner-width{ display: flex; border-bottom: solid 1px #BABABA; padding: 10px 20px;}
.at_box i{ font-size: 24px; line-height: 24px; padding: 5px; color: #A57F74;}
.at_box span{ font-size: 15px; line-height: 24px; padding: 5px; color: #333;}
.at_box span+span::before{ margin-right: 8px; font-size: 14px;
	font-family: "FontAwesome"; content: "\f067"; color: #666;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.at_box.ed{ padding-top: 60px;}
@media only screen and (max-width: 992px) {
	.at_box.fliter.ed{ padding-top: 100px;}
	.at_box .inner-width{ padding: 10px 0;}
} */
/*------*/

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

/* =============================================================================
   BLOCK
   ========================================================================== */
/* #wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden; background:#0b0909;}
#about_box {background: rgba(0, 0, 0, 0.20); backdrop-filter: blur(15px); width: 100%; height: 561px; flex-shrink: 0;}
#content { position: relative; padding-top: 60px;}
#content.path { position: relative; padding-top: 94px;}
#main_block{ position: relative; flex: 0 1 calc(100% - 400px); padding: 0;}

#right_block{ position: relative; flex: 0 1 360px; margin-left: 40px; padding: 0;}

@media only screen and (max-width: 1200px) {
	#main_block{ flex: 0 0 100%;}

	#right_block{flex: 0 0 100%; margin-left: 0;}
}
@media only screen and (max-width: 992px) {
	#content { padding-top: 60px;}

}

@media only screen and (max-width: 992px) {
	#content { padding-top: 60px;}
} */
/* =============================================================================
   BLOCK END
   ========================================================================== */

/* =============================================================================
   HEADER
   ========================================================================== */
/* #header { z-index:1000; width:100%; height: 70px; left:0; background:#0b0909;}
#header::before { position:absolute; display: block; content: ''; z-index:-1; width:100%; top:0; left:0; background: #FFFCFA; height: 60px;
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	
	transition: 300ms ease;
}
#header>.inner-width{ display: flex; justify-content: right; align-items: center; height: 60px;
	transition: 300ms ease;
} */

/*---logo---*/
/* .logo { position: absolute; top: 10px; left: 0;
	transition: 300ms ease;
}
.logo a { height: 40px; display: flex; justify-content: space-between; }
.logo b { display: block; 
	transition: 300ms ease;
}
.logo b img { height: 100%; }
.logo span { display: none;}
.logo span img { height: 100%; } */
/*------*/

/*---top_menu---*/
.top_menu{ box-sizing: border-box; flex: 0 0 calc(100% - 260px);
	transition: 300ms ease; float: right;
}
.top_menu ul{ display: block; list-style:none; margin:0; padding:0; width:100%; box-sizing: border-box; }
.top_menu>ul{ display: flex; justify-content: right;}
.top_menu>ul>li{ position: relative; }
.top_menu>ul>li::before{ content: ''; display: block; position: absolute; bottom: -10px; left: calc(50% - 10px); width: 0; height: 0; border-style: solid; border-width: 0 10.5px 0 10.5px; border-color: transparent transparent #eee4de transparent;
	transition: 500ms ease;
}
.top_menu>ul>li>a{ position: relative; display: block; padding: 10px 20px; font: 500 15px/20px sans-serif; color: white;
	transition: color 500ms ease;
}
.top_menu>ul>li>a:hover { color:black; background: white;}
.top_menu>ul>li.on>a{ color: white;}
.top_menu>ul>li.on::before{ border-style: solid; border-width: 0 10.5px 10px 10.5px; }
.top_menu>ul>li.cur>a{ color: white;}
.top_menu .submenu{ position: fixed; top: 60px; left: 0; width: 100%; background: #EEE4DE; min-width: 100%; overflow: hidden; max-height: 0; padding: 0;
	transition: max-height 500ms ease-in-out, padding 500ms ease-in-out;
}
	.top_menu .on .submenu{ max-height: 800px; padding: 20px 0;}
	.top_menu .submenu .list .title{ border-bottom: solid 1px rgba(0, 0, 0, 0.2); padding: 10px 1em; margin-bottom: 4px; font-weight: 700;}

	.top_menu .submenu .list ul li { position: relative;}

	.top_menu .submenu .pic{ position: relative; width: 240px; height: 180px;}

	.top_menu .submenu .txt{ position: relative; padding: 10px 0;}
	.top_menu .submenu .txt .title{ font-size: 18px; font-weight: 700; margin-bottom: 10px;}
	.top_menu .submenu .txt .con{ font-size: 14px;}

	.top_menu .submenu .list ul li:first-child { border-top: none;}
	.top_menu .submenu .list a{ position: relative; display: block; color: #333; padding: 10px 1em; line-height: 20px; margin:0; font-size: 15px; border-radius: 4px;
		transition: 500ms ease;
	}
	.top_menu .submenu .list a:hover{ background: #FFF; color: #000;}

.separator{
  content: "";
  border-right-style: solid; 
  border-width:1px; 
  border-color:rgba(255, 255, 255, 0.10);
}

/*------*/

/*ed*/
/* #header.ed::before { background: rgb(255, 252, 250, 0.9);} */
/* @media only screen and (max-width: 1280px) {
	.top_menu>ul>li>a { padding: 10px; font-size: 14px;}
	.logo{ top: 14px;}
	.logo a {height: 32px; }
} */

@media only screen and (max-width: 1024px) {
	/*menu_btn*/
	.menu_btn{ position: absolute; top:5px; right:-10px; display:block; width:50px; height:50px; z-index:3000; cursor: pointer;} 
	.menu_btn>div{ position:absolute; width:50px; height:4px; background: white; left: 10px; transition: 0.2s ease-in; }
	.menu_btn.on>div{ background: #FFF; left:10px;}
	.menu_btn .m1{ top:15px; width: 30px;}
	.menu_btn .m2{ top:24px; width: 30px;}
	.menu_btn .m3{ top:33px; width: 30px;}
	.menu_btn:hover .m1,.menu_btn:hover .m2,.menu_btn:hover .m3{ width:30px;}
	.menu_btn.on .m1{ top:25px; left: 10px; width: 30px; transform: rotateZ(45deg) }
	.menu_btn.on .m2{ opacity: 0; width:0; left:10px;}
	.menu_btn.on .m3{ top:25px; left: 10px; width: 30px; transform: rotateZ(-45deg); }
	.top_menu{ padding: 60px 10px 0; position:fixed; top:0 !important; left: initial; right:-100% !important; width:160px;  z-index:100; height: 100%; box-sizing: border-box; letter-spacing: 0.1em; overflow: auto; background: #4C4847;
		transition: right 500ms ease;
	}
	.top_menu ul{ display: block;  text-align: left;}
	
	.top_menu>ul>li{ display: block; border-left:none; margin: 0; padding: 0;}
	.top_menu>ul>li { display: block; border-top: solid 1px #FFF; }
	.top_menu>ul>li:first-child{ border: none;}
	.top_menu>ul>li+li{ border-left: none;}
	.top_menu>ul>li>a{ color:#FFF; margin: 5px 0; padding:10px; line-height: 1.2em; }
	.top_menu>ul>li>a:hover { color: #FFF;}
	.top_menu>ul>li.cur>a { color: #FFF;}
	.top_menu>ul>li>a.cur::before{ top: 8px; left: 4px; margin-left: 0; width: 8px; height: 16px; background-size: 100% auto;}
	.top_menu>ul>li>a:hover::before, .top_menu>ul>li.on>a::before, .top_menu>ul>li.cur>a::before { bottom: 0; }
	.top_menu>ul>li>a.cur {color: #FFF; border: none;}
	.top_menu.on{ right:0 !important; }
	.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;}

	
	.top_menu>ul>li.on>a { color: #FFF;}
	.top_menu>ul>li::before {
		bottom: 10px;
		left: -10px;
		border-width: 10px 0 10px 0;
		border-color: transparent transparent transparent #eee4de;
	}

	.top_menu>ul>li.on::before {
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #eee4de;
	}
	

	.top_menu .submenu{ top: 0; left: 0; width: calc(100% - 160px); min-width: inherit; opacity: 0; overflow: auto;
		transition: opacity 500ms ease-in-out;
	}

	.top_menu .submenu .list{ margin-bottom: 20px;}

	.top_menu .on .submenu{ min-height: 100%; max-height: inherit; height: 100vh; padding: 20px 0; opacity: 1;}


	.nav{ top: 15px; right: 40px; }
}

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


/* =============================================================================
   FOOTER
   ========================================================================== */
/* #footer { position:relative; height: 188px ; background: #000; z-index: 200; }

#footer .soical_div{float: right; text-align:right;}

#footer .copyright { color: #FFF; text-align: center; font: 500 14px/20px sans-serif; }
#footer .copyright a{ display: inline-block; color: #FFF; text-decoration: underline;}
#footer .attention {display: block; flex: 0 0 50%; padding: 0 0 20px 0;}
#footer .attention a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-size: 24px; color: #FFF; border: solid 1px #FFF; margin: 0 5px;
	transition: 300ms ease;
}
#footer .attention a img{ display: inline-block; width: 24px; vertical-align: middle; margin-top: -4px; }
#footer .attention a:hover{ color: black; background: white;}
#footer .attention a:hover img{ filter: invert(33%) sepia(12%) saturate(1148%) hue-rotate(304deg) brightness(94%) contrast(89%); }
@media only screen and (max-width: 992px) {
	#footer>.inner-width{ flex-wrap: wrap;}
	#footer .copyright { flex: 0 0 100%; }
	#footer .attention { flex: 0 0 100%; padding: 0 0 20px 0;}
	#footer .info{ text-align: center;}
	#footer .attention { text-align: center;}
	#footer .copyright { text-align: center;}
}
@media only screen and (max-width: 576px) {
	#footer{ padding-bottom: 110px;}
	#footer .foot_menu ul{ flex-wrap: wrap; padding:0 10px;}
	#footer .foot_menu ul li { flex: 0 0 calc(100% / 3);}
	#footer .foot_menu ul li a{ font-size: 14px; padding: 5px; margin: 5px; border: solid 1px #FFF; text-align: center;}
	#footer .copyright span{ display: block; font-size: 12px; line-height: 1.8em;}
} */
   /* =============================================================================
	  FOOTER END
	  ========================================================================== */

/*---swiper---*/
/* .swiper{width:100%;height:100%;}
.swiper-slide img{display:block; width:100%;}
.swiper-pagination-bullet{ background: #D9D9D9; border: solid 0.5px #FFF; width: 12px; height: 12px;}

.top_banner { position: relative; }
.top_banner .txt{position:absolute;top:0%;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:1;}
.top_banner .fx{position:absolute;top:0%;left:0;width:100%;height:100%;background-repeat:repeat;opacity:0.1;z-index:2;} */
/*------*/

/*---page_banner---*/
.page_banner{ position: relative; overflow: hidden;}

.page_banner .pic{ position: relative; padding-bottom: 24%; width: 100%; height: 700px; flex-shrink: 0;}
@media only screen and (max-width: 576px) {
	.page_banner .pic{ padding-bottom: 35%;}
}
/*------*/
/*---about page---*/
.page_about{ position: relative; overflow: hidden;}

.page_about .title{padding-top: 80px; height:135px; float: center; display: flex; margin: 0px auto; justify-content: center;}

.page_about .content{padding-top: 125px; max-width: 400px; height:140px; float: center; display: flex; margin: 0px auto;}

.page_about .pic{ position: relative; padding-bottom: 24%; width: 100%; height: 561px; flex-shrink: 0;}

.page_about .btn_div{padding-top: 170px; text-align:center; display: flex; align-items:center; justify-content: center;}

.page_about .btn{background-size: cover; background-position: center center; background-repeat: no-repeat; 
	position: relative; width: 140px; height: 40px; flex-shrink: 0; margin:0px auto; padding: 7px;}

.page_about .btn_text{color: #FFF; font-family: Oswald; font-size: 18px; font-style: normal; 
	font-weight: 300; line-height: normal; text-transform: uppercase;}
@media only screen and (max-width: 576px) {
	.page_about .pic{ padding-bottom: 35%;}
}
/*------*/


/*---ser_box---*/
.ser_box{ position: relative; margin: 0 auto; min-height: 600px;}

.ser_box .list{ position: relative;}
.ser_box .list>ul{ display: flex; list-style: none; margin: 0; flex-wrap: wrap;}
.ser_box .list>ul li{ flex: 0 0 25%;}
.ser_box .list>ul li a{ position: relative; display: block; padding-bottom: 100%; overflow: hidden; background: #000; height: 600px; width: 100%;
}
.ser_box .list>ul li a .txt{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; padding: 0 5% 15% 5%;}
.ser_box .list>ul li a .txt .title{ position: relative; text-align: center;}
.ser_box .list>ul li a .txt .title b{ display: block; color: #FFF; font-family: Oswald; font-size: 30px; font-style: normal; font-weight: 300; line-height: 40px; /* 112.5% */ letter-spacing: 4px; text-transform: uppercase; text-align: left;}
.ser_box .list>ul li a .txt .title span{ display: block; color: #F2F2F2; font-family: Noto Sans TC; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; /* 133.333% */ text-transform: uppercase; text-align: left;
 }
.ser_box .list>ul li a .pic{ position: absolute; top: -100px; left: 0; width: 100%; height: calc(100% + 200px); max-height: 600px;}
.ser_box .list>ul li a:hover .pic{
	transform: scale(1.05);
}



@media only screen and (max-width: 1200px) {
	.ser_box .list>ul li a .txt .title b{ font-size: 40px; }
	.ser_box .list>ul li a .txt .title span{ font-size: 16px;}

	.ser_box .list>ul li{ flex: 0 0 50%;}
	.ser_box .list>ul li a{height: 600px;}
	
}
@media only screen and (max-width: 992px) {
	.ser_box{ padding: 40px 0;}
	.ser_box .item_list>ul{ margin: 0 -20px;}
	.ser_box .item_list>ul li a .pic{ flex: 0 0 calc(50% - 40px); margin: 0 20px; border-radius: 10px;}
	.ser_box .item_list>ul li a .pic::before{ padding-bottom: 100%;}
	.ser_box .item_list>ul li:nth-child(2n) a .pic{ flex: 0 0 calc(50% - 40px); margin: 0 20px;}
	.ser_box .item_list>ul li a .txt{ padding: 20px;}
	.ser_box .item_list>ul li:nth-child(2n) a .txt{ padding: 20px;}

	.ser_box .item_pics_list>ul>li{ margin: 0 0 40px 0;}
	.ser_box .item_pics_list>ul>li .item .pics{ width: calc(60% ); margin: 0;}
	.ser_box .item_pics_list>ul>li:nth-child(2n) .item .pics{ margin: 0;}
	.ser_box .item_pics_list>ul>li .item .txt{ width: calc(40% - 40px); padding: 20px 0;}

	.ser_box .pro_list>ul li{ flex: 0 1 50%;}
}
@media only screen and (max-width: 720px) {
	.ser_box{ padding:20px 0;}
	.ser_box .list>ul li{ flex: 0 0 100%;}
	.ser_box .list>ul li a .txt .title b{ font-size: 30px; line-height: 30px; /* 112.5% */ letter-spacing: 3px;}

	.ser_box .item_list>ul{ margin: 0;}
	.ser_box .item_list>ul li a .pic{ flex: 0 0 100%; margin: 0 0 10px 0;}
	.ser_box .item_list>ul li:nth-child(2n) a .pic{ flex: 0 0 100%; margin: 0 0 20px 0;}
	
	.ser_box .item_list>ul li a .txt{ flex: 0 0 100%; padding: 20px 0;}
	.ser_box .item_list>ul li:nth-child(2n) a .txt{ flex: 0 0 100%; padding: 20px 0;}
	

}
/*------*/


/*pix page---*/
/* .zoomImage{
    width:100%;
    height:auto;
    padding: 0px;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}

.page_pix{ position: relative; padding: 40px 0; margin: 0 auto; max-width: 1920px;}

.page_pix .list{position: relative; padding: 40px 0 0;}

.page_pix .list>ul li a .txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex; flex-wrap: wrap; 
justify-content: center; align-items: center;}

.page_pix .list>ul li a .txt .title{position: relative; text-align: left;}

.page_pix .list>ul li a .txt .title b{display: block; color: white; letter-spacing: 0.15em;}

.page_pix .list>ul li a .pic{position: absolute; left: 0; width: 100%; height: calc(100%+100px);}

div.lazy.imgLiquid_ready{opacity: 1;}
div.lazy{transition: opacity 1000ms ease, transform 500ms ease;}

.page_pix .layout{display: flex; align-items: center; align-content: center; flex-wrap: wrap; margin: 0px auto; justify-content: center;}


.page_pix img{width: 100%; max-height: 600px; height: auto;}

.page_pix .layout img{display: inline-block; vertical-align: middle;} */

/*.page_pix .pix{width: 340px; height: 60px; flex-shrink: 0;}*/
/* @media only screen and (max-width: 576px) {
	.page_pix.pic{ padding-bottom: 35%;}
}
@media only screen and (max-width: 1200px) {
	.page_pix .list>ul li a .txt .title b{ font-size: 40px;}
} */
/*------*/

/*---service page---*/
.service_box{ position: relative; overflow: hidden;}

.service_box .title{padding-top: 80px; height:135px; float: center; display: flex; margin: 0px auto; justify-content: center;}

.service_box .content{padding-top: 90px; max-width: 520px; height:140px; float: center; display: flex; margin: 0px auto; justify-content: center; padding-left: 3%; padding-right: 3%;}

.service_box .btn_div{padding-top: 90px; text-align:center; display: flex; align-items:center; justify-content: center;}

.service_box .btn{background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; 
	width: 140px; height: 40px; flex-shrink: 0; margin:0px auto; padding: 7px;}
	
.service_box .btn_text{color: #FFF; font-family: Oswald; font-size: 18px; font-style: normal; 
	font-weight: 300; line-height: normal; text-transform: uppercase;}

.service_box .pic{ position: relative; padding-bottom: 24%; width: 100%; height: 481px; flex-shrink: 0;}
@media only screen and (max-width: 576px) {
	.service_box .pic{ padding-bottom: 35%;}
}
/*------*/
/*new page---*/
.new_box{ position: relative; overflow: hidden;}

.new_box .pic{ position: relative; padding-bottom: 24%; width: 100%; height: 703px; flex-shrink: 0;}

.new_box .pix_div{padding-top: 2%; max-height:135px; margin: 0px auto; justify-content: center; display: flex;}

.new_box .pix_div .pix_format img{display: inline-block; vertical-align: middle;}

.new_box .pix_format{background-size: cover; background-position: center center; background-repeat: no-repeat; 
	position: relative; max-height:300px;  width: 92%; padding-bottom: 20%; margin:0px auto;}

.new_box .content{padding-top: 10%; max-width: 520px; height:140px; float: center; 
	display: flex; margin: 0px auto; justify-content:center;}

.new_box .btn_div{padding-top: 15%; text-align:center; display: flex; align-items:center; justify-content: center;}

.new_box .btn{background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; 
	width: 140px; height: 40px; flex-shrink: 0; margin:0px auto; padding: 7px;}
	
.new_box .btn_text{color: #FFF; font-family: Oswald; font-size: 18px; font-style: normal; 
	font-weight: 300; line-height: normal; text-transform: uppercase;}

@media only screen and (min-width: 576px) and (max-width: 1135px) {
	.new_box .pix_format{width: 46%; max-width:800px; padding-bottom: 10%;}
}

@media only screen and (min-width: 1135px) {
	.new_box .pix_format{width: 40%; max-width:900px; padding-bottom: 8.6%; max-height:900px ;}
}

@media only screen and (max-width: 576px) {
	.new_box .pic{ padding-bottom: 35%;}
 
}
/*------*/

/*---Foot_Ad---*/
.foot_ad{background: #020305; width: 100%; text-align:center;}

.foot_ad .layout{display: flex; align-items: flex-start; align-content: flex-start; gap: 15px; flex-wrap: wrap; margin: 0px auto; padding-left: 10%; padding-right:5% ;}

.foot_ad .pic{background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; flex-shrink: 0;}

.foot_ad .layout img{display: inline-block; vertical-align: middle;}

@media only screen and (max-width: 576px) {
	
}
/*------*/

/*---bg_box---*/
/* .bg_box{ position: relative;}
.bg_box .bg{ position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;}
.bg_box .bg.bc1{ background: #EEE4DE;}
.bg_box .bg.bc2{ background: #F5F0EC;}
.bg_box .bg.bc3{ background: #FFF9F4;}
.bg_box .bg.bc4{ background: #EEE4DE;} */
/*------*/

/*---tip_box---*/
/* .tip_box{ position: fixed; background: #D16719; top: 60px; left: 0; width: 100%; z-index: 200;}
.tip_box .title{  font:500 18px/40px serif; color: #FFF; text-align: right; letter-spacing: 0.2em;} */
/*------*/


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

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


/*---text img---*/
/* .pic_br20{ display: block; overflow: hidden; border-radius: 20px;}
.pic_center{ display: block; max-width: 100%; margin: 0 auto 20px; padding: 0 0 20px 0; text-align: center; }
.pic_center img{ width: 100%; max-width: 500px; height: auto;}
.pic_center figure{ display: block; text-align: left; color: #333; padding: 10px;}
.pic_center.col2 { overflow: auto;}
.pic_center.col2 a{ width:calc(50% - 20px); max-width: none; margin: 0 10px; float: left;}
.pic_left{ display: block; float:left; margin: 0 40px 20px 0; max-width: 45%; }
.pic_left img{ display: block; width: 100%; height: auto;}
.pic_right{ display: block; float:right; margin: 0 0 20px 40px; max-width: 45%; }
.pic_right img{ display: block; width: 100%; height: auto;}
.pic_full{ display: block; max-width: 100%; margin: 0 auto 2em; text-align: center;}
.pic_full img{ width: 100%; max-width: 1600px; height: auto;}
.pic_full figure{ display: block; text-align: left; color: #333; }
.pic_2col{ position: relative; display: flex; margin: 0 -20px; padding: 0 10px;}
.pic_2col>a{ position: relative; display: block; flex: 0 1 50%; margin: 10px;}
.pic_2col>a img{ position: absolute; top: 0%; left: 0%; width: 100% !important; height: 100% !important; object-fit: cover;}
.pic_2col>a::before{ content: ''; display: block; padding-bottom: 75%;}
.pic_3col{ position: relative; display: flex; margin: 0 -20px; padding: 0 10px;}
.pic_3col>a{ position: relative; display: block; flex: 0 1 50%; margin: 10px;}
.pic_3col>a img{ position: absolute; top: 0%; left: 0%; width: 100% !important; height: 100% !important; object-fit: cover;}
.pic_3col>a::before{ content: ''; display: block; padding-bottom: 75%;}
@media only screen and (max-width: 992px) {
	.edit .text{ padding: 2rem;}
}
@media only screen and (max-width: 720px) {
	.pic_right{ float:none; margin: 0 0 20px 0; max-width: 100%; width: 100%; }
	.pic_left{ float:none; margin: 0 0 20px 0; max-width: 100%; width: 100%; }
	.edit .text{ padding: 1rem;}
} */
/*------*/

/*---button---*/
.btn_more{ margin: 5px;}
.btn_more{ position: relative; display: inline-block; color: white; min-width: 120px; text-align: center; padding: 0 30px; border-radius: 20px; background: transparent; border: solid 1px white; box-sizing: border-box; vertical-align: middle;
	font: 400 16px/36px sans-serif; letter-spacing: 0.1em;
	transition: 200ms ease;
}
.btn_more:hover, .btn_more:focus{ color: black; border: solid 1px white; background: white;}

.btn_inn:hover{ color: #72595C;}
@media only screen and (max-width: 1200px) {
	.btn_more{ padding: 0 20px;}
}
@media only screen and (max-width: 576px) {
	.btn_more{ min-width: 100px; }
}
/*------*/

/*------*/


/*---blockquote---*/
blockquote{ background: #FFF; padding: 20px; border-left: 4px solid #CCC;}

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

/*---RWD---*/
.desk-show { display: block !important;}
.desk-ib-show{ display: inline-block !important;}
.mobile-show { display: none !important; }
.peload{ opacity:0; transition: opacity 2000ms 3000ms ease;}
.peload.ed{ opacity:1;}
.pehide.ed{ display:none;}
.phone_btn{ display: none;}
.mobile_menu{ display: none;}
@media only screen and (max-width: 720px) {
	.desk-show { display: none!important; }
	.desk-ib-show{ display: none !important;}
	.mobile-show { display: block!important; }
}

/*only_view*/
/* body.only_view { background-color: #ECE9E7;}
.only_view .vr_box{ max-width: 1200px; margin: auto;}
.only_view .vr_box .vr_view{ display: none;}
.only_view .vr_box .vr_menu{ display: none;}
.only_view .vr_box .vr_3d {
    position: relative;
    flex: 0 0 100%;
    min-height: inherit;
}
.only_view .vr_box .vr_3d .main::before {
    padding-bottom: 100%;
}
 */

/* 
@media only screen and (max-width: 1200px) {
	.vr_box>.inner-width{ margin: 0;}
	.vr_box .bg::before{  width: 45%;}
	
	.vr_box .vr_3d{ flex: 0 0 45%; display: block;}
	.vr_box .vr_3d .main{ position: fixed; top: 20%; width: 45%;}
	.vr_box .vr_view{ flex: 0 0 55%;}
	.send_box>.inner-width { flex: 0 0 calc( 100% - 80px);}

	.vr_box .vr_menu{ width: 45%; height: 50px;}
	.vr_box .vr_menu .item{ width: 50px; height: 50px; line-height: 50px; font-size: 20px;}

}
@media only screen and (max-width: 820px) {
	.vr_box{ min-height: inherit;}
	.vr_box>.inner-width { min-height: inherit;}
	.vr_box .bg::before{ width: 100%;}
	.vr_box>.inner-width{ margin: 0; display: block;}
	.vr_box .vr_3d{ min-height: inherit; margin: 0; display: block;}
	.vr_box .vr_3d .main{ position: relative; top: inherit; width: auto;}
	.vr_box .vr_3d .main::before{ display: block; content: ''; padding-bottom: 50%;}
	
	.vr_box .vr_view{ min-height: inherit; padding: 20px; background: #F8F4F0; margin: 0;}
	.vr_box .vr_view .inner_list { display: block; }
	.vr_box .vr_view .inner_list .menu{display:flex;padding:0 0 20px 0;margin:0;justify-content:center;}
	.vr_box .vr_view .inner_list .menu .item {margin: 0 10px;}
	.vr_box .vr_view .inner_list .items .sec {margin: 10px 15px 0 10px;}
	.send_box>.inner-width { flex: 0 0 calc( 100% - 80px);}

	.vr_box .vr_menu{ position: relative; display: block; bottom: 0; left: 0; width: 100%; height: 44px;}
	.vr_box .vr_menu .item{ width: 44px; height: 44px; line-height: 44px; font-size: 16px;}
	.vr_box .vr_menu .row { width: auto;}
}
@media only screen and (max-width: 576px) {
	.vr_box .comb_list .name{ flex: 0 0 100%; margin: 0 0 5px 0;}
	.vr_box .comb_list .item {margin: 5px;}
	.send_box{ height: 90px; padding: 0 0 30px 0;}
	.send_box>.inner-width { flex: 0 0 calc( 100% - 40px);}
	.send_box .btn_more{ min-width: inherit; padding: 0 20px; letter-spacing: 0;}
}


#iframe360{ position: absolute; top: 0; left: 0;z-index: 100; height: 100%;width: 100%; } */
/* 
.url_open{ color: #F64953;}



.vrchat #eight-chat-content { 
	bottom: 90px !important;
}

@media only screen and (max-width: 992px) {
	.upchat #eight-chat-content { 
		bottom: 90px !important;
	}
} */