@charset "UTF-8";
@import url(base.css);
@import url(animate.css);
@import url(font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Noto+Sans+TC:400,700&display=swap&subset=chinese-traditional');
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { height: 100%; color:#f2f2f2;
 -webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	 -ms-text-size-adjust: none;
		 text-size-adjust: none;  
}
body { background:#1b1b1b; color: #999;}
body.white { background:#f2f2f2;}
::selection { background: #000; color: #FFF;}
body, th, td, input { font-family: '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 16px; }
a { text-decoration: none; }
h1 { font-size: 1.5em; font-family: '微軟正黑體', Arial, Helvetica, sans-serif; margin: 0 0 1em; }
h2 { font-size: 1.25em; font-family: '微軟正黑體', Arial, Helvetica, sans-serif; margin:0 0 1em; }
h3 { font-size: 18px; font-family: '微軟正黑體', Arial, Helvetica, sans-serif; margin:0 0 0.6em; }
h4 { font-size: 17px; font-family: '微軟正黑體', Arial, Helvetica, sans-serif; margin:0 0 0.6em; }
h5 { font-size: 16px; font-family: '微軟正黑體', Arial, Helvetica, sans-serif; margin:0 0 0.6em; }
h6 { font-size: 16px; font-family: '微軟正黑體', Arial, Helvetica, sans-serif; margin:0 0 0.6em; }
p,li { font-size: 15px; line-height: 1.8em; color: #b4b4b4;  }
a:link, a:visited { text-decoration: none; cursor: pointer; }



.loadbar { position: fixed; background: #6d2aa5; width: 0; height: 4px; top: 0; left: 0; z-index: 3000; overflow: hidden;
	transition: 400ms ease-in-out;
}
.loadbar.ed { width: 0!important; border: none; right: 0; left: inherit; opacity: 0; }

.imgLiquidCenter, .imgLiquidFill{ opacity: 0; 
	transition: opacity 400ms ease-in-out;
}
.imgLiquid_ready { opacity: 1; }


/*Element*/
.ie { position: fixed; width: 60%; height: 80%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #CCC; z-index: 9999; }
.ie h2, .ie h4 { color: #333 !important; }
.ie p { text-align: center; color: #333 !important; font-size: 13px; }
.ie a { color: #F36; }

/*Package*/
.inner-width { position: relative; max-width:1200px; margin: auto; }
.txt-width { position: relative; max-width:960px; margin: auto; }
.txt-s-width { position: relative; max-width:800px; margin: auto; }

.more_bar{ position: relative; z-index: 100; padding: 10px 0; text-align: left;}
.more_bar.center{ text-align: center;}
.more_bar.right{ text-align: right;}

.share_bar{ position: relative; z-index: 1; padding: 0; text-align: left; list-style: none; margin: 0;}
.share_bar a { display: block; float: left; font-size: 16px; padding: 0 10px; height: 32px; line-height: 32px;}
.share_bar a i{ font-size: 24px;}

.btn_more{ position: relative; display: inline-block; color: #FFF; text-align: center; font-size: 20px; line-height: 30px; border: solid 1px #FFF; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; padding: 0 40px;
	transition: 200ms ease;
}
.btn_more:hover, .btn_more:focus{ color: #FFF; background: #6d2aa5;}
.btn_more.s2:hover, .btn_more.s2:focus{ background: #3d2beb;}

.btn_more.s3 { border: none; padding: 0 10px;}
.btn_more.s3 i{ margin: 0 0 0 10px; font-size: 16px; color:#6d2aa5;}
.btn_more.s3:hover i{ color:#FFF;}

.btn_send{ position: relative; display: inline-block; text-align: center; border:solid 1px #FFF ; font-size:16px; line-height: 32px; padding: 0 20px; box-sizing: border-box; background: transparent;
	transition: 200ms ease;
}
.btn_send:hover{ color: #FFF; background: #6d2aa5; }

.white .btn_send{  background: #6d2aa5; color: #FFF !important;}
.white .btn_send:hover{ color: #FFF; background: #3d2beb; }

.btn_clear{ position: relative; display: inline-block; text-align: center; border:solid 1px #FFF ; font-size:16px; line-height: 32px; padding: 0 20px; box-sizing: border-box;
	transition: 200ms ease;
}
.btn_clear:hover{ color: #FFF; background: #6d2aa5; }

.btn_login{ position: relative; display: inline-block; text-align: center; border:solid 1px #FFF ; font-size:16px; line-height: 32px; padding: 0 20px; box-sizing: border-box; background: #6d2aa5; color: #FFF;
	transition: 200ms ease;
}
.btn_login:hover{ color: #FFF; background: #3d2beb; }

.btn_buy{ position: relative; display: block; text-align: center; border:solid 1px #FFF ; font-size:18px; line-height: 32px; padding: 10px 20px; margin: 10px 0;
	transition: 200ms ease;
}
.btn_buy:hover{ color: #FFF; background: #6d2aa5; }

.white .btn_buy{  background: #666; color: #FFF !important;}
.white .btn_buy:hover{ color: #FFF; background: #6d2aa5; }

.pager_bar { padding: 40px 0; text-align: center; }
.pager_bar.right {  text-align: right; }
.pager_bar a { display: inline-block; line-height: 32px; width: 32px; text-align: center; margin: 0 4px 0 0; color: #f2f2f2; font-size: 15px; 
	transition: 300ms ease;
}
.pager_bar a.con { width: auto; padding: 0 20px; color: #FFF;  background: #6d2aa5;}
.pager_bar a.arr { color: #6d2aa5; }
.pager_bar a:hover, .pager_bar a.cur { color: #FFF !important; background: #6d2aa5;
	transform: scale(1.04);
}
.pager_bar p{ text-align: center; color: #999; font-size: 14px; padding: 20px 0;}
.pager_bar p strong{ color:#f2f2f2}

.white .pager_bar a{ color: #333;}
.white .pager_bar a:hover, .white  .pager_bar a.cur { color: #FFF; background: #6d2aa5;}
.white .pager_bar p{ color: #333; }
.white .pager_bar p strong{ color:#666}
.white .pager_bar a.con { color: #FFF;  background: #6d2aa5;}

/*BLOCK*/
#wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden;}
#header { position:fixed; z-index:1000; width:100%; padding: 0; left:0;
    transition: 500ms ease-in-out;
}
#header .bg{ position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.2); height: 90px;
	transition: 500ms ease;
}
.white #header .bg{ background: rgba(0,0,0,0.5);}
#header .bg:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
	bottom: 0;    
	-webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
}
#content { position: relative;}
#footer { position:relative;  z-index: 1; background: #0f0f0f; padding: 50px 0; color:#f2f2f2;}
#footer .foot_menu{ position: relative; width: calc(37% - 20px); margin: 10px 0; float: left;}
#footer .foot_menu a{ display: inline-block; color: #f2f2f2; background: #333; padding: 4px 10px; margin: 4px; border-radius: 4px; font-size: 15px;
	transition: 500ms ease;
}
#footer .foot_menu a:hover{ background: #6d2aa5;}
#footer .info{ position: relative; width: calc(37% - 20px); margin: 10px 0; float: left;}
#footer .info h4{ margin: 0 0 5px 0; color: #FFF;}
#footer .info h4 span{ display: block; font-size: 15px;}
#footer .info p{ margin: 0 0 10px 0; color: #f5f5f5;}
#footer .info a{ color: #FFF;}
#footer .follow{ position: relative; width: calc(26% - 20px); margin: 10px 0; float: right;}
#footer .follow a{ display: inline-block; width: 50px; line-height: 50px; background: #333; color: #FFF; font-size: 24px; border-radius: 25px; text-align: center; margin: 2px;
	transition: 500ms ease;
}
#footer .follow a:hover{ background: #6d2aa5; color: #FFF;
	transform: scale(1.1);
}
#footer .copyright { clear: both; color: #FFF; font-size: 14px; text-align: right; padding: 20px; border-top: solid 1px #5c5c5c;}
#footer .copyright span{ margin: 0 0 0 20px;}

/**logo**/
.logo { position: absolute; top: 10px; left: 10px; width: 300px;
    transition: 500ms ease-in-out;
}
.logo img { max-width: 100%;
    transition: 500ms ease-in-out;
}

.top_menu{ position: absolute; box-sizing: border-box; top: 50px; right: 10px;
	transition: 500ms ease;
}
.top_menu ul{ list-style:none; margin:0; box-sizing: border-box;
	transition: 500ms ease-in;
}
.top_menu>div>ul{ height: 50px; }
.top_menu>div>ul>li{ position: relative; float: left; }
.top_menu>div>ul>li>a{ position:relative; display:block; font-size: 16px; font-weight: 700; color:#FFF; padding:0 15px; margin: 0 2px ; line-height: 40px; 
	transition: background 200ms ease;
}
.top_menu>div>ul>li>a.cur{ background: #999; color: #FFF; border-radius: 25px;}
.top_menu>div>ul>li>a:hover, .top_menu>div>ul>li.on>a{ background: #6d2aa5; color: #FFF;}
.top_menu>div>ul>li.submenuhead.on{ height: 70px;}
.top_menu .submenu { display: none; position: absolute; top:40px; left: 2px; z-index: 100; width: 180px; box-sizing: border-box; background: rgba(109, 42, 165, 0.95);  padding: 10px;
	-webkit-overflow-scrolling: touch;
	transition: max-height 200ms ease, padding 200ms ease;
}
.top_menu>div>ul>li:last-child .submenu { left: inherit; right: 2px;}

.top_menu .on .submenu { display: block;}
.top_menu .submenu ul{ max-width: 1200px; margin: 0 auto;}

.top_menu .submenu>ul>li + li{  border-top: solid 1px #946ab8;}
.top_menu .submenu>ul>li>a{ display: block; font-size: 15px; line-height: 1.4em; font-weight: bold; color: #fffcdc; padding:10px;
	transition: 200ms ease;
}
.top_menu .submenu>ul>li>a:hover, .top_menu .submenu>ul>li.on>a{ background: #FFF; color: #6d2aa5;}
.top_menu .submenu>ul>li li a{ display: block; font-size: 15px; line-height: 1.2em; color: #FFF; padding:10px;
	transition: 200ms ease;
}
.top_menu .submenu>ul>li li a:hover{ background: #FFF; color: #6d2aa5;}

.top_menu .submenuhead2{ position: relative;}
.top_menu .submenuhead2::after{ position: absolute; content: ''; display: block; right: 10px; top:10px; color: #FFF;
	font-family: "FontAwesome"; font-weight: 900; content: "\f067";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.top_menu .submenu2{ display: none;  position: absolute; width: 200px; padding: 10px; top: 0; left: 100%; background: #3d2beb;}
.top_menu .submenu2::before{ position: absolute; content: '';display: block; left: -10px; top:10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #3d2beb transparent transparent;
}
.top_menu .submenu2>li + li{  border-top: solid 1px #9e94ff;}
.top_menu .submenu2 a{ display: block;}
.top_menu .submenuhead2.on .submenu2 { display: block;}

.nav_menu{ position: absolute; box-sizing: border-box; top: 10px; right: 25px; text-align: right;
	transition: 500ms ease;
}
.nav_menu ul{ list-style:none; margin:0; box-sizing: border-box; }
.nav_menu ul li{ display: inline-block; color:#FFF; font-size: 16px; line-height: 30px;}
.nav_menu ul li a{ display: inline-block; color:#FFF;  line-height: 30px; padding: 0 5px;
	transition: 500ms ease;
}
.nav_menu ul li a i{ display: inline-block; font-size: 20px;}
.nav_menu a.cart{ position: relative; padding: 0 10px;} 
.nav_menu a.cart span{ position: absolute; top: 15px; left: 0; width: 20px; height: 20px; background: #6d2aa5; color:#FFF; border-radius: 10px; line-height: 20px; text-align: center; font-size: 12px;}

.search_bar{ width: 30px; box-sizing: border-box; text-align: center; border-radius: 4px;}
.search_bar.on{ background: #6d2aa5; color:#FFF;}
.search_box{ position: relative; float: left; box-sizing: border-box; text-align: right; max-width: 0; overflow: hidden; padding: 0; white-space:nowrap;
	transition: 500ms ease;
}
.search_box.on{ max-width: 400px; }
.search_box input{ width: 200px; color:#FFF; line-height: 30px; border:solid 1px #FFF; height: auto; float: left; font-size: 16px; padding: 0 20px; background: transparent; margin: 0 -1px 0 0;}


.sp_menu{ position: absolute; width: 100%; text-align: center; background: rgba(34, 43, 66, 0.9); padding: 2px; z-index: 100;}
.sp_menu.s1{ background: rgba(109, 42, 165, 0.7) }
.sp_menu.s2{ background: rgba(61, 43, 235, 0.7); }
.sp_menu.s3{ background: rgba(165, 42, 161, 0.7); }

.sp_menu.on{ position: fixed; top: 70px; left:0;}
.sp_menu a{ display: inline-block; font-size: 16px; line-height: 36px;color: #FFF; padding: 0 20px;}
.sp_menu a:hover{ color: #000; background: #FFF;}
#trigger{ position: absolute;  margin-top: calc(50vh - 70px);}


/*ED*/
#header.ed .bg{ height: 70px;background: rgba(0,0,0,.3);}
#header.ed .logo{ width: 230px;}
#header.ed .top_menu{ top:15px}
#header.ed .submenu{ top:40px}
#header.ed .nav_menu{ top: -100px;}
#header.ed .nav_menu a{ opacity: 0;}

.pic_1{ margin: 0 auto 50px; padding: 0 0 10px 0; text-align: center; border-bottom: solid 3px #666;}
.pic_1 img{ width: 90%; height: auto; opacity: 1; margin: 0 0 10px;}
.pic_1 i{ display: block;}
.pic_left{ float:left; margin: 0 40px 0 0; max-width: 400px;}
.pic_left img{ width: 100%; height: auto;}
.pic_right{ float:right; margin: 0 0 0 40px; max-width: 400px;}
.pic_right img{ width: 100%; height: auto;}

.bg_1{ position: relative; height: auto; overflow: hidden;}
.bg_1>.bg{ position: fixed; top:0%; left:0; width: 100%; height: 110%; background: url(../images/bg_1.jpg) center center; background-size: cover;}

.bg_2{ position: relative; height: auto; }
.bg_2>.bg{ position: absolute; top:0%; left:0; width: 100%; height: 100%; background: url(../images/bg_2.jpg) center center fixed; background-size: cover;}

.bg_3{ position: relative; height: auto; overflow: hidden; }
.bg_3>.bg{ position: absolute; top:0%; left:0; width: 100%; height: 120%; background: url(../images/bg_3.jpg) center top; background-size: cover;}

/*BANNER*/
.top_banner { height: 850px; width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 100; background: #191919;}
.top_banner ul{ margin: 0; list-style: none; height: 850px; }
.top_banner li{ position: relative; display: block; height: 850px; overflow: hidden;}
.top_banner .pic{ display: block; height: 100%; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0; overflow: hidden;
	background: #000 url(../images/loading.gif) no-repeat center center; background-size: 100px;
	transition: opacity 800ms ease-in-out;
}
.top_banner .pic.imgLiquid_ready{ opacity: 0.9;}
.top_banner .pic.video{ opacity: 0.7;}
.top_banner .txt{ position: absolute; top: 380px; width: 46%; padding: 20px; text-align: left; z-index: 100; box-sizing: border-box; opacity: 0; left: 50%; filter: blur(10px); margin: 0 0 0 -23%; text-align: center;
	transition: 800ms ease-in-out, background 1400ms ease-in-out;
}
.top_banner .active .txt{ top: 300px; opacity: 1; filter: blur(0);}
.top_banner .txt .text_pic{ display: inline-block; width: 100px; margin: 0 0 10px 0;}
.top_banner .txt .text_pic img{ max-width: 100%;}
.top_banner .txt h2{ position: relative; color: #FFF; font-size: 40px; line-height: 1.1em; max-height: 3.3em; overflow: hidden; margin: 0 0 10px 0; font-family: 'Noto Sans TC', sans-serif; font-weight: 400;
	transition: 800ms ease-in;
	transform: translateY(30px);
}
.top_banner .txt p{ color:#f2f2f2;  font-size:15px; line-height: 1.2em; margin: 0 0 10px 0; font-style: italic;
	transition: 800ms ease-in;
	transform: translateY(30px);
}
.top_banner .active .txt h2{
	transform: translateY(0px);
}
.top_banner .active .txt p{
	transform: translateY(0px);
}
.top_banner video { z-index: 1; opacity: 0; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none; background-size: cover;
    transform: translateX(-50%) translateY(-50%);
	transition: 800ms ease-in-out;
}
.top_banner video.on{opacity: 1; }

.sec_banner { height: 480px; width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 100; background: #191919;}
.sec_banner ul{ margin: 0; list-style: none; height: 480px; }
.sec_banner li{ position: relative; display: block; height: 580px; overflow: hidden;}
.sec_banner .pic{ display: block; height: 100%; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0; overflow: hidden;
	background: #000 url(../images/loading.gif) no-repeat center center; background-size: 100px;
	transition: opacity 800ms ease-in-out;
}
.sec_banner .pic.imgLiquid_ready{ opacity: 0.9;}
.sec_banner .pic.video{ opacity: 0.9;}
.sec_banner .txt{ position: absolute; top: 90px; width: 46%; padding: 20px; text-align: left; z-index: 100; box-sizing: border-box; opacity: 0; left: 50%; filter: blur(10px); margin: 0 0 0 -23%; text-align: center;
	transition: 800ms ease-in-out, background 1400ms ease-in-out;
}
.sec_banner .txt.nopic{ padding-top: 140px;}
.sec_banner .active .txt{ top: 40px; opacity: 1; filter: blur(0);}
.sec_banner .txt .text_pic{ display: inline-block; width: 100px; margin: 0 0 10px 0;}
.sec_banner .txt .text_pic img{ max-width: 100%;}
.sec_banner .txt h2{ position: relative; color: #FFF; font-size: 40px; line-height: 1.1em; max-height: 3.3em; overflow: hidden; margin: 0 0 10px 0; font-family: 'Noto Sans TC', sans-serif; font-weight: 400;
	transition: 800ms ease-in;
	transform: translateY(30px);
}
.sec_banner .txt p{ color:#f2f2f2;  font-size:15px; line-height: 1.2em; margin: 0 0 10px 0;
	transition: 800ms ease-in;
	transform: translateY(30px);
}
.sec_banner .active .txt h2{
	transform: translateY(0px);
}
.sec_banner .active .txt p{
	transform: translateY(0px);
}
.sec_banner video { z-index: 1; opacity: 0; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none; background-size: cover;
    transform: translateX(-50%) translateY(-50%);
	transition: 800ms ease-in-out;
}
.sec_banner video.on{opacity: 1; }

.page_banner { position: relative; z-index: 1; height: 350px; width: 100%; position: relative; top: 0; left: 0; overflow: hidden;}
.page_banner .pic{ display: block; height: 100%; position: absolute; top: 0; left: 0;  width: 100%; z-index: 1;  overflow: hidden;
	transition: opacity 800ms ease-in-out;
}
.page_banner .pic.imgLiquid_ready{ opacity: 1;}
.page_banner .txt{ display: block; height: 100%; position: absolute; top: 200px; left: 0;  width: 100%; z-index: 1; text-align: center;}
.page_banner .txt h2{ font-size: 30px; margin: 0; font-weight: 400;}
.page_banner .txt h3{ position: relative; display: block; font-size: 36px; line-height: 1.2em; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; color:#FFF; font-weight: 400; margin: 0;}
.page_banner .txt h3 span{ display: block; font-size: 16px; line-height: 1.4em; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 0.3em; color: #f2f2f2;}
.page_banner .txt.keep h3 span{ letter-spacing: 0.1em; }
.page_banner .txt.keep h3 b { display: block; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: 24px; padding: 0 20px;}
.page_banner .txt p{ color: #f2f2f2;}
.page_banner.cover .pic{ filter: blur(20px);}
.page_banner.cover .pic.imgLiquid_ready{ opacity: 0.4;}

.white .page_banner .txt h3{ color:#000;}
.white .page_banner .txt h3 span{ color: #333;}

.ad_banner { position: relative; z-index: 100; margin: 20px -10px 0;}
.ad_banner ul{ margin: 0; list-style: none; }
.ad_banner li{ position: relative; display: block; overflow: hidden;}
.ad_banner a{ position: relative;  display: block; margin: 10px; height: 330px;}

.ad_banner .pic{ display: block; height: 100%; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0; overflow: hidden;
	background: #000 url(../images/loading.gif) no-repeat center center; background-size: 100px;
	transition: opacity 800ms ease-in-out;
}
.ad_banner .pic.imgLiquid_ready{ opacity: 1;}
.ad_banner .pic.video{ opacity: 1;}
.ad_banner .txt{ position: absolute; top: 90px; width: 46%; padding: 20px; text-align: left; z-index: 100; box-sizing: border-box; opacity: 0; left: 50%; filter: blur(10px); margin: 0 0 0 -23%; text-align: center;
	transition: 800ms ease-in-out, background 1400ms ease-in-out;
}
.ad_banner video { z-index: 1; opacity: 0; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none; background-size: cover;
    transform: translateX(-50%) translateY(-50%);
	transition: 800ms ease-in-out;
}
.ad_banner video.on{opacity: 1; }
.ad_banner a:hover .pic{ opacity: 1;}

/*path*/
#path{position: absolute; z-index: 100; top: 90px; width: 100%; box-sizing: border-box; padding:6px; background:rgba(109, 42, 165, 0.7); color: #f2f2f2; font-size: 15px; text-indent: 10px; }
#path>div{ word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#path a{ color:#FFF;}
#path.s2{ background: rgba(61, 43, 235, 0.7);}
#path.s3{ background: rgba(165, 42, 161, 0.7);}
#path.s4{ background: rgba(34, 43, 66, 0.7);}

/*title_bar*/
.title_bar{ position: relative; text-align: center; padding:0 0 40px 0; z-index: 100;}
.title_bar.smb{ padding: 0; }
.title_bar.left{ text-align: left; }
.title_bar.page{ text-align: center; padding:0 0 40px 0;}
.title_bar.pos{ position: absolute; top: 80px; left:0; width:100%;}
.title_bar h3{ position: relative; display: block; font-size: 36px; line-height: 1.2em; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; color:#FFF; font-weight: 400;}
.title_bar h3 span{ display: block; font-size: 16px; line-height: 1.4em; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 0.3em;}
.title_bar h4{ position: relative; display: block; font-size: 24px; line-height: 1.2em; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; color:#82fffe; font-weight: 400;}
.title_bar h4 span{ display: block; font-size: 16px; line-height: 1.4em; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 0.3em; ;}

/*news_box*/
.news_box{ position: relative; z-index: 10; margin: 0 auto; padding: 80px 0;}
.news_box ul{ display: block; list-style: none; margin: 0 -10px;}
.news_box li{ display: block; float: left; width: calc(100% / 3);}
.news_box.page li{ width: calc(100% / 4);}
.news_box.page li:nth-child(6n-4){ width: calc(100% / 2);}
.news_box.page li:nth-child(6n-5){ width: calc(100% / 2);}
.news_box li a { position: relative; display: block; overflow: hidden; background: #000; margin: 10px;}
.news_box li a .pic{ height: 320px; 
	transition: opacity 500ms ease, transform 500ms ease;
}
.news_box li a .pic.imgLiquid_ready{ opacity: 0.6; }
.news_box li a .title{ position: absolute; display: block; z-index: 1; bottom: 0; left: 0; width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.3); color: #FFF; padding: 10px 20px; }
.news_box li a .date{ color:#FFF; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 20px;}
.news_box li a h3 { margin: 0; line-height: 1.2em; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news_box li a p{  margin: 0; line-height: 1.2em; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news_box li a:hover{ z-index: 1;}
.news_box li a:hover .pic{  opacity: 1;}
.news_box li a:hover .title{ background: rgba(0,0,0,0.6);}

/*news_box inx*/
.news_box.inx{  margin: 0 auto; padding: 0;}
.news_box.inx .hot{ position: relative; background: #191919; height: 760px; overflow: hidden;}
.news_box.inx .hot .pic{ position: absolute; top: -20%; width: 100%; height: 120%;}
.news_box.inx .hot .pic.imgLiquid_ready{ opacity: 0.5;}
.news_box.inx .hot a{ position: relative; z-index: 1; width: 50%; float: right; background: rgba(0,0,0,.7); color: #FFF; margin: 200px 0 0 0; padding:60px 30px; box-sizing: border-box;
	transition: 500ms ease;
}
.news_box.inx .hot a .date{ color:#82fffe; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 34px; line-height: 30px; float: left; margin: 0 10px 10px 0;}
.news_box.inx .hot a .date span{ display: block; font-size: 30px; }
.news_box.inx .hot a .title{ font-size: 24px; line-height: 1em; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news_box.inx .hot a .title span{ display: block; font-size: 15px; }
.news_box.inx .hot a p{ clear: both; color:#FFF; margin: 0; line-height: 1.5em; max-height: 9em; overflow: hidden;}
.news_box.inx .hot a:hover{ background: rgba(30,0,30,.8); padding:60px 60px 60px 30px; width: calc(50% + 30px);}
.news_box.inx .hot a::after{ display: block; position: absolute; color:#FFF; opacity: 0; z-index: 2; top: 50%; right:10px; width: 32px; line-height: 32px; text-align: center; font-size: 24px; margin: -16px 0 0 0;
	font-family: "FontAwesome"; font-weight: 900; content: "\f054";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
}
.news_box.inx .hot a:hover::after{ opacity: 1;}
.news_box.inx ul{ margin: -230px -10px 0;}
.news_box.inx li a { margin: 10px;}
.news_box.inx li a .pic{ height: 340px;}
.news_box.inx .more_bar{ padding: 30px 0;}

/*news_box list*/
.news_box .list li{ float: none; width: auto !important;}
.news_box .list li a { background: #333;}
.news_box .list li a .pic{ float: right; width: 200px; height: 120px;}
.news_box .list li a .title{ position: relative; bottom: inherit; left: inherit; width: calc( 100% - 340px); background: none; padding: 20px; font-size: 16px; text-align: left;}
.news_box .list li a .title .date{ display: block; color: #82fffe;}
.news_box .list li a h3 { word-break: inherit; white-space: inherit; overflow:visible;}
.news_box .list li a p{ word-break: inherit; white-space: inherit; overflow:visible;}
.news_box .list li a:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.news_box .list li a:hover .pic{ transform: scale(1); opacity: 1;}

.news_box .tool_bar{ text-align:left; line-height: 32px;}
.news_box .tool_bar label{ display: inline-block; margin-bottom:4px;}
.news_box .tool_bar .item_title{ display: inline-block; padding:0 10px; font-weight:bold; height: 32px; min-width: 70px;}
.news_box .tool_bar .btn_send{
	position: relative;
	display: inline-block; padding:0 20px; color:#FFF; height: 32px;
    z-index: 2;
	transition: 300ms ease;
}
.news_box .tool_bar .btn_send:hover{ background:#6d2aa5; }
.news_box .tool_bar .switch{ padding: 4px 10px; float: right;	}
.news_box .tool_bar .icon { padding: 0 5px; color:#666; cursor: pointer;}
.news_box .tool_bar .icon i{ font-size: 24px;}
.news_box .tool_bar .icon:hover  { color:#6d2aa5;}
.news_box .tool_bar .icon.on{ color:#f2f2f2;}
.news_box .tool_bar input{ border:solid 1px #FFF; color:#FFF; background: transparent;}

.news_box .dl{ margin: 30px 0 20px;}
.news_box .dl li:nth-child(2n-1) a {background: #333;}
.news_box .dl li a {line-height: 1.4em; margin: 0; padding: 10px;}
.news_box .dl li + li a { border-top: solid 1px #999; }
.news_box .dl li a .pic{ float: left; width: 165px; height: 100px; margin: 0 20px 0 0;}
.news_box .dl li a .title{ width: 100% ; padding: 10px; font-size: 1em; word-break:inherit; white-space: inherit; color: #000;}
.news_box .dl li a .title .date{ display: inline-block; font-size: 1.1em; margin: 0 5px 0 0; color: #FFF;}
.news_box .dl li a .title .type{ display: inline-block; font-size: 1.1em; padding: 0 5px; color: #82fffe;}
.news_box .dl li a .title .info{ margin: 4px 0; color: #FFF;}
.news_box .dl li a .icon { float: right; font-size: 1.5em; color: #FFF; padding: 10px;}
.news_box .dl li a:hover, .news_box .dl li a:focus{ background: #222;}

/*media_box*/
.media_box{ position: relative; z-index: 10; margin: 0 auto; padding: 120px 0;}
.media_box .title_bar{ padding: 0 0 100px 0;}
.media_box ul{ display: block; list-style: none; margin: 0 -10px;}
.media_box li{ display: block; float: left; width: calc(100% / 3);}
.media_box li a { position: relative; display: block; overflow: hidden; background: #000; margin: 30px 10px;
	transition: transform 500ms ease;
}
.media_box li a .pic{ height: 270px;
	filter: grayscale(0.4);
	transition: opacity 500ms ease, filter 500ms ease;
}
.media_box li a .pic.imgLiquid_ready{ opacity: 0.6; }
.media_box li a .title{ position: absolute; display: block; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; color: #FFF; padding: 10px 20px; }
.media_box li a .title i{ position: absolute; top: 50%; left: 50%; margin: -24px 0 0 -24px; font-size: 48px; width: 48px; height: 48px; line-height: 48px; text-align: center; opacity: 0.5;}
.media_box li a .title h3{ position: absolute; top: 60%; left: 0%; width: 100%; box-sizing: border-box; padding: 10px; text-align: center;}
.media_box li a h3 { margin: 0; font-size: 16px; line-height: 1.2em; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.media_box li a p{ margin: 0; line-height: 1.2em; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.media_box li a:hover{ z-index: 1;
	transform: scale(1.05);
}
.media_box li a:hover .pic{  opacity: 1; filter: grayscale(0);}
.media_box li a:hover .title i{ opacity: 1;}

/*act_box*/
.act_box{ position: relative; z-index: 10; position: relative;  margin: 0 auto; padding: 80px 0;}
.act_box ul{ display: block; list-style: none; margin: 0 -10px;}
.act_box li{ display: block; float: left; width: calc(100% / 2);}
.act_box li a { position: relative; display: block; overflow: hidden; background: #000; margin: 10px;}
.act_box li a .pic{ height: 290px; 
	transition: opacity 500ms ease, transform 500ms ease;
}
/* .act_box li:nth-child(3n-2) .pic{height: 600px; } */
.act_box li a .pic.imgLiquid_ready{ opacity: 0.6; }
.act_box li a .title{ position: absolute; display: block; z-index: 1; bottom: 0; left: 0; width: 100%; box-sizing: border-box; color: #FFF; padding: 10px 20px; }
.act_box li a .date{ color:#FFF; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 20px;}
.act_box li a .tip{ position: absolute; display: block; color:#FFF; font-size: 16px; background: rgba(110, 42, 165, 0.8); padding:10px 20px; top: -50px; left:0} 
.act_box li a h3 { margin: 0; line-height: 1.2em;}
.act_box li a:hover{ z-index: 1;}
.act_box li a:hover .pic{  opacity: 1;}
.act_box li a:hover .title{ background: rgba(0,0,0,0.2);}

/*about_box*/
.about_box{ position: relative;  margin: 0 auto; padding: 80px 0;}
.about_box h4{ font-size: 20px; text-align: center; color:#FFF;}
.about_box p{ text-align: justify;}

/*sitemenu_box*/
.sitemenu_box{ position: relative; z-index: 10; padding: 50px 0; background: rgba(51, 51, 51, 0.4);}
.sitemenu_box:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
	bottom: 0;    
	-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); 
}
.sitemenu_box ul{ margin: 0; list-style: none;}
.sitemenu_box ul.m1>li{ float: left; margin: 10px; float: left; width: calc(100% / 5 - 20px); }
.sitemenu_box ul.m1>li:nth-child(6n){ clear: both;}
.sitemenu_box ul.m1>li>a{ display: block; font-size: 18px; font-weight: bold; color: #82fffe; margin: 0 0 10px 0; padding: 10px; line-height: 1.4em;
	transition: 500ms ease;
}
.sitemenu_box ul>li li a{ display: block; font-size: 15px; line-height: 20px; color: #FFF; padding:5px 10px; margin: 0 0 3px;
	transition: 500ms ease;
}
.sitemenu_box ul>li li>a:hover{ background: #6d2aa5; }

/*sp_box*/
.sp_box{ position: relative; z-index: 1; height: 800px; overflow: hidden;}
.sp_box .cover{ position: absolute; width: 100%; height: 100%;}
.sp_box .cover iframe{ padding: 90px 0 0 0; height: calc( 100% - 90px ) ;}

.sp_box.game{  height: auto;}
.sp_box.game .game_cover .pic{ display: none; position: absolute; width: 100%; height: 100%;}


.sp_box .txt{ position: absolute; top: 380px; width: 46%; padding: 20px; text-align: left; z-index: 100; box-sizing: border-box; opacity: 0; left: 50%; filter: blur(10px); margin: 0 0 0 -23%; text-align: center;
	transition: 800ms ease-in-out, background 1400ms ease-in-out;
}
.sp_box .txt .text_pic{ position: relative; }
.sp_box .txt .text_pic img{ position: absolute; left:0; top: 0; max-width: 100%;}
.sp_box .txt .text_pic:hover { 
	-webkit-filter: drop-shadow(0 0 7px  rgba(130, 255, 255, 0.5) );
    filter: drop-shadow(0 0 7px #6d2aa5 );
}
.sp_box .txt h2{ position: relative; color: #FFF; font-size: 40px; line-height: 1.1em; max-height: 3.3em; overflow: hidden; margin: 0 0 10px 0; font-family: 'Noto Sans TC', sans-serif; font-weight: 400;
	transition: 800ms ease-in;
	transform: translateY(30px);
}
.sp_box .txt p{ color:#f2f2f2;  font-size:15px; line-height: 1.2em; margin: 0 0 10px 0; font-style: italic;
	transition: 800ms ease-in;
	transform: translateY(30px);
}

.sp_box .txt .p1{ position: absolute;}
.sp_box .txt .p2{ position: absolute;
	animation: ro1 linear 120s infinite;
}
.sp_box .txt .p3{ position: absolute;
	animation: ro2 linear 120s infinite;
}
.sp_box .txt .p4{ position: absolute;
	animation: ro2 linear 120s infinite;
}
.sp_box .txt .p5{ position: absolute;
	animation: ro1 linear 120s infinite;
}

@keyframes ro1 {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(-360deg);}
}
@keyframes ro2 {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}

.sp_box.ed .txt{ top: 200px; opacity: 1; filter: blur(0);}
.sp_box.ed .txt h2{
	transform: translateY(0px);
}
.sp_box.ed .txt p{
	transform: translateY(0px);
}
.sp_box video { z-index: 1; opacity: 0; position: absolute; top: 50%; left: 50%; min-width: 110%; min-height: 110%; width: auto; height: auto; max-width: none; background-size: cover;
    transform: translateX(-50%) translateY(-50%);
	
}
.sp_box.ed video{opacity: 0.3; }

/*BLOG*/
.blog_right{ position: absolute; right: 10px; top: 0; width: 300px; box-sizing: border-box; padding: 80px 0;}
.blog_right.on .items{  position: fixed; top: 0; width: 300px; padding: 80px 0;}

.blog_box{ position: relative; padding: 80px 0; width: calc(100% - 340px);}
.blog_box .items{ padding: 0 0 20px 0; margin: 0 0 40px 0; border-bottom: solid 1px #666;}

.ad_list a{ display: block; opacity: 0.5; margin: 0 0 10px 0; border-radius: 5px; overflow: hidden;}
.ad_list a img{ display: block; max-width: 100%; }
.ad_list a:hover{  opacity: 0.8;}
/*BLOG END*/

/*shop_box*/
.shop_box{ position: relative; z-index: 10; margin: 0 auto; padding: 0;}
.shop_box.cart:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
}
.shop_box ul{ display: block; list-style: none; margin: 0 -10px;}
.shop_box li{ display: block; float: left; width: calc(100% / 4);}
.shop_box li a { position: relative; display: block; overflow: hidden;margin: 10px;}
.shop_box li a .pic{ height: 240px; 
	transition: opacity 500ms ease, transform 500ms ease;
}
.shop_box li a .pic.imgLiquid_ready{ opacity: 1; }
.shop_box li a .title{ position: relative; display: block; z-index: 1; box-sizing: border-box; padding: 10px; }
.shop_box li a .price{ position: absolute; left: 0; top: -40px; line-height: 40px; z-index: 1; color:#FFF; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 28px; padding: 0 10px; background: rgba(110, 42, 165, 0.9);}
.shop_box li a .price strike{ font-size: 20px; line-height: 20px;}
.shop_box li a h3 { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.2em; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.white .shop_box li a h3 { color: #333;}
.white .shop_box li a:hover h3 { color: #6d2aa5;}
.shop_box li a .buy{ opacity: 1; position: absolute; right: 0; top: 0; width: 40px; text-align: center; line-height: 40px; z-index: 1; color:#FFF; font-size: 24px; background: rgba(110, 42, 165, 0.4);}
.shop_box li a .buy.ed{ background: rgba(34, 43, 66, 0.7);}
.shop_box li a .buy::before{
	font-family: "FontAwesome"; font-weight: 900; content: "\f217";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
}
.shop_box li a .buy.ed::before{
	font-family: "FontAwesome"; font-weight: 900; content: "\f00c";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
}
.shop_box li a .buy:hover{ background: rgba(110, 42, 165, 1);}
.shop_box li a:hover{ z-index: 1;}

.shop_box li a:hover .price{ background: rgba(110, 42, 165, 0.8);}
.shop_box li a:hover .buy{ opacity: 1;}
.shop_box li a .buy.ed{ opacity: 1;}

a.cart_list { position: relative; display: block; overflow: hidden;}
a.cart_list .pic{ height: auto; padding: 0 0 100% 0;
	transition: opacity 500ms ease, transform 500ms ease;
}
a.cart_list .pic.imgLiquid_ready{ opacity: 1; }
a.cart_list .title{ position: relative; display: block; z-index: 1; box-sizing: border-box; padding: 10px; }
a.cart_list .price{ position: absolute; left: 0; top: -40px; line-height: 40px; z-index: 1; color:#FFF; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 28px; padding: 0 10px; background: rgba(110, 42, 165, 0.9);}
a.cart_list .price strike{ font-size: 20px; line-height: 20px;}
a.cart_list h3 { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.2em; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.shop_box .view{ position: relative; padding: 200px 0 40px;}
.shop_box .view .cover{ width: 50%; float: left;}
.shop_box .view .cover .pic{ height: 500px;}
.shop_box .view .txt{ width: 50%; float: right; box-sizing: border-box; padding: 20px;}
.shop_box .view .txt h3{ position: relative; display: block; font-size: 36px; line-height: 1.2em; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; color:#FFF; font-weight: 400; margin: 0 0 10px 0;}
.shop_box .view .txt .price{ display: inline-block; z-index: 1; color:#FFF; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 30px; line-height: 1.1em; padding: 5px 20px; background: rgba(110, 42, 165, 0.8);}
.shop_box .view .txt .info{ margin: 20px 0; padding: 20px; border-top:solid 1px #333; border-bottom:solid 1px #333;}
.shop_box .view .txt select{ min-width: 50px; border-radius: 0; background: #333; color: #FFF; font-size: 18px;}
.shop_box .view .num{ color:#FFF; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.1em; margin: 0 0 10px 0;}

.white .shop_box .view .txt h3{ color:#000; }
.white .shop_box .view .txt p, .white .shop_box .view .txt  li { color: #666;}
.white .shop_box .view .num{ color: #666;}
/*inner_box*/
.inner_box{ position: relative; padding: 80px 0;}
.inner_box.b2 { background: rgba(30,30,30,.5);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
}
.inner_box .date{ color:#82fffe; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 24px; line-height: 30px; margin: 0 0 20px 0;}

.inner_box .edit th{ background: #6d2aa5;}
.inner_box .edit tr:nth-child(2n-1){ background: rgba(0,0,0,.2);}
.inner_box .edit tr:nth-child(2n){ background: rgba(80,80,80,.4);}
.inner_box .edit td, th { line-height: 1.4em;}
.inner_box .edit>h2{ font-weight: 700; color: #82fffe;}
.inner_box .edit>h3 { color: #FFF; position: relative; display: inline-block; padding: 0;}
.inner_box .edit>h3::before { content: ''; display: block; position: absolute;   top: 0.5em; right: -15px; background: #82fffe; width: 6px; height: 6px; border-radius: 3px;}
.inner_box .edit img{ max-width: 100%;}


.photo_box{ position: relative; padding: 80px 0;}
.photo_box .tool_bar .switch{ text-align: center; padding: 4px 10px; }
.photo_box .tool_bar .icon { padding: 0 5px; color:#666; cursor: pointer;}
.photo_box .tool_bar .icon i{ font-size: 24px;}
.photo_box .tool_bar .icon:hover  { color:#6d2aa5;}
.photo_box .tool_bar .icon.on{ color: #FFF;}

.pho_list{ position: relative; margin:10px -10px 50px;}
.pho_list a{ position: relative; display: block; float: left; width: calc(100%/4 - 20px); height: 240px; margin: 10px; overflow: hidden; opacity: 0.7;}
.pho_list a figure{ position: absolute; display: block; z-index: 1; bottom: 0; left: 0; width: 100%; box-sizing: border-box; color: #FFF; padding: 10px; text-align: center; opacity: 0;}
.pho_list a figure h5{ margin: 0; font-size: 15px;}
.pho_list a figure p{ display: none;}
.pho_list a figure i{ display: none;}
.pho_list a img{ position: absolute; display: block !important; top: 50%; left: 50%; opacity: 0; width: 0%; height: 0%;}
.pho_list a::before{ display: block; content: ''; position: absolute; background: #000; opacity: 0; z-index: 1; top: 0; left: 0%; width: 100%; height: 100%;
	transition: 500ms ease-in-out;
}
.pho_list a::after{ display: block; position: absolute; color:#FFF; opacity: 0; z-index: 2; top: 0; left:0; width: 100%; line-height: 240px; text-align: center; font-size: 24px;
	font-family: "FontAwesome"; font-weight: 900; content: "\f00e";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.pho_list a:hover{ opacity: 1;}
.pho_list a:hover figure{ opacity: 1;}
.pho_list a:hover::before{ opacity: 0;}
.pho_list a:hover::after{ opacity: 1;}

.pho_list.s1{ padding: 40px 0 0 0;}
.pho_list.s1 a{ width: calc(100%/3 - 20px); height: 160px;}
.pho_list.s1 a::after{ line-height: 160px;}

.pho_list.s2{ padding: 0;}
.pho_list.s2 a{ width: 5%; height: 360px; margin: 10px;}
.pho_list.s2 .grid-sizer{ width: 5%;}
.pho_list.s2 a:nth-of-type(5n-4){ width: calc(35% - 20px);}
.pho_list.s2 a:nth-of-type(5n-3){ width: calc(65% - 20px);}
.pho_list.s2 a:nth-of-type(5n-2){ width: calc(25% - 20px);}
.pho_list.s2 a:nth-of-type(5n-1){ width:calc(50% - 20px);}
.pho_list.s2 a:nth-of-type(5n){ width: calc(25% - 20px);}
.pho_list.s2 a::after{ line-height: 360px;}

.pho_list.s2.waterfall a{ width: calc(25% - 20px); height: auto;}
.pho_list.s2.waterfall a img{ position: relative; top: 0; left: 0; display: block !important; width: 100%!important; height: auto!important;  opacity: 1;}
.pho_list.s2.waterfall a::before{ display: none;}
.pho_list.s2.waterfall a::after{ display: none;}


.pho_list.s2.list a { width: 100%; padding: 20px; box-sizing: border-box; height: auto; background: none !important; margin: 0; border-bottom: solid 1px #CCC; opacity: 1; overflow: auto;}
.pho_list.s2.list a img{ position: relative; top: initial; left: initial; float: right; width: 200px; height: 200px; margin: 0 0 0 20px; display: block !important; opacity: 1;}
.pho_list.s2.list a figure{ position: relative; top: initial; left: initial; opacity: 1; text-align: left;}
.pho_list.s2.list a figure h5{ font-size: 18px; color: #FFF; opacity: 1;}
.pho_list.s2.list a figure p { display: block; margin: 0 0 10px 0;}

.pho_list.s2.list a::before{ display: none;}
.pho_list.s2.list a::after{ display: none;}

.pho_list.s2.list a:hover::before{ display: none;}
.pho_list.s2.list a:hover::after{ display: none;}
.pho_list.s2.list a:hover{ background: #333 !important;}


.pho_list.pro{ padding: 0;}
.pho_list.pro a{ height: 130px;}
.pho_list.pro a::after{ line-height: 130px;}

.tag_list{ position: relative; margin:30px 0;}
.tag_list a{ display: inline-block; background: #333; color: #FFF; padding: 2px 10px; font-size: 14px; border-radius: 2px; margin:4px 2px;}
.tag_list a:hover{ background: #6d2aa5;}

blockquote.s1{ box-sizing: border-box; color:#f2f2f2; margin: 20px auto 60px; padding: 20px 40px; max-width:90%; quotes:"\201C""\201D""\2018""\2019"; border: none; }
blockquote.s1 p{ font-size: 14px;}
blockquote.s1:before, blockquote.s1:after{ font-family: 'Noto Sans TC', sans-serif; font-size:2em; color: #6d2aa5; line-height:.01em; vertical-align:-0.5em;}
blockquote.s1:before{ content:open-quote; top: 20px; float: left; position: relative; margin-left:-1.4em;}
blockquote.s1:after{ float: right; position: relative; content:close-quote; bottom: 0px; margin-right:-1.4em;}
blockquote.s1 ol{margin:.2em;padding:0}
blockquote.s1 li{margin:.2em;padding:0}
blockquote.s2{ max-width:80%; margin: 30px auto; color: #f2f2f2; border-left: 6px solid #6d2aa5; }

.his_list{ position: relative; display: block; list-style: none; margin: 0;}
.his_list .line{ position: absolute; display: block; top: 0; left: 50%; width: 4px; height: 0; margin: 0 0 0 -2px; background: #6d2aa5;
	transition: 500ms ease-in-out;
}
.his_list li{ position: relative; display: block; width: calc(50% - 40px); float: left; clear: both; line-height: 1.2em; font-size: 17px;}
.his_list li h4{ float: right; width:50px; font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; font-size: 30px; color: #FFF;}
.his_list li p{ margin: 0; padding: 5px 10px; font-size: 15px; line-height: 1.2em;}
.his_list li a{ position: relative; display: block; font-size: 15px; color: #f2f2f2; padding: 5px 10px; margin: 5px 0; border-bottom:1px dotted #6d2aa5;
	transition: 200ms ease;
}
.his_list li a span{ font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; margin: 0 5px;}
.his_list li a:hover{ background: #6d2aa5; color: #FFF;
	transform: scale(1.02);
}
.his_list li a::after{ display: block; position: absolute; color:#FFF; opacity: 0; z-index: 2; top: 50%; right:0; width: 24px; line-height: 24px; text-align: center; font-size: 16px; margin: -12px 0 0 0;
	font-family: "FontAwesome"; font-weight: 900; content: "\f067";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
}
.his_list li a:hover::after{ opacity: 1;}
.his_list li .txt{ float: left; width: calc( 100% - 70px); margin: 0 0 30px 0;}
.his_list li .pic { margin: 10px 0; border-radius: 5px; overflow: hidden;}
.his_list li .pic img{ display: block; max-width: 100%;}
.his_list li .cou{ display: block; position: relative; padding: 4px 0;}
.his_list li .cou span{ display: inline-block; padding: 0px 5px; margin: 3px 2px; font-size: 14px; color:#000; background: #dedede;}
.his_list li::before{ position: absolute; display: block; content: ""; top: 0; right: -60px; width: 32px; height: 32px; background: #1b1b1b; padding: 4px; border-radius: 20px; z-index: 100;}
.his_list li::after{ position: absolute; display: block; content: ""; top: 8px; right: -52px; width: 24px; height: 24px; background: #6d2aa5; border-radius: 18px; z-index: 100;}
.his_list li:nth-of-type(2n){ float: right;}
.his_list li:nth-of-type(2n) h4{ float: left; }
.his_list li:nth-of-type(2n) .txt{ float: right; }
.his_list li:nth-of-type(2n)::before{ left: -60px;}
.his_list li:nth-of-type(2n)::after{ left: -52px;}
.his_list li:nth-of-type(1)::before{ border: solid 2px #6d2aa5; padding: 2px; }
.his_list li:nth-of-type(1)::after{ background: #6d2aa5;  }

.his_list.left li { float: right !important; width: calc(100% - 50px);}
.his_list.left li h4, .his_list.left li:nth-of-type(2n) h4 { font-size: 24px; float: none; width: auto; text-align: left; padding: 0 10px; margin: 0;}
.his_list.left li .txt { float: none !important; width: auto; text-align: left; padding: 0 10px;}
.his_list.left li::before { left: -40px;}
.his_list.left li::after { left: -32px;}
.his_list.left .line { top: 2px; left: 30px;}
.his_list.left li:nth-of-type(2n) .txt {float: left;}
.his_list.left li:nth-of-type(2n)::before { left: -40px;}
.his_list.left li:nth-of-type(2n)::after { left: -32px;}
.his_list.left .line{ top: 15px;}
.his_list.left li p{ position: relative; display: block; font-size: 15px; color: #f2f2f2; padding: 0; margin: 10px 0;
	transition: 200ms ease;
}
.his_list.left li .date{ font-family: 'Bebas Neue', '微軟正黑體', Arial, Helvetica, sans-serif; display: inline-block; margin:10px 0 0 0; padding: 4px 10px; color: #FFF; background: #666;}
.mv_16by9 { position: relative;
    padding-bottom: 56.25%;
}
.mv_16by9 iframe{  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}

/*POPUP*/
.show_box{ position:fixed; top:-100%; left:0; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch; z-index:1000; opacity:0;
	transition: 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.show_box.on{ top:0; opacity:1;}
.show_box .mask{  position: fixed; top:0%; left:0; width:100%; height:0%; z-index:1; background:rgba(30,30,30,.9); opacity:0;
	transition: 800ms ease;
}
.show_box.on .mask, .show_box.ad .mask{ height:100%; opacity:1;}
.show_box .txt{ position: relative; max-width:640px; background:#333; margin:0 auto 40px; padding: 20px; z-index:10; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.show_box .txt .title{ padding: 20px; margin: -20px -20px 20px;  background: #6d2aa5; background-size: cover; color:#FFF; font-size: 24px; text-transform: uppercase; text-align: center; } 
.show_box .close{ position: relative; width:24px; text-align:center; z-index:10;  padding:20px; opacity:0.8; margin: auto;}
.show_box .close img{ max-width:100%;}
.show_box .close:hover{ opacity:1;}
.show_box .txt .left{ width: 50%; float: left;}
.show_box .txt .right{ width: 50%; float: right;}

.white .show_box .txt{ background:#f2f2f2; }
.white .show_box .mask{ background:rgba(200,200,200,.9);}

/*forms*/
.forms.cart{ max-width: 800px; margin: auto; padding: 20px 0;}
.forms .form-item input,
.forms .form-item textarea,
.forms .form-item select { display: block; width: 100%; font-family: inherit; vertical-align: middle; box-sizing: border-box; font-size: 0.9em; font-weight: normal; height: 2.66667em; background-color: #f2f2f2; border: 1px solid #000; border-radius: 4px; box-shadow: none; padding: 4px 8px; color: rgba(17, 17, 19, 0.8); color: #333; }
.forms textarea { padding: 8px; resize: vertical; height: auto; line-height: 1.5; vertical-align: top; }
.forms select { -webkit-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="rgba(0, 0, 0, .4)" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>'); background-repeat: no-repeat; background-position: right .65em center; padding-right: 28px; }
.forms select[multiple] { background-image: none; height: auto; padding: 8px; }

.forms input:hover,
.forms textarea:hover,
.forms select:hover { outline: none; color: inherit; background-color: #fff; box-shadow: none; color: #666;}

.forms input:focus,
.forms textarea:focus,
.forms select:focus { -moz-transition: all linear 0.2s; transition: all linear 0.2s; outline: none; color: inherit; background-color: #fff; border: 1px solid rgba(21, 141, 247, 0.5); box-shadow: 0 0 3px rgba(21, 141, 247, 0.5) inset; color: #000;}

.forms input.is-error,
.forms textarea.is-error,
.forms select.is-error { background-color: rgba(238, 36, 85, 0.05); border: 1px solid rgba(238, 36, 85, 0.5); box-shadow: none inset; }
.forms input.is-error:focus,
.forms textarea.is-error:focus,
.forms select.is-error:focus {
    border-color: rgba(238, 36, 85, 0.75);
    box-shadow: 0 0 3px rgba(238, 36, 85, 0.5) inset; }
	.forms input.is-success,
	.forms textarea.is-success,
	.forms select.is-success {
		background-color: rgba(32, 188, 113, 0.05);
		border: 1px solid rgba(32, 188, 113, 0.5);
		box-shadow: none inset; }
	.forms input.is-success:focus,
	.forms textarea.is-success:focus,
	.forms select.is-success:focus {
		border-color: rgba(32, 188, 113, 0.75);
		box-shadow: 0 0 3px rgba(32, 188, 113, 0.5) inset; }

.forms input.is-warning,
.forms textarea.is-warning,
.forms select.is-warning {
  background-color: rgba(255, 105, 81, 0.05);
  border: 1px solid rgba(255, 105, 81, 0.5);
  box-shadow: none inset; }
  .forms input.is-warning:focus,
  .forms textarea.is-warning:focus,
  .forms select.is-warning:focus {
    border-color: rgba(255, 105, 81, 0.75);
    box-shadow: 0 0 3px rgba(255, 105, 81, 0.5) inset; }

.forms input:disabled, .forms input:disabled:hover, .forms input.is-disabled, .forms input.is-disabled:hover,
.forms textarea:disabled,
.forms textarea:disabled:hover,
.forms textarea.is-disabled,
.forms textarea.is-disabled:hover,
.forms select:disabled,
.forms select:disabled:hover,
.forms select.is-disabled,
.forms select.is-disabled:hover {
  resize: none;
  opacity: 0.7;
  cursor: default;
  font-style: italic;
  color: rgba(17, 17, 19, 0.6);
  border: 1px solid rgba(17, 17, 19, 0.1);
  box-shadow: none;
  background-color: #fff; }

  .forms input[type="radio"].is-error,
  .forms input[type="checkbox"].is-error {
  outline: 2px solid rgba(238, 36, 85, 0.5); }

  .forms input[type="radio"].is-success,
  .forms input[type="checkbox"].is-success {
  outline: 2px solid rgba(32, 188, 113, 0.5); }

.forms input[type="file"] {
  width: auto;
  border: none;
  padding: 0;
  height: auto;
  background: none;
  box-shadow: none;
  display: inline-block; }

.forms input[type="search"],
.forms input.is-search {
  background-repeat: no-repeat;
  background-position: 8px 51%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgb(0, 0, 0)" fill-opacity="0.4" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>');
  padding-left: 32px; }

.forms input[type="radio"],
.forms input[type="checkbox"] {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0; }

.forms label {
  display: block;
  font-size: 1em;
  font-weight: normal;
  text-transform: none;
  color: #FFF;
  margin-bottom: 4px; }
  .forms label.is-checkbox,
  .forms label .is-desc,
  .forms label .is-success,
  .forms label .is-warning,
  .forms label .is-error {
    text-transform: none;
    font-weight: normal; }
  .forms label.is-checkbox {
    font-size: 1em;
    line-height: 1.5;
    cursor: pointer;
    color: inherit; }
    .forms label.is-checkbox.is-small {
      font-size: 0.875em; }
    .forms label.is-checkbox.is-big {
      font-size: 1.125em; }
    .forms label.is-checkbox.is-large {
      font-size: 1.3125em; }
.white .forms label{ color: #333;}
.forms form {
	margin-bottom: 16px; }
	.forms form span.is-success,
	.forms form div.is-success {
	  font-size: 0.75em;
	  color: #20bc71; }
	.forms form span.is-error,
	.forms form div.is-error {
	  font-size: 0.75em;
	  color: #ee2455; }
	.forms form span.is-warning,
	.forms form div.is-warning {
	  font-size: 0.75em;
	  color: #ff6951; }
	.forms form span.is-success,
	.forms form span.is-error,
	.forms form span.is-warning {
	  margin-left: 2px; }
	.forms form .is-desc {
	  font-size: 0.75rem;
	  font-weight: normal;
	  text-transform: none;
	  color: rgba(17, 17, 19, 0.5); }
	.forms form span.is-desc {
	  margin-left: 4px; }
	.forms form div.is-desc {
	  margin-top: 4px;
	  margin-bottom: -4px; }
	.forms form .is-req {
	  position: relative;
	  top: 1px;
	  font-size: 1rem;
	  font-weight: bold;
	  color: #ee2455; }
  
  .forms .form-item {
	margin-bottom: 16px; }
  
  .forms fieldset > .form-item:last-child {
	margin-bottom: 0; }
  
  .forms .form-checkboxes label.is-checkbox {
	display: inline-block;
	margin-right: 16px; }
  
  .forms .form-item.is-inline,
  .forms .form-item.is-inline-offset {
	padding-left: 150px; }
  
  .forms .form-item.is-inline label:not(.is-checkbox) {
	float: left;
	margin-left: -150px; }
  
  .forms .form-item.is-bar input,
  .forms .form-item.is-bar textarea,
  .forms .form-item.is-bar select {
	display: inline-block;
	width: auto; }
  
  .forms .form-item.is-buttons {
	display: flex; }
	.forms .form-item.is-buttons button,
	.forms .form-item.is-buttons .button {
	  margin-right: 8px; }
	.forms .form-item.is-buttons button + .button.is-tertiary {
	  margin-left: 8px; }
	.forms .form-item.is-buttons button.is-push-right,
	.forms .form-item.is-buttons .button.is-tertiary.is-push-right,
	.forms .form-item.is-buttons .button.is-push-right {
	  margin-left: auto;
	  margin-right: 0; }
  
  .forms .is-append,
  .forms .is-prepend {
	display: flex; }
	.forms .is-append input,
	.forms .is-prepend input {
	  flex: 1; }
	.forms .is-append .button,
	.forms .is-append span,
	.forms .is-append a,
	.forms .is-prepend .button,
	.forms .is-prepend span,
	.forms .is-prepend a {
	  flex-shrink: 0; }
	.forms .is-append span,
	.forms .is-append a,
	.forms .is-prepend span,
	.forms .is-prepend a {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  padding: 0 16px;
	  border: 1px solid rgba(17, 17, 19, 0.1);
	  background-color: #fff;
	  white-space: nowrap; }
	.forms .is-append span,
	.forms .is-prepend span {
	  font-size: 0.875em;
	  font-weight: normal;
	  text-transform: none;
	  color: rgba(17, 17, 19, 0.5); }
	.forms .is-append a,
	.forms .is-prepend a {
	  font-size: 0.875em;
	  color: #158df7;
	  text-decoration: none; }
	  .forms .is-append a:hover,
	  .forms .is-prepend a:hover {
		text-decoration: underline; }
	.forms .is-append a.icon,
	.forms .is-append a[class^="icon-kube-"],
	.forms .is-append a[class*=" icon-kube-"],
	.forms .is-prepend a.icon,
	.forms .is-prepend a[class^="icon-kube-"],
	.forms .is-prepend a[class*=" icon-kube-"] {
	  font-size: 1rem;
	  color: rgba(17, 17, 19, 0.6); }
	  .forms .is-append a.icon:hover,
	  .forms .is-append a[class^="icon-kube-"]:hover,
	  .forms .is-append a[class*=" icon-kube-"]:hover,
	  .forms .is-prepend a.icon:hover,
	  .forms .is-prepend a[class^="icon-kube-"]:hover,
	  .forms .is-prepend a[class*=" icon-kube-"]:hover {
		color: #111113;
		text-decoration: none; }
  
  .forms .is-prepend input {
	border-radius: 0 4px 4px 0; }
  
  .forms .is-prepend .button {
	margin-right: -1px;
	border-radius: 4px 0 0 4px !important; }
  
  .forms .is-prepend span,
  .forms .is-prepend a {
	border-right: none;
	border-radius: 4px 0 0 4px; }
  
  .forms .is-append input {
	border-radius: 4px 0 0 4px; }
  
  .forms .is-append .button {
	margin-left: -1px;
	border-radius: 0 4px 4px 0 !important; }
  
  .forms .is-append span,
  .forms .is-append a {
	border-left: none;
	border-radius: 0 4px 4px 0; }

.white .forms a { color: #158df7;}

.shopping_title{
	background: #3d2beb;
	padding:10px 30px;
	color:#fff;
}
.white .shopping_title{ background: #666; }
.price_nt{
	font-size:12px;
}
.prod_item{
	border-bottom:#CCC solid 1px;
	float:left;
	width:100%;
	padding:10px 0;
}
.prod_item img{
	/*width:50%;*/
	max-height:100px;
	padding:5px;
}
.prod_item p{
	margin-bottom:0;
}
.price_underline{
	text-decoration: line-through;
	font-size:13px;
	color:#999;
	padding-right:10px;
}
.price_red {
	font-size: 20px;
	font-weight: bold;
	color: red;
	font-family: Tahoma;
}
.shopping_item{
	float:left;
	width:100%;
	border-bottom:#efefef solid 1px;
	padding:10px 0;
}
.shopping_item_01{
	float:left;
	width:100%;
	padding:10px 0;
}
.shopping_item_02{
	float:left;
	padding:10px 4%;
	text-align:left;
	line-height:190%;
}
.top_line {
	border-top: solid #efefef 1px;
}
.shopping_total{
	width:100%;
	float: left;
	text-align:right;
}
.shopping_total p{
	margin-bottom:0;
}
.shopping_total .total_01{
	float:left;
	width:100%;
	padding:10px 0;
}
.shopping_total .total_02{
	float:left;
	width:100%;
	padding:10px 0;
	border-top: solid #e1e1e1 1px;
}
.shopping_show{
	width:100%;
	float:left;
	padding:5px 0;
}
.btn_prod {
	padding: 5px 20px;
	color: #000;
	background:  rgba(175,203,46,.2);
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
}
.btn_prod:hover{
	color:#fff;
	background:#afcb2e;
}

p.p_num {
    height: 28px;
    position: relative;
}
 
span.sy_minus,span.sy_plus {
    width: 20px;
    height: 26px;
    text-align: center;
    display: block;
    position: absolute;
    top: 0px;
    font-size: 16px;  
    cursor: pointer;
    border-top: none;
    border-bottom: none;
	background:#6d2aa5;
	color: #FFF;
	line-height: 27px;
}
 
span.sy_minus {
    left: 0px;
}
 
span.sy_plus {
    right: 0px;
}
input.sy_num {
    width: 100%;
    height: 26px;
    text-align: center;
	color: #FFF;
  
	border: none;
    vertical-align: middle;
	background-color:transparent;
}
 
span.sy_num {
    padding: 5px 8px;
    border: solid 1px #d0d0d0;
    border-left: none;
    border-right: none;
    cursor: pointer;
}

.shopping_recipient{
	float:left;
	width:100%;
	margin:20px 0 0 0;
}
.shopping_recipient .form_body.list .form-group{
	margin-bottom:0;
}
.shopping_recipient .form_body.list .title{
	padding: 0 15px 0 0 ;
}
.shopping_recipient .form_body.list .title:after{
	content:"/";
	color:#afcb2e;
	padding-left:10px;
	font-size:10px;
}
.shopping_recipient .shopping_bottom{
	padding:30px 0;
}
.shopping_recipient .table{
	padding:20px;
}
    .shopping_recipient .table-cell:nth-child(1) {
        padding-right: 50px;
    }


.shopping_remarks{
	float:left;
	width:100%;
}
.shopping_remarks .con_font{
	padding:30px 30px 10% 30px;
}


.tool_bar select{
    position: relative;
    z-index: 2;
    height: 32px;
    padding: 0 10px;
    background-color: #FFF;
    color: #333;
    font-size: .95em;
    line-height: 32px;
    box-sizing: border-box;
    border-radius: 0;
    transition: border ease 0.5s;
}
.white table.tra tbody tr:nth-child(2n-1){ background: rgba(0,0,0,0.1);}
.white table th{ color: #000;}
.white table td{ color: #333;}
.white table td a { color: #6d2aa5;}
.white .shop_box a{ color: #6d2aa5;}
.white .shop_box a:hover{ color: #3d2beb;}
.white .shop_box p{ color: #333;}
.white .shop_box input.sy_num { color: #333;}

/*RWD*/
.mobile-show { display: none !important; }
.peload{ opacity:0;
	transition: opacity 700ms ease-in-out;
}
.peload.ed{ opacity:1;}
.pehide.ed{ display:none;}
.phone_btn{ display: none;}



@media only screen and (max-width: 1366px) {
	.inner-width { box-sizing: border-box; padding: 0 15px;}
	.txt-width { box-sizing: border-box; padding: 0 15px;}
	.txt-s-width { box-sizing: border-box; padding: 0 15px;}
}

@media only screen and (max-width: 1200px) {
	.top_menu>div>ul>li>a{ padding: 0 8px;}
}

@media only screen and (max-width: 1024px) {
	.top_menu .submenu>ul>li>a{ font-size: 16px;}

	.top_banner, .top_banner ul, .top_banner li { height: 700px;}
	.top_banner .active .txt{ top: 200px;}
	.top_banner .txt h2 { font-size: 30px; }
	
	.sec_banner .txt h2 { font-size: 30px; }

	.pho_list.s2 a{ opacity: 0.8;}

	.pho_list.pro a{  height: 110px;}
	.pho_list.pro a::after{ line-height: 110px;}
}


@media only screen and (max-width: 800px) {
	.desk-show { display: none!important; }
	.mobile-show { display: block!important; }

	#footer { padding: 30px;}

	.logo { left: 50%; margin: 0 0 0 -70px; text-align: center; width: 140px;}
	.logo img{ display: inline-block; margin: 0 0 10px 0;}
	.logo img:nth-child(1){ width: 50px;}
	.logo img:nth-child(2){ width: 140px;}

	#header .bg{ height: 145px; background-image: linear-gradient(0deg, rgba(0,0,0,0.3)  0%, rgba(50,0,50,0.3) 100%);
		-webkit-backdrop-filter: blur(10px) saturate(120%);
		backdrop-filter: blur(10px) saturate(120%);
	}
	#header.ed .bg{  background-image: linear-gradient(60deg, rgba(0,0,0,0.6) 0%, rgba(50,0,50,0.6) 100%);}
	#header .bg::before{ display: none;}

	#header.ed .logo { width: 40px; margin: 0 0 0 -20px;}
	#header.ed .logo img:nth-child(2){ width: 0;}

	.bg_2>.bg {
		background: url(../images/bg_2.jpg) #000 center top no-repeat;
		background-size: 100%;
	}
	.bg_3>.bg {
		background: url(../images/bg_3.jpg) #262626 20% top no-repeat;
		background-size: 150%;
	}

	/*MENU*/
	.menu_btn{ position: absolute; top:0; right:0; display:block; width:60px; height:60px; z-index:3000; cursor: pointer;} 
	.menu_btn>div{ position:absolute; width:32px; height:2px; background: #FFF; left:12px;
		transition: 0.2s ease-in;
	}
	.menu_btn.on>div{ background: #FFF;}
	.menu_btn .m1{ top:20px;}
	.menu_btn .m2{ top:28px;}
	.menu_btn .m3{ top:36px; }
	.menu_btn:hover .m1,.menu_btn:hover .m2,.menu_btn:hover .m3{ width:32px;}
	.menu_btn.on .m1{ left: 16px; top: 29px; width: 24px;
		transform: translateY(1px)
	}
	.menu_btn.on .m2{ opacity: 0;
		width:0; left:50%;
	}
	.menu_btn.on .m3{ left: 16px; top:29px; width: 24px;
		transform: translateY(-1px)
	}
	.top_menu{ padding: 60px 0 0 0;  background: #333; position:fixed; top:0 !important; right:-100%; width:270px;  z-index:100; height: 100%; box-sizing: border-box; letter-spacing: 0.1em; overflow: auto;
		transition: 500ms ease-in;
	}
	.top_menu ul{ list-style:none; margin:0; padding:0; width:100%; display:block; box-sizing: border-box;
		transition: 500ms ease-in;
	}
	.top_menu ul>li{ display: block; border-left:none; float: none; margin: 0;}
	.top_menu>div>ul>li {float: none; border-top:solid 1px #FFF; }
	.top_menu>div>ul>li:first-child{ border: none;}
	.top_menu>div>ul>li>a{ position:relative; display:block; color:#FFF; padding:10px; text-align: center; line-height: 1.2em; margin: 5px 0;
		transition: 500ms ease-in;
	}
	.top_menu>div>ul>li>a:hover { background: none; color: #FFF; }
	.top_menu>div>ul>li.on>a { background: #FFF; color: #000; }
	.top_menu>div>ul>li.submenuhead.on { height: auto; }
	.top_menu .submenu>ul>li>a:hover{ background: none; color: #FFF; }
	.top_menu .submenu>ul>li.on>a {background: #FFF;color: #6d2aa5;}
	
	.top_menu .submenu { position: relative; width: auto; top: 0; left:0;}
	.top_menu .on .submenu { top: 0; left:0;}
	#header.ed .submenu { top:0;}
	.top_menu.on{ right:0;}
	.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.3);
		transition: opacity 500ms ease-in;
	}
	.top_menu_mask.on{ left:0; opacity:1; z-index: 1;
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		backdrop-filter: blur(20px) saturate(150%);
	}
	.top_menu .submenu2 { position: relative; width: auto; padding: 10px; top: 0; left: 0;}
	.top_menu .submenu2::before {
		left: 10px;
		top: -5px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 5px 10px;
		border-color: transparent transparent #3d2beb transparent;
	}


	#path{ top: 145px; }
	.page_banner {	height: 300px; }

	.nav_menu{ top: 15px; right: inherit; left: 10px;}
	#header.ed .nav_menu { top: 15px;}
	#header.ed .nav_menu a{ opacity: 1;}
	.search_box{ position: fixed; top: 90px; left: 10px; right: inherit; background: rgba(0,0,0,0.5);}
	#header.ed .search_box{ top: 80px; }

	.top_banner, .top_banner ul, .top_banner li { height: 800px;}
	.top_banner .active .txt{ top: 300px;}

	.news_box.inx { background: #000;}
	.news_box.inx .hot  { background: transparent;}
	.news_box.inx .hot .pic { height: 70%; background: transparent;}
	.news_box.inx li a .pic { height: 240px; }

	.media_box{ padding: 80px 0;}
	.media_box .title_bar {padding: 0 0 80px 0;}


	blockquote.s1{ max-width: 90%;}

	.pic_right { margin: 0 0 0 20px; max-width: 300px;}
	.pic_left { margin: 0 20px 0 0; max-width: 300px;}

	.pho_list a { width: calc(100%/3 - 20px); }

	.news_box.page li { width: calc(100% / 2);}
	.news_box.media li { width: calc(100% / 2);}
	.news_box li a { margin: 10px; }
	.news_box .tool_bar label{ display: block; }
	.news_box .tool_bar input{ max-width: 130px;}
	
	.news_box { padding: 80px 0 20px;}


	.tab_scroll{ position: relative; padding: 60px 0 0 0;}
	.tab_scroll .scroll{ overflow: auto; -webkit-overflow-scrolling: touch; } 
	.tab_scroll .icon{ position: absolute; color:#FFF; z-index: 2; top: 0; left:50%; margin: 0 0 0 -25px; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px;}
	.tab_scroll .icon::before{ display: block; 
		font-family: "FontAwesome"; font-weight: 900; content: "\f07e";
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		transition: 500ms ease;
	}
	
	.tab_scroll table{ min-width: 900px;}

	.his_list li { float: right !important; width: calc(100% - 50px);}
    .his_list li h4, .his_list li:nth-of-type(2n) h4 { float: none; width: auto; text-align: left; padding: 0 10px;}
    .his_list li .txt { float: none !important; width: auto; text-align: left; padding: 0 10px;}
    .his_list li::before { left: -40px;}
    .his_list li::after { left: -32px;}
	.his_list .line { top: 2px; left: 30px;}
	.his_list li:nth-of-type(2n) .txt {float: left;}
    .his_list li:nth-of-type(2n)::before { left: -40px;}
    .his_list li:nth-of-type(2n)::after { left: -32px;}
	.his_list .line{ top: 15px;}
	
	.page_banner .txt h3 {font-size: 24px;}

	.shop_box li{ width: calc(100% / 3);}
	.shop_box li a .pic.imgLiquid_ready {opacity: 0.8;}
	.shop_box li a .price { background: rgba(110, 42, 165, 0.8);}

	.sp_box{ height: 700px;}
	.sp_box .txt { width: 60%; margin: 0 0 0 -30%;}
	.sp_box .cover iframe{ padding: 145px 0 0 0; height: calc( 100% - 145px ) ;}
}

@media only screen and (max-width: 640px) {
	

	#footer .foot_menu, #footer .info, #footer .follow{ width: auto; float: none;}
	#footer .copyright{ text-align: center;}
	#footer .copyright span{ display: block; margin: 5px 0;}
	
	.search_box{ top: 150px;}
	.search_box.on { max-width: 500px; width: calc(100% - 20px); box-sizing: border-box;}
	.search_box input { width: calc(100% - 78px); }
	
	.top_banner, .top_banner ul, .top_banner li { height: 600px;}
	.top_banner .pic { height: 100%; }
	.top_banner .txt { width: 80%; margin: 0 0 0 -40%;}
	.top_banner .active .txt { top: 220px;}
	.top_banner .txt h2 {font-size: 24px;}
	.top_banner .txt .text_pic { width: 60px;}
	
	.sec_banner .txt { width: 80%; margin: 0 0 0 -40%;}
	.sec_banner, .sec_banner ul { height: 400px;}
	.sec_banner li { height: 500px;}
	.sec_banner .active .txt { top: 0;}
	.sec_banner .txt h2 {font-size: 24px;}

	.news_box.inx .hot a { margin: 250px 0 0 0; width: 100%; padding: 30px;}
	.news_box.inx .hot a:hover { padding: 30px; width: 100%; }
	.news_box.inx li{ width: calc(100%); }
	.news_box.inx li a .pic { height: 300px; }

	.media_box .title_bar { padding: 0 0 40px 0;}
	.media_box li{ width: calc(100%); }
	.media_box li a{ margin: 10px;}
	.media_box li a .pic { height: 240px; filter: grayscale(0);}
	
	.act_box li:nth-child(3n-2) { width: 100%; }
	.act_box li:nth-child(3n-2) .pic { height: 300px; }

	.sitemenu_box ul.m1>li { width: calc(100%/2 - 20px);}
	.sitemenu_box ul.m1>li:nth-child(6n){ clear: inherit;}
	
	.pic_right { margin: 0 0 20px 0; max-width: 100%; float: none; }
	.title_bar.page { padding: 0 0 20px 0; }
	.title_bar h3 span{ padding: 0 20px;}

	blockquote.s1 { margin: 20px auto 40px; }

	.news_box.page li { width: calc(100% / 1) ; }
	.news_box.page li:nth-child(5n-4) {width: calc(100% / 1);}
	.news_box.page li:nth-child(5n-3) {width: calc(100% / 1);}
	.news_box.media li { width: calc(100% / 1) ; }
	.news_box .list li a .pic { width: 120px; height: 120px; }
	.news_box .list li a .title { width: calc( 100% - 120px); background: none; padding: 10px; font-size: 15px; line-height: 22px; }
	.news_box .dl li a .pic { width: 100; height: 80px; opacity: 1;}
	.news_box .dl li a .title{ width: 100%;}

	.title_bar h1{ font-size: 30px;}
	.title_bar h1 span{ margin: 0 0 5px 0;}
	.title_bar h1::before {bottom: -10px;}

	.news_box .tool_bar input { max-width: 120px; }
	.news_box .tool_bar .switch { padding: 10px; float: none; text-align: center;}

	.pho_list a { width: calc(100% - 20px);}
	
	.post_box.inx li a .title{ display: block; line-height: 1.2em; font-size: 18px;}


	.title_bar h1, .title_bar h3{ font-size: 30px;}

	.pho_list.s1 a { width: calc(100% - 20px); height: 160px; }
	
	.blog_box { padding: 40px 0; width: auto;}
	.blog_right{ position: relative; right: inherit; top: inherit; width: auto; padding: 20px;}
	.blog_right.on .items{  position: relative; top: inherit; width: auto; padding: 0;}

	.page_banner .txt.keep h3 b { font-size: 18px;}

	.pho_list.s2.waterfall a{ width: calc(50% - 20px); height: auto;}
	.pho_list.s2.large a{ width: calc( 100% - 20px) !important;}

	.shop_box li{ width: 100%;}

	.ad_banner a { height: 240px; }

	.shop_box .view .cover{ width: auto; float: none; margin: 0 0 10px 0;}
	.shop_box .view .cover .pic{ height: 300px;}
	.shop_box .view .txt{ clear: both; width: auto; float: none; margin: 0 0 10px 0; padding: 0;}

	.pho_list.pro a{ width: calc( 100% / 3 - 20px);}

	.sp_box{ height: 600px;}
	.sp_box .txt {
		width: 96%;
		margin: 0 0 0 -48%;
	}
	.tool_bar .pull-right{ margin: 5px 0; display: block; float: none !important;}
}
@media only screen and (max-width: 414px) {
	.news_box .tool_bar input { max-width: 100px; }
	.news_box .tool_bar label { margin-bottom: 10px;}
	
}

@media only screen and (max-width: 375px) {
	
}

@media only screen and (max-width: 320px) {

}