/*Clear Css*/
.clear { clear: both; font-size: 0px; height: 0px; line-height: 0; }
.clearfix:after { content: '\20'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: block; zoom: 1; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
::selection { background: #222; color: white; text-shadow: none; }
::-webkit-scrollbar-track-piece {
width:10px;
background-color:#eee;
border-radius:50px
}
::-webkit-scrollbar {
width:8px;
height:6px;
}
::-webkit-scrollbar-thumb {
height:50px;
background:#999;
border-radius:50px;
cursor:pointer;
}
::-webkit-scrollbar-thumb:hover {
background:#999;
cursor:pointer
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td { border: 0; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
*,
*:before,
*:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }
ol,
ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption,
th,
td { font-weight: normal; text-align: left; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; }
blockquote,
q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; }
a:focus { /*outline: 2px solid #c1c1c1;
outline: 2px solid rgba(51, 51, 51, 0.3);*/
outline: none; }
a:hover,
a:active { outline: 0; }
a img { border: 0; }
/*/////////////////////////////////////////////////////////////////////////// 

0.1 T Y P O G R A P H Y

///////////////////////////////////////////////////////////////////////////*/
body,
button,
input,
select,
textarea { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.6; letter-spacing: 0.034em; -webkit-font-smoothing: antialiased; /* none | antialiased | subpixel-antialiased */ }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab700", sans-serif; clear: both; }
h1 { font-size: 24px; font-size: 2.4rem; text-transform: uppercase; }
h2 { font-size: 20px; font-size: 2rem; text-transform: uppercase; }
h3 { font-size: 16px; font-size: 1.6rem; }
h4 { font-size: 12px; font-size: 1.2rem; }
p { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.034em; display: block; height: auto; margin-bottom: 3em;/*overflow: hidden;*/
}
b,
strong { /*font-weight: 700;*/
font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab700", sans-serif; }
dfn,
cite,
em { font-style: italic; }
i { }
blockquote { border-left: 4px solid #707070; border-left: 4px solid rgba(51, 51, 51, 0.7); color: rgba(51, 51, 51, 0.7); color: #707070; font-size: 18px; font-size: 1.8rem; font-style: italic; line-height: 1.6667; margin-bottom: 1.6667em; padding-left: 0.7778em; }
blockquote p { margin-bottom: 1.6667em; }
blockquote > p:last-child { margin-bottom: 0; }
blockquote cite,
blockquote small { color: #333; font-size: 15px; font-size: 1.5rem; line-height: 1.6; }
blockquote em,
blockquote i,
blockquote cite { font-style: normal; }
blockquote strong,
blockquote b { /*font-weight: 400;*/
font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab700", sans-serif; }
address { }
code,
kbd,
tt,
var,
samp,
pre { font-family: Inconsolata, monospace; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }
pre { background-color: transparent; background-color: rgba(0, 0, 0, 0.01); border: 1px solid #eaeaea; border: 1px solid rgba(51, 51, 51, 0.1); line-height: 1.2; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 0.8em; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
abbr[title] { border-bottom: 1px dotted #eaeaea; border-bottom: 1px dotted rgba(51, 51, 51, 0.1); cursor: help; }
mark,
ins { background-color: #fff9c0; text-decoration: none; }
sup,
sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: .5ex; }
small { font-size: 75%; }
big { font-size: 125%; }
/*/////////////////////////////////////////////////////////////////////////// 

0.2  G L O B A L

Base on screen min-width:1280px and max-width:1920px;
Other screen width see breakpoints setting below.

///////////////////////////////////////////////////////////////////////////*/

html,
body { background: #252525; color: #F6F5F5; width: 100%; height: 100%; }
img { width: auto; height: auto; display: block; }
/* Global padding and margin  */
.pagemargin { margin-left: 60px; margin-right: 60px; }
.pagepadding { padding-left: 60px; padding-right: 60px; }
.pagemargin_h { margin-left: 30px; margin-right: 30px; }
.pagepadding_h { padding-left: 30px; padding-right: 30px; }
.pagemargin_4s { margin: 40px; }
.pagepadding_4s { padding: 40px; }
.pagemargin_4s_h { margin: 30px; }
.pagepadding_4s_h { padding: 30px; }
/* Tilting container */
.horizontal_tilting,
.vertical_tilting { overflow: hidden; }
/*.vertical_tilting,.horizontal_tilting{ overflow:hidden;}
.vertical_tilting{
-webkit-transform: matrix(1, 0, -0.138, 1, 0, 0) scale3d(1, 1, 1);
-moz-transform: matrix(1, 0, -0.138, 1, 0, 0) scale3d(1, 1, 1);
-ms-transform: matrix(1, 0, -0.138, 1, 0, 0) scale3d(1, 1, 1);
-o-transform: matrix(1, 0, -0.138, 1, 0, 0) scale3d(1, 1, 1);
transform: matrix(1, 0, -0.138, 1, 0, 0) scale3d(1, 1, 1);
overflow: hidden;
}

.vertical_tilting_offset{
-webkit-transform: matrix(1, 0, 0.138, 1, 0, 0);
-moz-transform: matrix(1, 0, 0.138, 1, 0, 0);
-ms-transform: matrix(1, 0, 0.138, 1, 0, 0);
-o-transform: matrix(1, 0, 0.138, 1, 0, 0);
transform: matrix(1, 0, 0.138, 1, 0, 0);
}

.horizontal_tilting{
-webkit-transform: skewY(-1.9deg) scale3d(1, 1, 1);
-moz-transform: skewY(-1.9deg) scale3d(1, 1, 1);
-ms-transform: skewY(-1.9deg) scale3d(1, 1, 1);
-o-transform: skewY(-1.9deg) scale3d(1, 1, 1);
transform: skewY(-1.9deg) scale3d(1, 1, 1);
overflow: hidden;
}

.horizontal_tilting_offset{
-webkit-transform: skewY(1.9deg);
-moz-transform: skewY(1.9deg);
-ms-transform: skewY(1.9deg);
-o-transform: skewY(1.9deg);
transform: skewY(1.9deg);
}

.origin_x0y0{
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}

.origin_x0y100{
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}

.origin_x100y0{
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
*/

/* Progress JS */
.progressjs-inner { width: 0; }
.progressjs-progress { z-index: 98; }
.progressjs-theme-pf { height: 3px; top: auto !important; }
.progressjs-theme-pf .progressjs-inner { height: 3px; background-color: #e02e2b; }
.progressjs-theme-pf .progressjs-percent { display: none; }
/* INTRO */
#intro { background: #F5F5F5; height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 99; /*pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;*/
display: none; }
#loading_wrapper { height: 100%; width: 100%; position: absolute; z-index: 1; top: 0; left: 0; display: table; text-align: center; }
#loading_innerwrapper { display: table-cell; vertical-align: middle; line-height: 4; text-align: center }
#loading_innerwrapper .progress { font-size: 1.6rem; font-size: 16px; color: #7e7e7e; height: 4em; position: relative; }
#loading_innerwrapper .progress span { margin-right: 0.5em; }
#loading_innerwrapper .progress span:nth-child(10) { margin-right: 0; }
#loading_innerwrapper .progress span.ins { color: #e02e2b; }
#loading_innerwrapper .scroll_title { color: #e02e2b; font-size: 1.4rem; font-size: 14px; text-transform: uppercase; height: 4em; position: relative; overflow: hidden; pointer-events: none; }
#loading_innerwrapper .scroll_title span { display: list-item; }
.scroll_title span.swiper-slide { opacity: 0; }
.scroll_title span.swiper-slide-active { opacity: 1; }
#lotus { height: 100%; }
#lotus li { height: 70%; width: 100%; top: 15% !important; padding: 24px; }
#lotus img { max-height: 100%; width: auto; }
#lotus .layer:nth-child(1) { opacity: 0.25; }
#lotus .layer:nth-child(2) { opacity: 0.40; }
#lotus .layer:nth-child(3) { opacity: 0.55; }
#lotus .layer:nth-child(4) { opacity: 0.70; }
#lotus .layer:nth-child(5) { opacity: 0.85; }
#lotus .layer:nth-child(6) { opacity: 0.90; }
/* Header */
header { width: 100%; position: fixed; top: 0; z-index: 90; background-color: none; }
.h120 header { background-color: white; padding-top: 16px; padding-bottom: 16px; }
.h120 #site_logo { background-image: url(../images/logoh.svg); }
.cross #header { background: none; }
#site_logo { float: left; width: 160px; height: 30px; display: block; background: url(../images/logo.svg) no-repeat left center; background-size: contain; }
.h120 #site_logo { height: 25px; width: 136px; }
/* Menu Control */
#menu_control_wrapper { float: right; cursor: pointer; height: auto; width: auto; overflow: hidden; position: relative; }
#menu_control { height: auto; width: auto; overflow: hidden; color: white; /* #E6E3E3 */ line-height: 28px;/* 25px for lowercase */ position: relative; z-index: 2; }
#menu_control_wrapper .secondary {  /* Back button inactive */ position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: 100%; overflow: hidden; }
.h120 #menu_control,
.cross #menu_control { color: #252525; }
.cross #menu_control span { display: none; }
#menu_control span { display: none; text-transform: uppercase; }
/* Hamburger */
.menu_icon { position: relative; width: 25px; height: 25px; float: right; margin-left: 12px; }
.menu_icon div { height: 2px; width: 27px; background: white; }
.h120 .menu_icon { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }
.h120 .menu_icon div,
.cross .menu_icon div { background: #252525; }
.menu_icon .child_1 { margin-top: 6px; }
.cross .menu_icon .child_1 { position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 12px; margin-top: 0; }
.menu_icon .child_2 { margin-top: 4px; margin-bottom: 4px; }
.cross .menu_icon .child_2 { display: none; }
.cross .menu_icon .child_3 { position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 12px; }
.quickcontact-active #menu_control span { display: none; }
.quickcontact-active .menu_icon div { background: white; }
/* Navigation */
#nav_wrapper { height: 100%; width: 0;/*350px*/ position: fixed; z-index: 85; right: -120px; text-align: right; font-size: 14px; font-size: 1.4rem; color: #7e7e7e; overflow: hidden; text-transform: lowercase; /*pointer-events:none;*/
}
#nav_wrapper .vertical_tilting { background: white; width: 100%; height: 100%; position: absolute; z-index: -1; right: 0; }
#nav_wrapper ul {/* #nav_wrapper .menu-custom-menu-item-container ul */ position: absolute; width: 100%; top: 50%; right: 0; margin-top: -240px; overflow: hidden; }
#nav_wrapper li { width: 75%; float: right; pointer-events: all; }
#nav_wrapper a { color: #7e7e7e; text-decoration: none; display: block; width: 100%; height: 60px; line-height: 60px; text-transform: capitalize; box-sizing: border-box; text-align: center; }
#nav_wrapper .current a,
#nav_wrapper .current_page_item a,
#nav_wrapper .current-menu-item a,
#nav_wrapper a:hover { color: #e02e2b; }
#nav_wrapper .follow_text { font-size: 10px; font-size: 1rem; position: absolute; bottom: 0; right: 0; text-transform: capitalize; pointer-events: all; }
.h120 #nav_wrapper .follow_text { padding-top: 16px; padding-bottom: 16px; }
#agency_tag a { display: inline; height: auto !important; line-height: normal !important; }
/* Footer */
footer { font-size: 14px; font-size: 1.4rem; color: #7e7e7e; width: 100%; overflow: hidden; position: relative; /*background-color:#333;*/
}
footer a { text-decoration: none !important; color: #7e7e7e !important; }
#footer_contact { float: right; }
#footer_contact span.fax,
#footer_contact span.email { margin-left: 12px; }
#background_music { float: right; margin-left: 12px; cursor: pointer; width: 24px; text-align: right; color: white; pointer-events: all; }
#background_music .icon-volume-off { display: none; }
#switch_language { float: left; pointer-events: all; }
#switch_language a { color: #E6E3E3; }
#switch_language a:hover { color: #FF8B49; }
/* mouse icon */
#icon_mouse { width: 24px; height: 34px; position: absolute; left: 50%; margin-left: -12px; margin-top: 0; opacity: 0.6; }
#icon_mouse .edge { width: 24px; height: 34px; border: 2px solid white; border-radius: 12px; position: relative; }
#icon_mouse .dot { height: 4px; width: 4px; border-radius: 2px; background: white; position: absolute; left: 50%; margin-left: -2px; top: 6px; opacity: 1; }
#search_control { float: left; margin-right: 36px; color: #E6E3E3; cursor: pointer; pointer-events: all; display:none ;}
#search_control:hover { color: #FF8B49; }
/* Search Form */
#search_wrapper { height: 130px;/*216*/ width: 100%; position: fixed; z-index: 70; bottom: -130px; pointer-events: none; }
.headroom-unpinned #search_wrapper { height: 130px; }
.headroom-unpinned .search-form { margin-top: 22px; margin-bottom: 22px; }
#search_wrapper .horizontal_tilting { background: white; width: 100%; height: 100%; /*display: table;*/
position: relative; }
#search_wrapper .form_wrapper { /*display: table-cell;
vertical-align: middle;*/
position: absolute; z-index: 1; bottom: 0; width: 100%; pointer-events: all; }
.search-form span,
.search-submit { display: none; }
#search_wrapper i,
#search_wrapper .icon-search { color: #FF8B49; }
#search_wrapper input[type="search"] { font-size: 18px; font-size: 1.8rem; line-height: 48px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; border: none; outline: none; width: 90%;/* Reset in function.js */ }
/* HTML5 Player */
.video_object { position: relative; width: 100%; height: 100%; overflow: hidden; text-align: center; background: black; }
.html5_player { /* Setting the height of outter container is required. */ background: black; min-width: 100%; /* Core */ min-height: 100%; /* Core */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; }
/* HTML5 Player Custom UI */
.control { position: absolute; z-index: 3; bottom: 0; right: 0; font-size: 12px; font-size: 1.2rem; letter-spacing: 0; }
.control div { display: inline-block; }
.control a { color: white; text-decoration: none; }
.control .progressTime { margin-left: 4px; text-shadow: 0px 0px 1px #262625; min-width: 96px; text-align: center; }
.control .progressBar { height: 8px; width: 144px; border-radius: 4px; background: rgba(114,114,116,0.5);/*#252525*/ overflow: hidden; position: relative; box-shadow: 0px 0px 1px #262625; cursor: pointer; }
.control .progressBar .timeBar { height: 100%; border-radius: 4px; width: 0; background: #F6F5F5; position: absolute; z-index: 2; top: 0; left: 0; }
.control .progressBar .bufferBar { height: 100%; border-radius: 4px; width: 0; background: #7e7e7e; position: absolute; z-index: 1; top: 0; left: 0; }
.control .btnPlay { cursor: pointer; margin-left: 32px; width: 14px; text-shadow: 0px 0px 1px rgba(38,38,37,0.4); }
.control .btnPlay .icon-pause { display: none; }
.control .muted { cursor: pointer; margin-left: 8px; width: 14px; text-shadow: 0px 0px 1px rgba(38,38,37,0.4); }
.control .icon-volume-off { display: none; }
.control .fullscreen { cursor: pointer; margin-left: 8px; text-shadow: 0px 0px 1px rgba(38,38,37,0.4); }
/* Overlay */
.film_overlay { height: 100%; width: 100%; background-color: black; opacity: 0.5; position: absolute; top: 0; left: 0; z-index: 10; }
#global_overlay { position: fixed; z-index: 60; height: 100%; width: 100%; background-color: black; opacity: 0.5; display: none; cursor: pointer; }
/* Play button */
.play_button { height: 76px; width: 76px; border-radius: 38px; background: rgba(0,0,0,0.6); position: relative; text-align: center; cursor: pointer; }
.play_button .circle { height: 60px; width: 60px; border-radius: 30px; border: 2px solid #e02e2b; display: table; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; }
.play_button i { color: white; display: table-cell; vertical-align: middle; padding-left: 3px; }
/* Swiper 3.1.2 global setting */

.swiper-container { height: 100%; width: 100%; }
.swiper-slide img { min-height: 100%; }
.swiper-slide { position: relative; background-size: cover; background-position: center center; }
.swiper-container-horizontal>.swiper-pagination { bottom: 0 !important; margin-left: 0; margin-right: 0; }
.swiper-container-vertical>.swiper-pagination { right: 0 !important; margin-top: 0; margin-bottom: 0; }
.swiper-pagination-bullet { border-radius: 8px !important; }
.swiper-pagination-bullet-active { background: #e02e2b !important; width: 36px !important; border-radius: 8px !important; }
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next { left: 0 !important; }
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev { right: 0 !important; }
/* Swiper Custom */


.swiper-button-next { background-image: url(../images/arrow_down.svg)!important; margin-top: 0 !important; }
.swiper-button-prev { background-image: url(../images/arrow_up.svg)!important; right: 0 !important; left: auto !important; margin-top: -44px !important; }
.swiper-button-next,
.swiper-button-prev { width: 20px !important; background-size: contain !important; }
/* Front-end Admin UI */
#admin_ui_legend,
.admin_ui { display: none; }
/* Admin login */

.logged-in #admin_login { display: none; }
#admin_login { width: 200px; height: 48px; position: fixed; z-index: 99; bottom: 0; left: 0; text-align: center; }
#admin_login_button { display: block; background: black; color: white !important; text-decoration: none; font-size: 18px; font-size: 1.8rem; text-transform: uppercase; letter-spacing: 0.034; font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; padding: 12px 24px; height: 100%; width: 100%; margin-top: 256px; }
/*/////////////////////////////////////////////////////////////////////////// 

1.0  P A G E - H O M E

///////////////////////////////////////////////////////////////////////////*/
.home footer { position: fixed; bottom: 0; z-index: 30; pointer-events: none; }
.home .video_object { position: absolute; }
.slide_object { height: 100%; width: 100%; position: absolute; z-index: -1; }
/*.home .swiper-button-next, 
.home .swiper-button-prev,
.home .swiper-wrapper,
.home .film_overlay,
.home .slide_object{
position: fixed;
}*/


.photo_container { height: inherit; width: inherit; }
.photo_container .slide_item { height: inherit; width: inherit; opacity: 0; position: absolute; z-index: 2; background-size: cover; background-position: center center; }
.photo_container .active_item { opacity: 1; z-index: 4; }
.photo_container .last_active { z-index: 3; }
.home .swiper-container { position: absolute; z-index: 20; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.home .swiper-slide { overflow: hidden; display: table; }
.home .slide_content { display: table-cell; vertical-align: middle; text-align: center;/*display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 100%;*/
}
.home .swiper-slide h1 { font-family: Impact, Impact, 'passionbold', sans-serif; color: #e02e2b; font-size: 160px; font-size: 16rem; line-height: 0.9; width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 32px; }
.home .swiper-slide p { font-size: 16px; font-size: 1.6rem; line-height: 1.4; width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
.home .section_link { color: white; text-decoration: none; text-transform: uppercase; font-size: 14px; font-size: 1.4rem; border: 2px solid white; padding: 8px 48px; display: inline-table; cursor: pointer; }
#slide_64 h1 { max-width: 1100px; }
#slide_64 p { max-width: 640px; }
/* Quick Contact Card */
#quick_contact_wrapper { height: 100%; width: 0;/*350px*/ position: fixed; z-index: 85; left: -120px; font-size: 14px; font-size: 1.4rem; letter-spacing: normal; line-height: 1.5; color: #7e7e7e; overflow: hidden; pointer-events: none; }
#quick_contact_wrapper .vertical_tilting { background: white; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; pointer-events: all; }
#quick_contact_wrapper a { color: #7e7e7e; text-decoration: none; }
#quick_contact_wrapper .contact { width: 100%; height: 50%; display: table; overflow: hidden; }
#quick_contact_wrapper .contact ul { /*position: absolute;
top: 5%;*/
display: table-cell; vertical-align: middle; font-size: 12px; font-size: 1.2rem; }
#quick_contact_wrapper .address { margin-top: 40px; margin-bottom: 14px; }
#quick_contact_wrapper .contact_person { color: #252525; /*margin-top: 40px;*/
text-transform: uppercase; margin-left: 0; margin-right: 0; margin-bottom: 0; }
#quick_contact_wrapper .job_title { color: #252525; margin-bottom: 14px; }
#quick_contact_wrapper .map { position: absolute; z-index: 1; bottom: 0; width: 100%; height: 50%; overflow: hidden; text-align: center; background-size: auto 180%; background-position: center center;/*display: table;*/
}
.map_radar,
.map_pin { /*display: table-cell;
vertical-align: middle;*/
width: 32px; height: 32px; position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; border-radius: 32px; border: 1.5px solid #e02e2b; }
.map_pin span { display: block; width: 6px; height: 6px; position: absolute; top: 50%; left: 50%; margin-top: -3px; margin-left: -3px; border-radius: 3px; background: #e02e2b; }
/*/////////////////////////////////////////////////////////////////////////// 

2.0  P A G E -  A B O U T

///////////////////////////////////////////////////////////////////////////*/

#about_top { height: 100%; width: 100%; }
#about_top .container { height: 100%; width: 100%; background-size: cover; background-position: center center; display: table; position: relative; }
#about_top .container .title { display: table-cell; vertical-align: middle; color: #e02e2b; }
.page h1,
.category h1 { font-family: Impact, 'passionbold', sans-serif; font-size: 120px; font-size: 12rem; line-height: 0.9; width: 100%; max-width: 640px; overflow: hidden; margin-left: -5px; }
.page h3,
.category h3 { font-size: 18px; font-size: 1.8rem; }
#about_top .next_section { color: #F6F5F5;/*252525*/ font-size: 14px; font-size: 1.4rem; line-height: 14px; position: absolute; bottom: 0; left: 0; letter-spacing: 0.004em; cursor: pointer; text-decoration: none; display: block; }
#about_top .next_section i { margin-right: 14px; }
.overview { background: #252525; text-align: center; }
.overview .container { max-width: 960px; margin: auto; }
.overview .section_link { display: none; }
/* latest works //////////////////////////// */
#latest_works { height: 100%; width: 100%; }
/* first child //////////////////////////// */
#latest_works .container:first-child { height: 75%; width: 100%; text-align: left; color: #e02e2b; }
#latest_works .container:first-child a { color: #e02e2b; display: block; }
#latest_works .container:first-child .post_wrapper { height: 120%; width: 100%; }
#latest_works .container:first-child .post_wrapper .title { display: block; }
#latest_works .container:first-child .post_wrapper h2 { font-size: 48px; font-size: 4.8rem; line-height: 0.9; max-width: 540px; }
#latest_works .container:first-child .post_wrapper h3 { display: block; font-size: 30px; font-size: 3rem; }
#latest_works .container:first-child .post_wrapper h4 { font-size: 24px; font-size: 2.4rem; line-height: 3; }
#latest_works .container:first-child .play_button { display: block; }
#latest_works .container:first-child .play_button a { height: 100%; width: 100%; }
#latest_works .container:first-child .works_background { /*display: block; Wating for the works backround content ready  */
}
/* other works //////////////////////////// */
#latest_works .container { height: 27%; width: 25%; float: left; position: relative; overflow: hidden; text-align: center; color: white; }
#latest_works .container:hover .film_overlay { opacity: 0; }
#latest_works .container a { text-decoration: none; color: white; }
#latest_works .post_wrapper { background-size: cover; background-position: center center; height: 101%; width: 101%; display: table; }
#latest_works .post_wrapper .title { display: table-cell; vertical-align: middle; position: relative; z-index: 11; pointer-events: none;/* revised:2016-01-14 */ }
#latest_works .post_wrapper h2 { font-size: 18px; font-size: 1.8rem; font-family: 'Century Gothic', \5FAE\8F6F\96C5\9ED1, "museo_slab700", sans-serif; line-height: 1; letter-spacing: 0.004em; }
#latest_works .post_wrapper h3 { display: none; font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; }
#latest_works .post_wrapper h4 { font-size: 14px; font-size: 1.4rem; font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; line-height: 1; margin-bottom: 6px; }
#latest_works .play_button { position: absolute; z-index: 12; top: 50%; left: 50%; margin-top: -68px; margin-left: -38px; display: none; }
#latest_works .works_background { display: none; color: white; position: absolute; z-index: 11; bottom: 10%; opacity: 0; }
#latest_works .works_background p { width: 640px; }
#latest_works .works_background a { color: white !important; display: inline-block !important; }
#latest_works .container:hover .works_background { bottom: 15%; opacity: 1; }
/* Works overview  //////////////////////////// */
#client { position: relative; }
#works_overview .section_button,
#client .section_button { display: block; width: 100%; height: 40px; background: #e02e2b; color: white; text-decoration: none; text-transform: uppercase; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.004em; text-align: center; line-height: 40px; position: absolute; top: 0px; left: 0px; right: 0px; z-index: 2; }
#works_overview .section_button:hover { background: #FF8B49; }
#works_overview .section_button span { display: block; }
/* Client list //////////////////////////// */
#client { margin-top: -2px !important; background: url(../images/client.jpg) no-repeat center center #000; background-size: cover; height: 100%; box-sizing: border-box; }
#careers { height: 100%; box-sizing: border-box; }
.swiper-container-clients { }
.swiper-container-clients .swiper-wrapper { height: auto; padding-bottom: 72px; }
.swiper-container-clients .swiper-wrapper a { display: block; height: 100%; width: 100%; border-radius: 3px; background-size: 65%; background-position: center center; background-repeat: no-repeat; opacity: 0.9; }
.swiper-container-clients .swiper-wrapper a:hover { background-color: #000; opacity: 1; border-radius: 5px; }
.swiper-container-clients .swiper-slide { height: 170px; overflow: hidden; }
.swiper-container-clients .swiper-pagination { padding-bottom: 48px; }
#client_overview { margin-top: -2px !important; }
#client_overview .title_wrapper { background: #F6F5F5; height: 46px; }
#client_overview h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; text-transform: uppercase; font-size: 24px; font-size: 2.4rem; letter-spacing: 0.004em; color: #252525; position: relative; text-align: center; }
#client_overview h3 span { display: block; background: #F6F5F5; height: 96px; width: 96px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; z-index: -1; left: 50%; margin-left: -46px; bottom: -32px; }
/* Careers list //////////////////////////// */
#careers { background: url(../images/careers.jpg) no-repeat #000 center center; background-size: cover; text-align: center; letter-spacing: 0.004em; height: 100%; }
#careers .swiper-container { height: auto; }
#careers h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; text-transform: uppercase; font-size: 24px; font-size: 2.4rem; margin-top: 2rem; box-sizing: border-box; }
#careers .swiper-wrapper { margin-top: 2em; margin-bottom: 2em; height: auto; }
#careers .swiper-slide { height: auto; }
#careers .swiper-slide a { text-decoration: none; color: #fff; display: block; height: 100%; width: 100%; }
#careers .swiper-slide a:hover { color: white; margin-bottom: 12px; }
.job_image { width: 144px; height: 144px; border-radius: 200px; overflow: hidden; background-size: cover; background-position: center center; margin-left: auto; margin-right: auto; margin-bottom: 1.6em; }
#careers .swiper-slide a:hover .job_image { margin-top: -12px; box-shadow: 0px 25px 24px 4px rgba(0,0,0,0.3); }
#careers h4 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; font-size: 18px; font-size: 1.8rem; line-height: 1; margin: auto; }
#careers h5 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; font-size: 12px; font-size: 1.2rem; line-height: 1; color: white; background: #252525; border-radius: 24px; padding: 0.6em 2em; display: table; margin-left: auto; margin-right: auto; margin-top: 1em; margin-bottom: 2em; }
#careers .swiper-slide a:hover h5 { background: #262625; }
#careers .swiper-pagination-bullet-active { background: white !important; }
#careers .callforaction a { font-size: 14px; font-size: 1.4rem; text-transform: uppercase; margin-left: auto; margin-right: auto; border: 2px solid white; color: white; text-decoration: none; padding: 0.6em 3em; }
#careers .callforaction p { font-size: 16px; font-size: 1.6rem; color: #ffffff; letter-spacing: 0.034em; width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; margin-top: 2em; margin-bottom: 2em; line-height: 1.6; }
/* Recruitment Partner //////////////////////////// */
#partner_overview { position: relative; background: #565451; height: auto; overflow: hidden; }
#partner_overview .container { position: relative; z-index: 1; top: 0; height: auto; overflow: hidden; margin-bottom: 36px; }
#partner_overview .background { background-size: cover; background-position: center center; opacity: 0.05; height: 100%; width: 100%; position: absolute; top: 0; }
#partner_overview p { color: #7e7e7e; font-size: 12px; font-size: 1.2rem; line-height: 1.3; letter-spacing: 0.004em; margin-bottom: 1.2em; }
#partner_overview h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; text-transform: uppercase; font-size: 24px; font-size: 2.4rem; width: 216px; line-height: 1; float: left; margin-right: 30px; margin-bottom: 30px; }
#partner_overview .seeking_content { overflow: hidden; float: left; margin-right: 30px; width: 45%; }
#partner_overview .seeking_content p { font-size: 14px; font-size: 1.4rem; }
#partner_overview .seeking_content p:first-child {  /* .seeking_content setting this class in post content */ width: 46%; float: left; margin-right: 30px; }
#partner_overview .seeking_content p:nth-child(2) { width: 46%; float: left; }
#partner_overview .seeking_list { /* .seeking_list setting this class in post content */ width: 20%; overflow: hidden; float: left; }
#partner_overview .seeking_list p { color: white; width: 50%; float: left; margin-right: 0; }
#partner_overview .seeking_list p:first-child { width: 100%; }
#partner_overview .seeking_list p:nth-child(2) { }
#partner_overview .seeking_list p:nth-child(3) { float: right; }
#partner_overview .section_button { background: #F6F5F5; height: 128px; width: 128px; border-radius: 256px; font-size: 14px; font-size: 1.4rem; line-height: 1.2; color: #565451; text-decoration: none; text-transform: uppercase; display: table; text-align: center; position: absolute; top: 0; right: 0; cursor: pointer; }
#partner_overview .section_button span { display: table-cell; vertical-align: middle; }
/* Contact //////////////////////////// */
#contact { height: 75%; width: 100%; min-height: 320px; position: relative; background: #F6F5F5; overflow: hidden; }
#contact .map { height: 120%; margin-top: -1.5em; overflow: hidden; text-align: center; background-size: auto 140%; background-position: center center; }
#business_card { background: #F6F5F5; margin-top: -2px; color: #7e7e7e; font-size: 12px; font-size: 1.2rem; letter-spacing: 0.004em; height: auto; overflow: hidden; }
#business_card .container { height: auto; overflow: hidden; }
#business_card .contact_person { color: #252525; text-transform: uppercase; }
#business_card .job_title { color: #252525; margin-bottom: 14px; }
#business_card .address { margin-bottom: 14px; }
#business_card a { color: #7e7e7e; text-decoration: none; }
#business_card ul { float: left; max-width: 320px; position:relative;}
#business_card ul:nth-child(2) { margin-right: 60px; }
#business_card .img{ position:absolute; left:100%; width:130px; top:0px; padding-left:30px;}
#business_card .img img{ width:100%; height:auto; display:block; box-shadow:0 0 3px rgba(0,0,0,0.3);}
#business_card h3 { font-family: Impact, 'passionbold', sans-serif; font-size: 48px; font-size: 4.8rem; text-align: right; line-height: 1; color: #e02e2b; text-transform: uppercase; float: right; width: 100%; max-width: 540px; clear: none; }
/*/////////////////////////////////////////////////////////////////////////// 

2.1  P A G E -  P A R T N E R  A P P L I C A T I O N

///////////////////////////////////////////////////////////////////////////*/
.partner-apply.h120 #header { background-color: white; }
.partner-apply #menu_control_wrapper .secondary { /* Back button active */
z-index: 3; }
#application_header { display: table; background: #F6F5F5; color: #252525; width: 100%; height: 50%; letter-spacing: 0.004em; overflow: hidden; }
#application_header .container { display: table-cell; vertical-align: bottom; position: relative; z-index: 2; }
#application_header .background,
#category_header .background { background-size: cover; background-position: center center; opacity: 0.05; height: 50%; width: 100%; position: absolute; z-index: 1; top: 0; left: 0; }
#application_header h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; margin-top: 2em; margin-bottom: 0.5em; }
#application_header h1 { font-size: 96px; font-size: 9.6rem; margin-bottom: 0.2em; margin-left: -3px; }
/* Applicaiton form //////////////////////////// */
#application_form li { float: left; margin-right: 60px; }
#application_form .form_item { width: 480px; height: auto; overflow: hidden; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.004em; color: #7e7e7e; margin-bottom: 0.6em; padding: 6px 0; }
#application_form .form_name { line-height: 32px; }
#application_form .mark { float: right; width: 16px; text-align: right; }
#application_form .follow_text { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; width: 260px; float: right; clear: both; margin-right: 16px; font-size: 12px; font-size: 1.2rem; color: #7e7e7e; line-height: 1.2; }
#application_form .wpcf7-form-control-wrap { float: right; position: relative; }
#application_form .wpcf7-form-control-wrap select { width: 260px; height: 32px; font-size: 14px; font-size: 1.4rem; line-height: 20px; color: #252525; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; background: #F6F5F5; border: none; border-radius: 3px; border: 6px solid #F6F5F5; outline: none; margin-bottom: 0.6em; }
#application_form .wpcf7-form-control-wrap input[type='text'],
#application_form .wpcf7-form-control-wrap input[type='url'],
#application_form .wpcf7-form-control-wrap input[type='email'],
#application_form .wpcf7-form-control-wrap input[type='tel'] { font-size: 14px; font-size: 1.4rem; width: 260px; height: 32px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; background: #F6F5F5; border: none; border-radius: 3px; color: #252525; border: 6px solid #F6F5F5; }
#application_form .wpcf7-form-control-wrap textarea { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; font-size: 14px; font-size: 1.4rem; width: 260px; height: 100px; background: #F6F5F5; border: none; border-radius: 3px; color: #252525; border: 6px solid #F6F5F5; margin-right: 16px; resize: none; line-height: 1; }
#application_form .wpcf7-form-control-wrap textarea:focus { border: 6px solid white; background: white; height: 160px; }
#application_form .form_submit { position: relative; margin-bottom: 6em; }
#application_form .form_submit p { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; font-size: 12px; font-size: 1.2rem; color: #7e7e7e; line-height: 1.2; width: 320px; margin-bottom: 1.5em; clear: both; position: relative; height: auto; overflow: hidden; }
#application_form .form_submit input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 14px; font-size: 1.4rem; text-transform: uppercase; margin-left: auto; margin-right: auto; border: 2px solid white; color: white; text-decoration: none; padding: 0.4em 4em; background: none; float: left; cursor: pointer; }
#application_form .form_submit img.ajax-loader { height: 32px; width: auto; float: left; margin: 5px; }
#application_form .wpcf7-not-valid-tip { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; color: #e02e2b; font-size: 12px; font-size: 1.2rem; margin-top: 0.6em; cursor: pointer; }
div.wpcf7-response-output { margin: 0; padding: 0 24px; height: 32px; line-height: 32px; font-size: 12px; font-size: 1.2rem; position: fixed; z-index: 1; left: 0; bottom: 0; width: 100%; text-align: center; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
div.wpcf7-validation-errors,
div.wpcf7-spam-blocked,
div.wpcf7-mail-sent-ng { border: none !important; background: #FF8B49; color: white; }
div.wpcf7-mail-sent-ok { border: none !important; background: #a2dada; color: #414047; }
#application_form .wpcf7-form-control-wrap input[type='text'].wpcf7-not-valid,
#application_form .wpcf7-form-control-wrap input[type='url'].wpcf7-not-valid,
#application_form .wpcf7-form-control-wrap input[type='email'].wpcf7-not-valid,
#application_form .wpcf7-form-control-wrap input[type='tel'].wpcf7-not-valid { border: 6px solid #ffffff; }
/*/////////////////////////////////////////////////////////////////////////// 

3.0  P A G E - P O R T F O L I O

///////////////////////////////////////////////////////////////////////////*/
#portfolio_header { height: 100%; width: 100%; overflow: hidden; position: relative; z-index: 0; }
#portfolio_header .container { height: 100%; width: 100%; background-size: cover; background-position: center center; display: table; position: relative; }
#portfolio_header .container .title { display: table-cell; vertical-align: middle; color: #e02e2b; z-index: 9; position: relative; }
#portfolio_header .container h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; }
#portfolio_header .next_section { color: #252525; font-size: 14px; font-size: 1.4rem; line-height: 14px; position: absolute; z-index: 9; bottom: 0; left: 0; letter-spacing: 0.004em; cursor: pointer; text-decoration: none; display: block; color: white; }
#portfolio_header .next_section i { margin-right: 14px; }
#portfolio_header .film_overlay { z-index: 8; }
#portfolio_header .photo_container { height: 100%; width: 100%; position: absolute; top: 0; left: 0;/*opacity: 0.5;*/
}
#works_overview { background: #262625; }
/* Works list */

#works_list .background { background: #F6F5F5; height: 180px; width: 100%; position: absolute; z-index: 0; top: 0; }
#works_list { height: auto; width: 100%; overflow: visible; background: #262625; position: relative; text-align: center; margin-bottom: 4em; }
#works_list .nav_warpper { /* is the shadow of nav */ position: relative; width: 100%; }
#works_list h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; font-size: 24px; font-size: 2.4rem; color: #252525; text-transform: uppercase;/*margin-bottom: 0.6em;*/
}
#works_list h3 span { display: none; }
#works_list h3 span.is-checked { display: inline-block; }
#works_list.simple_category h3 span.is-checked { margin-right: 0.35em; }
#works_list button { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; border: none; background: none; font-size: 16px; font-size: 1.6rem; cursor: pointer; padding: 0; margin: 0; }
#works_buttons_year { background: #F6F5F5; position: relative; z-index: 3; width: 100%; }
#works_buttons_year .js-radio-button-group { margin-bottom: 0; }
#works_buttons_year button { /* Responsive: 1280px 960px */ display: inline-table; height: 54px; line-height: 54px; padding: 0 24px; }
#works_buttons_year button span { /* display all buttons as point */ color: #7e7e7e; display: block; overflow: hidden; background: none; }
#works_buttons_year button:hover { color: #e02e2b; }
#works_buttons_year button:hover span { color: #e02e2b; }
#works_buttons_year button.is-checked span { color: #e02e2b; }
.button-group button.next_year,
.button-group button.after_next_year { pointer-events: none; }
#works_buttons_category { background: #F6F5F5; position: absolute; bottom: 0; z-index: 3; width: 100%; text-align: center; overflow: visible; }
#works_buttons_category .js-radio-button-group { margin-left: auto; margin-right: auto; margin-top: 0.4em;/*margin-bottom: 3.4em;*/
}
#works_buttons_category button { color: #252525; text-align: left; padding: 24px; text-transform: uppercase; font-size: 14px; font-size: 1.4rem; }
#works_buttons_category button:hover,
#works_buttons_category button.is-checked { color: #7e7e7e; }
#works_selector_control { /* See Width:960px */ display: none; }
/* Slim Nav */
#works_buttons_year.slim .js-radio-button-group { margin-top: 4em; margin-bottom: -0.8em; }
#works_list.simple_category #works_buttons_year.slim .js-radio-button-group { margin-bottom: 2.5em; }
#works_buttons_year.slim h3 { font-size: 18px; font-size: 1.8rem; margin-bottom: 1em; }
/* Isotope */
#the_list { position: relative; overflow: hidden; padding-bottom: 77px; }
#list_bottom { /* for fixed the nav */ position: absolute; z-index: -2; bottom: 0; }
.grid { background: #262625; min-height: 240px; }
/* clear fix */
.grid:after { content: ''; display: block; clear: both; }
/* grid-item */
.grid-item { width: 25%; height: 180px; margin: 0; float: left; background-image: url(../images/loader.gif); background-repeat: no-repeat; background-position: center center; background-color: black; background-size: 8%; overflow: hidden; position: relative !important; left: 0 !important; top: 0 !important; }
.grid-item a { display: table; width: 100%; height: 100%; color: white; text-decoration: none; background-size: cover; background-position: center center; }
.grid-item .title { text-shadow: 0px 0px 1px rgba(38,38,37,0.4); display: table-cell; vertical-align: middle; position: relative; z-index: 2; opacity: 0; text-align: center; }
.grid-item h2 { font-size: 18px; font-size: 1.8rem; font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; line-height: 1; }
.grid-item h2 span { display: block; width: 75%; margin: auto; }
.grid-item h4 { font-size: 14px; font-size: 1.4rem; font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; line-height: 1; margin-bottom: 6px; }
.grid-item .film_overlay { z-index: 1; }
.grid-item:hover .film_overlay { opacity: 0.2; }
.grid-item:hover .title { opacity: 1; margin-bottom: 0; }
/* 3.1  S I N G L E : F I L M S //////////////////////////// */

.video-playing #header { /*opacity: 0;*/
}
.single-works.h120 #header { background-color: white; }
.single-works.h120 .menu_icon div { background: #252525; }
.single-works #menu_control_wrapper .secondary { /* Back button active */
z-index: 3; }
.single-works .menu_icon div { background: white; box-shadow: 0px 0px 1px rgba(38,38,37,0.4); }
/* Player */
.video-playing .html5_player { min-width: inherit; max-width: 100%; /* Global setting is min-width:100% */ max-height: 100%; /* Global setting is min-height:100% */ }
.touch .control,/* Mobile friendly */
.video-playing .control { opacity: 0; }
.re-touch .control,/* Mobile friendly */
.video-playing .control:hover { opacity: 1; }
#the_works { position: relative; height: 100%; width: 100%; }
#the_works .title { position: absolute; bottom: 40px; z-index: 3; color: #e02e2b; letter-spacing: 0; opacity: 1; pointer-events: none; max-width: 540px; }
.video-playing #the_works .title { opacity: 0; }
#the_works .title a { color: #e02e2b; text-decoration: none; pointer-events: all;/*text-shadow: 0px 0px 1px rgba(38,38,37,0.4);*/
}
#the_works .title .scroll { text-shadow: 0px 0px 1px rgba(38,38,37,0.4); }
#the_works h4 { font-size: 14px; font-size: 1.4rem; margin-bottom: 0.8em; font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; }
#the_works h2,
#the_works h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; font-size: 30px; font-size: 3rem; line-height: 1; }
#the_works .next_section,
#the_works .scroll { color: #252525; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.004em; cursor: pointer; text-decoration: none; margin-top: 2em; display: block; color: white !important; }
#the_works .next_section i,
#the_works .scroll i { margin-right: 14px; }
#the_works .scroll i.icon-chevron-up,
#the_works .scroll.active i.icon-chevron-down { display: none; }
#the_works .scroll i.icon-chevron-down,
#the_works .scroll.active i.icon-chevron-up { display: inline-block; }
#the_works .background { display: none; }
#works_info { background: #262625; font-size: 14px; font-size: 1.4rem; letter-spacing: 0; line-height: 1.4; color: #7e7e7e; text-align: center; pointer-events: none; position: relative; z-index: 2; }
.video-playing #works_info { background: none; }
#works_info .container { background: #262625; pointer-events: all; height: auto; overflow: hidden; }
#works_info .share_button { color: white; cursor: pointer; }
#works_info .share_button i { margin-left: 8px; }
#works_info li { display: inline-table; }
#works_info li.works_meta { text-align: left; float: left; }
#works_info li.works_background { width: 60%; margin: auto; color: #F6F5F5; }
#works_info li.works_background a { color: white; }
#works_info li.share_button { text-align: right; float: right; }
/* 3.2  S I N G L E : P R I N T //////////////////////////// */

.single-works-print #site_logo,
.single-works-print .client_name,
.single-works-print .post_title,
.single-works-print .post_category { display: none; }
.single-works-print .swiper-slide { width: 100%; /* auto revise_testing revised:2016-01-14 */ display: block; /* block revise_testing revised:2016-01-14 */ height: 100%; background-size: contain; background-repeat: no-repeat; }
.single-works-print .swiper-pagination-bullet-active { background: white !important; }
.single-works-print .swiper-pagination-bullet { background: white !important; opacity: 1 !important; margin: 0 5px; box-shadow: 0px 0px 1px rgba(38,38,37,0.4); }
.single-works-print .swiper-pagination-bullet:first-child { margin-left: 0; }
.single-works-print .swiper-slide .img_container { /* evised:2016-01-14 */ display: table-cell; vertical-align: middle; }
.single-works-print .swiper-slide img { max-height: 100%; }
.single-works-print .swiper-slide .img_container img { /*max-height: 100%; revise_testing revised:2016-01-14 */
max-width: 100%; height: auto; min-height: inherit; }
.single-works-print .swiper-pagination { text-align: right; position: absolute; z-index: 3; bottom: 0; width: auto; right: 48px; }
.single-works-print .display_elements { position: absolute; z-index: 3; bottom: 0; right: 0; cursor: pointer; text-shadow: 0px 0px 1px rgba(38,38,37,0.4); display: table; pointer-events: none; }
.ready .display_elements { pointer-events: all; }
.display_elements .icon-eye-open { display: none; }
.ready .display_elements .icon-eye-open { display: inline-block; }
.single-works-print .loading { height: 26px; width: 26px; display: table-cell; vertical-align: middle; }
.ready .loading { display: none; }
.display_elements .icon-eye-close { display: none; opacity: 0.4; }
.hide-elements #works_info { background: none; }
/* Share Buttons */
#share_buttons { position: fixed; top: -240px; left: 0; z-index: 80; width: 100%; height: 0; overflow: hidden; text-align: center; background: rgba(0,0,0,0.5); /*display: table;*/
cursor: pointer; }
.share-active #share_buttons { top: 0; height: 100%; }
#share_buttons ul { /*display: table-cell;
vertical-align: middle;*/
position: absolute; top: 50%; left: 0; right: 0; margin-top: -48px; }
#share_buttons li { display: inline-block; border-radius: 50%; overflow: hidden; border: 3px solid white; margin: 8px; }
#share_buttons li a { height: 60px; width: 60px; display: block; overflow: hidden; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); }
.share-active #share_buttons li a { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
#share_to_weibo { background-image: url(../images/icon_weibo.svg); background-size: 85%; background-position: center center; background-repeat: no-repeat; }
#share_to_qzone { background-image: url(../images/icon_qzone.svg); background-size: 85%; background-position: center center; background-repeat: no-repeat; }
#share_to_facebook { background-image: url(../images/icon_facebook.svg); background-size: 85%; background-position: center center; background-repeat: no-repeat; }
#share_to_twitter { background-image: url(../images/icon_twitter.svg); background-size: 85%; background-position: center center; background-repeat: no-repeat; }
/*/////////////////////////////////////////////////////////////////////////// 

4.1  S I N G L E : J O B   D E S C R I P T I O N

///////////////////////////////////////////////////////////////////////////*/

.single-job footer { position: fixed; bottom: 0; z-index: 30; }
#single_job_header { height: 100%; width: 30%; position: fixed; z-index: 0; left: 0; top: 0; overflow: hidden; }
#single_job_header .background { height: 100%; width: 100%; background-image: url(../images/studio_f.jpg); background-size: cover; background-position: right center; opacity: 0.6; }
#job_description { margin-left: 30%; width: 40%; float: left; }
#job_description h2 { color: #e02e2b; }
#job_description h5 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; font-size: 12px; font-size: 1.2rem; line-height: 1; color: white; background: #7e7e7e; border-radius: 24px; padding: 0.6em 2em; display: table; margin-top: 1em; margin-bottom: 3em; }
#job_description .content { margin-bottom: 6em; }
#job_description .content p { font-size: 12px; font-size: 1.2rem; color: #7e7e7e; }
#job_description .content strong { color: white; }
#job_description .content a { color: white; }
#job_description .content a.send_email { font-size: 14px; font-size: 1.4rem; text-transform: uppercase; margin-left: auto; margin-right: auto; border: 2px solid white; color: white; text-decoration: none; padding: 0.6em 3em; }
#related_jobs { float: left; display: table; height: 100%; }
#related_jobs ul { display: table-cell; vertical-align: middle; }
#related_jobs h3 { margin-bottom: 2em; }
#related_jobs,
#related_jobs a { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; color: #7e7e7e; text-decoration: none; font-size: 14px; font-size: 1.4rem; text-transform: capitalize; }
#related_jobs a:hover { color: white; }
#related_jobs .current { color: white; list-style: disc inside; }
/*/////////////////////////////////////////////////////////////////////////// 

5.0  C A T E G O R Y : C L I E N T

///////////////////////////////////////////////////////////////////////////*/

.archive #menu_control { color: #252525; }
.archive .menu_icon div { background: #252525; }
#category_header { display: table; background: #F6F5F5; color: #252525; width: 100%; height: 50%; letter-spacing: 0.004em; overflow: hidden; position: relative; z-index: 0;/*2*/ }
#category_header .container { display: table-cell; vertical-align: bottom; position: relative; z-index: 2; }
#category_header h1 { font-size: 96px; font-size: 9.6rem; margin-bottom: 0.2em; margin-left: -3px; }
#category_header h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; margin-top: 2em; margin-bottom: 0.5em; }
#category_header .clients_button { position: absolute; right: 0; bottom: 0; cursor: pointer; font-size: 14px; font-size: 1.4rem; margin-bottom: 1.2em; text-decoration: none; color: #252525; }
.client-list-active #category_header .clients_button { color: #e02e2b; }
.category #client { height: 0; position: relative; z-index: 1; box-shadow: 0px 32px 144px black; }
.client-list-active.category #client { height: auto; }
#category_description { background-color: #7e7e7e; margin-top: -2px; }
#category_description p { font-size: 14px; font-size: 1.4rem; line-height: 1.3; max-width: 540px; }
/* Showreel list */
#showreel_list_wrapper { text-align: center; position: relative; margin-bottom: 6em; width: 100%; background: #262625; }
#showreel_list { margin: 0 auto; width: 100%; margin-bottom: 6em; }
.showreel_list_item { width: 33%;/*400px*/ height: auto; letter-spacing: 0; text-align: left; padding: 12px; display: inline-table; }
.showreel_list_item a { color: white; text-decoration: none; display: block; position: relative; height: 100%; width: 100%; }
.showreel_list_item .thumbnail { height: 240px; width: 100%; background-color: #0f0f0e; overflow: hidden; position: relative; background-size: cover; background-position: center center; }
.showreel_list_item .content { position: absolute; /*bottom: -200px;*/
bottom: 0; opacity: 0; background: #e02e2b; width: 100%; padding: 1.5em; }
.showreel_list_item:hover .content { /*bottom: 0;*/
opacity: 1; }
.showreel_list_item .content p { margin-bottom: 1.5em; font-size: 12px; font-size: 1.2rem; line-height: 1.4; }
.showreel_list_item .content p a { display: inline-block; width: auto; }
/* High System Resources Require */
/*.showreel_list_item:hover .thumbnail{
margin-top: -12px;
box-shadow: 0px 25px 24px 4px #0a0a09;
}*/

#showreel_list .film_overlay { height: 120%; width: 120%; opacity: 0; top: -10%; left: -10%; }
/*#showreel_list:hover .film_overlay{
opacity: 0.6;
}

#showreel_list:hover .meta{
opacity: 0.1;
}

#showreel_list:hover .showreel_list_item:hover .film_overlay{
opacity: 0;
}

#showreel_list:hover .showreel_list_item:hover .meta{
opacity: 1;
}*/



.showreel_list_item .meta { height: 96px; }
.showreel_list_item h2 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; font-size: 18px; font-size: 1.8rem; line-height: 1.2; margin-top: 24px; }
.showreel_list_item h3 { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.2; color: #e02e2b; margin-top: 16px; }
/* infinite load */
#page_nav,
#infscr-loading { position: absolute; bottom: 0 !important; /* width: 100%; */
left: 0; right: 0; clear: both; margin-bottom: -6em; }
#page_nav a,
#infscr-loading div { color: white; text-align: center; font-size: 12px; font-size: 1.2rem; text-decoration: none; /*pointer-events:none;*/

}
#infscr-loading img { height: 28px; width: auto; position: absolute; bottom: 0 }
/*/////////////////////////////////////////////////////////////////////////// 

6.0  P A G E - S E A R C H

///////////////////////////////////////////////////////////////////////////*/
.search footer { display: none; }
.search #search_wrapper { bottom: 0; /*setting in page.search.js */ }
.search-no-results #search_wrapper { display: block !important; opacity: 1 !important; }
.search-no-results #search_results { margin: 0; display: table; width: 100%; height: 100%; text-align: center; }
#no_results { display: table-cell; vertical-align: middle; color: #ffffff; font-size: 24px; font-size: 2.4rem; line-height: 1; }
#search_results { width: 100%; padding-bottom: 6em; overflow: hidden; /*position: absolute;*/
position: relative; top: 3.5em; min-height: 100%; }
/* Results Categories */
ul.results_category { float: left; width: 20%; padding-right: 24px; }
ul.results_category h3 { font-size: 18px; font-size: 1.8rem; margin-bottom: 1em; line-height: 1.2em; }
ul.results_category li { font-family: \5FAE\8F6F\96C5\9ED1, "museo_slab300", sans-serif; font-size: 14px; font-size: 1.4rem; color: #7e7e7e; }
ul.results_category li.is-checked { color: #e02e2b; }
/* Notice + Contact */
.notice_contact { float: right; text-align: right; width: 20%; padding-left: 24px; }
.notice_contact a { color: #F6F5F5; text-decoration: none; }
.notice_contact .notice { color: #7e7e7e; font-size: 12px; font-size: 1.2rem; margin-bottom: 1em; line-height: 1.2em; }
.notice_contact .tel,
.notice_contact .fax,
.notice_contact .email { font-size: 14px; font-size: 1.4rem; color: #F6F5F5; line-height: 1.4em; }
/* results_list */
#results_list { width: 60%; float: left; height: auto; overflow: hidden; }
#results_list .the_post { width: 100%; height: auto; overflow: hidden; margin-bottom: 4em; }
#results_list .the_post .columns:first-child { width: 30%; text-transform: uppercase; line-height: 1.2em; float: left; padding-right: 24px; }
#results_list .the_post .columns:nth-child(2) { width: 70%; float: left; height: auto; overflow: hidden; }
#results_list h4 { font-size: 14px; font-size: 1.4rem; line-height: 1.2em; }
#results_list h4 a { text-decoration: none; font-size: 14px !important; font-size: 1.4rem !important; }
#results_list h5 { color: #e02e2b; font-size: 14px; font-size: 1.4rem; }
#results_list p { font-size: 12px; font-size: 1.2rem; color: #7e7e7e; margin-bottom: 0.9em; line-height: 1.4em; }
#results_list .columns a,
#results_list p a { color: #E6E3E3; font-size: 12px; font-size: 1.2rem; }
#results_list #hsb_contact { display: none; }
#results_list .section_link { text-transform: uppercase; }
/* If is film works */
/* .columns:nth-child(2) */
.columns .thumbnail { height: 96px; width: 25%; overflow: hidden; float: left; }
.columns .thumbnail img { height: auto; width: 100%; }
.Films .columns .content { width: 75%; float: left; padding-left: 12px; }
/* If is print works */
.columns .thumbnail_stream { }
.columns .thumbnail_stream img { height: 96px; width: auto; display: inline-table; margin-right: 3px; }
/* Fixed up close icon of main menu */
.search.cross #menu_control_wrapper .secondary { /* Back button active */
z-index: 3; }
/*/////////////////////////////////////////////////////////////////////////// 

X.0  P A G E - N A M E

///////////////////////////////////////////////////////////////////////////*/









/*/////////////////////////////////////////////////////////////////////////// 

9.0  B R E A K P O I N T S

16x /	5120	5K
10x /	3200
9x  /	2880
8x  /	2560
7x  /	2240
6x  /	1920	Projection
5x  /	1600	Main Stylesheet Setting
4x  /	1280	Desktop
3x  /	960		Desktop
2.5x/	800		Special (iPad Air/2, Mini2/3, 2048 x 1536)
2x  /	640		Mobile
1.5x/	480
1x  /	320

Height: 960 (iPad Air/2, Mini2/3)
Height: 640
Height: 480
Landscape


///////////////////////////////////////////////////////////////////////////*/

/*
Engineering mode.
Delete it when testing done.
*/

#engineering_mode { position: fixed; z-index: 999; right: 0; margin-top: 12px; text-align: right; font-family: \5FAE\8F6F\96C5\9ED1, "moonlight", sans-serif; font-size: 10px; font-size: 1rem; color: #1cbbf0; pointer-events: none; opacity: 0.4; }
#engineering_mode li { display: none; }
#engineering_mode .title { font-family: \5FAE\8F6F\96C5\9ED1, "moonbold", sans-serif; display: block; }
#engineering_mode .title span { -webkit-animation: blinking 2s infinite linear; animation: blinking 2s infinite linear; }
@keyframes blinking {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes blinking {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#engineering_mode .testing_core { display: block; }
@-ms-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
/*zz*/
.container p { margin-bottom: 0px; }
#partner_overview .container { margin-bottom: 0px; }
.baidu_map { width: 100%; height: 100%; }
.baidu_map * { box-sizing: content-box; }
.BMap_Marker .BMapLabel { display: none !important; }
#works_list { margin-bottom: 0px; }
#job_description p { margin-bottom: 3em; }

/*/////////////////////////////////////////////////////////////////////////// 

8x 2 5 6 0  D E S K T O P

///////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 160em) {
#engineering_mode .testing_8x { display: block; }
html { font-size: 80%; }
/* H O M E */
.home .swiper-slide h1 { max-width: 960px; }
.home .swiper-slide p { max-width: 1440px; }
#slide_64 h1 { max-width: 1500px; }
#slide_64 p { max-width: 960px; }
/* A B O U T */
.overview .container { max-width: 1440px; }
#works_overview .section_button { height: 114px; }
#client_overview .title_wrapper { height: 144px; }
#client_overview h3 span { bottom: -48px; }
/* Portfolio */
/* grid-item */
.grid-item { width: 16.6%; }
}

/*/////////////////////////////////////////////////////////////////////////// 

6x 1 9 2 0  D E S K T O P / P R O J E C T I O N

///////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 120em) {
#engineering_mode .testing_6x { display: block; }
/* H O M E */
.quickcontact-active #quick_contact_wrapper { width: 520px !important; }
/* A B O U T */
#works_overview .section_button span { padding-top: 0.1em; }
/* Careers list //////////////////////////// */
.job_image { width: 218px; height: 218px; }
/* Category : client */
.showreel_list_item { width: 460px; }
.showreel_list_item .thumbnail { height: 280px; }
/* Portfolio */
/* grid-item */
.grid-item { width: 20%; height: 240px; }
}

/*/////////////////////////////////////////////////////////////////////////// 

4x 1 2 8 0  D E S K T O P

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 80em) {
#engineering_mode .testing_4x { display: block; }
/* Global padding and margin  */
.pagemargin { margin-left: 40px; margin-right: 40px; }
.pagepadding { padding-left: 40px; padding-right: 40px; }
.pagemargin_h { margin-left: 20px; margin-right: 20px; }
.pagepadding_h { padding-left: 20px; padding-right: 20px; }
.pagemargin_4s { margin: 40px; }
.pagepadding_4s { padding: 40px; }
.pagemargin_4s_h { margin: 20px; }
.pagepadding_4s_h { padding: 20px; }
/* headroom */
.single-works.headroom-unpinned #header,
.partner-apply.headroom-unpinned #header,
.headroom-unpinned #header { top: -128px; }
.cross #header { top: 0; }
/* Search Form */
#search_wrapper { height: 130px; }
/* H O M E */
.home .swiper-slide h1 { font-size: 120px; font-size: 12rem; }
.home .swiper-slide p { font-size: 14px; font-size: 1.4rem; line-height: 1.3; max-width: 720px; }
#slide_64 h1 { max-width: 820px; }
/* A B O U T */
/* Recruitment Partner //////////////////////////// */

#partner_overview .seeking_content { width: 40%; }
#partner_overview .seeking_content p:first-child,
#partner_overview .seeking_content p:nth-child(2),
#partner_overview .seeking_content p { float: none; margin-right: 0; width: 100%; }
#partner_overview .seeking_list { width: 18%; }
#partner_overview .seeking_list p { width: 100%; }
#partner_overview .seeking_list p:nth-child(2) { margin-bottom: 0; }
#partner_overview .seeking_list p:nth-child(3) { float: none; }
/* Contact //////////////////////////// */
#business_card ul:nth-child(2) { }
#business_card h3 { font-size: 36px; font-size: 3.6rem; max-width: 380px; }
/* Category : client */
.showreel_list_item { width: 33%;/*312px*/ }
.showreel_list_item .thumbnail { height: 180px; }
/* Portfolio */
#works_buttons_year button { height: 28px; line-height: 28px; }
#works_buttons_year button span { margin-top: -3px; }
#works_buttons_year button:first-child,
#works_buttons_year button:last-child,
#works_buttons_year button:nth-child(3n-5) { height: 24px; line-height: 24px; }
/* nav */
.headroom-unpinned #works_buttons_year.slim { top: -48px !important; }
.headroom-unpinned #works_buttons_category .js-radio-button-group { margin-top: 0; margin-bottom: 2em; }
#works_buttons_category button { padding: 24px 12px; }
/* Search */
#results_list .the_post .columns:first-child { width: 100%; float: none; margin-bottom: 1em; }
#results_list .the_post .columns:nth-child(2) { width: 100%; float: none; }
#results_list { width: 45% }
ul.results_category { width: 25% }
.notice_contact { width: 30%; }
}

/*/////////////////////////////////////////////////////////////////////////// 

3x 9 6 0

///////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 60em) {
html { /*font-size: 50%;*/
}
p { font-size: 14px; font-size: 1.4rem; }
#engineering_mode .testing_3x { display: block; }
/* mouse icon */
#icon_mouse { display: none; }
/* H O M E */
.home .swiper-slide h1 { font-size: 96px; font-size: 9.6rem; max-width: 640px; }
.home .swiper-slide p { font-size: 14px; font-size: 1.4rem; max-width: 640px; }
#slide_64 h1 { max-width: 660px; }
/* A B O U T */
.overview .container { max-width: 720px; }
#latest_works { height: auto; }
#latest_works .container:first-child { height: 480px; text-align: center; }
#latest_works .container:first-child .post_wrapper h2 { font-size: 40px; font-size: 4rem; margin-left: auto; margin-right: auto; }
#latest_works .container { height: 270px; width: 100%; float: none; }
#latest_works .post_wrapper { height: 115%; }
#latest_works .works_background { text-align: center; width: 100%; left: 0; }
#latest_works .works_background p { width: 75%; margin-left: auto; margin-right: auto; }
#works_overview .section_button span { }
/* Careers list //////////////////////////// */
.job_image { width: 128px; height: 128px; }
#careers .swiper-slide a:hover { margin-bottom: 0; /* offset the .job_image bottom space while mouse over */ }
#careers .swiper-slide a:hover .job_image { margin-top: 0; box-shadow: none; }
/* Recruitment Partner //////////////////////////// */
#partner_overview h3 { float: none; }
#partner_overview .seeking_content { float: none; display: inline-table; vertical-align: top; width: 50% }
#partner_overview .seeking_list { float: none; display: inline-table; width: 30%; }
#partner_overview .seeking_list p:nth-child(2) { width: 45%; margin-right: 15px; }
#partner_overview .seeking_list p:nth-child(3) { float: left; width: 45%; }
/* Contact //////////////////////////// */
#business_card ul { float: none; }
/* Single : Job */
#single_job_header { -webkit-transform: matrix(0, 0, 0, 0, 0, 0); -moz-transform: matrix(0, 0, 0, 0, 0, 0); -ms-transform: matrix(0, 0, 0, 0, 0, 0); -o-transform: matrix(0, 0, 0, 0, 0, 0); transform: matrix(0, 0, 0, 0, 0, 0); -webkit-transform: skewY(-1.9deg); -moz-transform: skewY(-1.9deg); -ms-transform: skewY(-1.9deg); -o-transform: skewY(-1.9deg); transform: skewY(-1.9deg); overflow: hidden; width: 100%; height: 50%; position: relative; }
#single_job_header .background { -webkit-transform: matrix(0, 0, 0, 0, 0, 0); -moz-transform: matrix(0, 0, 0, 0, 0, 0); -ms-transform: matrix(0, 0, 0, 0, 0, 0); -o-transform: matrix(0, 0, 0, 0, 0, 0); transform: matrix(0, 0, 0, 0, 0, 0); -webkit-transform: skewY(1.9deg); -moz-transform: skewY(1.9deg); -ms-transform: skewY(1.9deg); -o-transform: skewY(1.9deg); transform: skewY(1.9deg); }
#job_description { margin-left: 0; width: 60%; }
#job_description container { padding-right: 0; }
.single-job footer { position: relative; }
/* Category : client */
#showreel_list { width: 100% !important; }
.showreel_list_item { width: 100%; height: auto; padding: 0; clear: both; }
.showreel_list_item .thumbnail { height: 320px; }
.showreel_list_item:hover .thumbnail { margin-top: 0; box-shadow: none; }
#showreel_list .film_overlay { opacity: 0 !important; }
/* Portfolio */
/* nav */
#works_buttons_year .js-radio-button-group,
#works_buttons_category .js-radio-button-group { display: none; }
#works_list.simple_category #works_buttons_category .js-radio-button-group { display: block; }
.headroom-unpinned #works_buttons_year.slim { top: 0 !important; }
.headroom-pinned #works_buttons_year.slim h3 { margin-top: 2.8em; }
/*
New Selector UI / New Look
Main Style Start Here.
*/
#works_selector_control { margin-top: 2.4em; margin-bottom: 2.4em; color: #7e7e7e; font-size: 14px; font-size: 1.4rem; display: inline-block; width: 100%; }
.headroom-unpinned #works_selector_control { margin-top: 1.4em; margin-bottom: 1.4em; }
#works_selector_control .container { display: block; width: 100%; }
#works_list.simple_category #works_selector_control { display: none; }
#works_selector_control span { display: none; cursor: pointer; margin-left: 6px; }
#works_selector_control span.is-checked { display: inline-block; }
#works_selector_control .selectors { position: absolute; /*top:-358px; use js */
width: 100%; /*height: 360px;*/
background: #e02e2b; box-shadow: 0px 12px 24px #FF8B49; display: none; }
#works_selector_control .selectors span { display: block; background: #e02e2b; height: 72px; width: 72px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; z-index: 1; left: 50%; margin-left: -36px; bottom: 0; border-radius: 2px; }
#works_selector_control ul { position: relative; z-index: 9; height: 100%; width: 100%; overflow: hidden; }
#works_selector_control li { text-align: left; }
#works_selector_control li button { /* display: list-item; */
width: 50%; float: left; padding: 6px 0; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
#works_selector_control li h4 { color: white; text-transform: uppercase; font-size: 16px; font-size: 1.6rem; line-height: 4em; }
#works_buttons_category li button:hover { color: white; }
#works_selector_control li button.is-checked { color: white; list-style: disc inside; pointer-events: none; }
/* grid-item */
.grid-item { width: 33.3%; }
/* Search */
#results_list { width: 100%; clear: both; }
ul.results_category { width: 100%; clear: both; margin-top: 1em; margin-bottom: 2em; }
.notice_contact { width: 100%; clear: both; text-align: left; padding-left: 0; padding-bottom: 6em; }
.notice_contact .notice { max-width: 340px; }
}

/*/////////////////////////////////////////////////////////////////////////// 

2.5x 8 0 0  S P E C I A L 

Actually is 768
On iPad Air/2, Mini2/3
2048 x 1536 / 2 pixel ratio

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 48em) {
#engineering_mode .testing_2_5x { display: block; }
/* H O M E */
.home .swiper-slide h1 { font-size: 72px; font-size: 8rem; max-width: 480px; }
.home .swiper-slide p { max-width: 480px; }
#slide_64 h1 { max-width: 660px; }
#slide_64 p { max-width: 460px; }
/* A B O U T */
/* Careers list //////////////////////////// */
#latest_works .container:first-child .post_wrapper h2 { font-size: 36px; font-size: 3.6rem; }
.job_image { width: 96px; height: 96px; }
#careers h4 { font-size: 14px; font-size: 1.4rem; }
/* Single : Job */
#job_description { width: 100%; }
#job_description .content { margin-bottom: 0; }
#related_jobs { display: block; height: auto; margin-bottom: 6em; }
/* Single: Works */
#works_info li { display: block; margin-bottom: 1em; }
#works_info li.works_meta { float: none; }
#works_info li.works_background { float: none; text-align: left; margin: 0; width: 100%; }
#works_info li.share_button { float: none; text-align: left; }
/* Portfolio */
/* grid-item */
.grid-item { width: 50%; }
}

/*/////////////////////////////////////////////////////////////////////////// 

2x 6 4 0

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 40em) {
#engineering_mode .testing_2x { display: block; }
html { font-size: 50%; }
.pagemargin { margin-left: 30px; margin-right: 30px; }
.pagepadding { padding-left: 30px; padding-right: 30px; }
.pagemargin_h { margin-left: 15px; margin-right: 15px; }
.pagepadding_h { padding-left: 15px; padding-right: 15px; }
.pagemargin_4s { margin: 30px; }
.pagepadding_4s { padding: 30px; }
.pagemargin_4s_h { margin: 15px; }
.pagepadding_4s_h { padding: 15px; }
#nav_wrapper .vertical_tilting { width: 75%; }
/* Search Form */
#search_wrapper { height: 130px; }
.headroom-unpinned #search_wrapper { height: 88px; }
.headroom-unpinned .search-form { margin-top: 10px; margin-bottom: 10px; }
/* H O M E */	
.home .swiper-slide p { max-width: 320px !important; }
#slide_64 h1 { max-width: 390px; }
#slide_64 p { max-width: 320px; }
#quick_contact_wrapper .vertical_tilting { width: 60%; }
/* A B O U T */
/* Recruitment Partner //////////////////////////// */
#partner_overview .container { text-align: center; }
#partner_overview h3 { margin-left: auto; margin-right: auto; }
#partner_overview .seeking_content { width: 100%; margin-bottom: 24px; }
#partner_overview .seeking_list { width: 50%; }
#partner_overview .section_button { position: relative; margin-left: auto; margin-right: auto; font-size: 18px; font-size: 1.8rem; }
/* Contact //////////////////////////// */
#contact .map { margin-top: -3em; }
#business_card ul:nth-child(2) { margin-right: 20px; }
#business_card ul:nth-child(3) { margin-bottom: 20px; }
#business_card h3 { font-size: 24px; font-size: 2.4rem; float: none; text-align: left; max-width: 100%; }
/* Applicaiton form //////////////////////////// */
#application_form li { float: none; margin-right: 0; }
#application_form .form_item { width: 100%; }
#application_form .form_name { line-height: 17px; }
#application_form .wpcf7-form-control-wrap { margin-top: 0.6em; float: none; display: block; }
#application_form .follow_text { float: none; width: 100%; margin-right: 0; }
#application_form .wpcf7-form-control-wrap select { width: 100%; }
#application_form .wpcf7-form-control-wrap input[type='text'],
#application_form .wpcf7-form-control-wrap input[type='url'],
#application_form .wpcf7-form-control-wrap input[type='email'],
#application_form .wpcf7-form-control-wrap input[type='tel'] { width: 100%; }
#application_form .wpcf7-form-control-wrap textarea { width: 100%; margin-right: 0; }
#application_form .form_submit p { width: 100%; }
#application_form .form_submit input[type='submit'] { width: 100%; padding: 1em 4em; font-size: 18px; font-size: 1.8rem; }
#application_form .form_submit img.ajax-loader { height: 24px; position: absolute; top: 50%; margin-top: -12px; margin-left: 14px; }
/* Single: Works //////////////////////////// */
.single-works-films #the_works .title { bottom: 15%;/*30%*/ }
.single-works-print #the_works .title { bottom: 10%; }
.single-works-print .swiper-pagination { left: 0; text-align: left; }
.video-paused #the_works .background { display: block; height: 100%; width: 100%; position: absolute; z-index: 2; top: 0; left: 0; background-size: cover; background-position: center center; }
/* Html5 Video Element UI New Look */
.control { left: 0; overflow: hidden; text-align: center; }
.video-playing .control { opacity: 1; }
.control .progressBar { width: 100%; display: none; }
.control .progressTime { width: 100%; margin: 0.4em 0; }
.control .buttons { margin-left: auto; margin-right: auto; }
.control .btnPlay,
.control .muted,
.control .fullscreen { width: 48px; height: 48px; line-height: 48px; text-align: center; border: 1px solid white; border-radius: 36px; margin: 6px; }
.control i { font-size: 14px; font-size: 1.4rem; }
/* Player New Look on iPhone */
.control .btnPlay { border: 1px solid #eb5a0c; background: #e02e2b; color: white; }
.control .muted,
.control .fullscreen { display: none; }
.control .progressTime { width: auto; height: 48px; line-height: 48px; text-align: center; border: 1px solid white; border-radius: 36px; margin: 6px; padding: 0 4em; }
.touch #the_works .title { bottom: 0; z-index: 4; }
/* Share Button */
#share_buttons li { margin: 4px; }
#share_buttons li a { width: 48px; height: 48px; }
/* Category : client */
#category_header h1 { margin-bottom: 0.5em; }
#category_header .clients_button { left: 0; margin-bottom: 0; }
.showreel_list_item .thumbnail { height: 160px; }
/* Page: Portfolio */
#portfolio_header h1 { font-size: 72px; font-size: 7.5rem; }
}

/*/////////////////////////////////////////////////////////////////////////// 

1.5x 4 8 0

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 30em) {
#engineering_mode .testing_1_5x { display: block; }
#site_logo,
.h120 #site_logo { width: 150px; height: 25px; }
#switch_language { float: right; }
#footer_contact { display: none; }
#background_music { margin-right: 12px; }
/* Swiper Custom: New Layout */
.swiper-button-prev { top: 13% !important; width: 100% !important; height: 12px !important; margin: 0 !important; padding: 0; pointer-events: none; }
.swiper-button-next { top: auto !important; bottom: 13% !important; width: 100% !important; height: 12px !important; margin: 0 !important; padding: 0; pointer-events: none; }
/* A B O U T */
.page h1 { font-size: 88px; font-size: 8.8rem; }
.overview { text-align: left; }
#latest_works .container:first-child .post_wrapper h2 { margin-bottom: 12px; }
#latest_works .post_wrapper h2 { margin-bottom: 36px; }
/* Recruitment Partner //////////////////////////// */
#partner_overview .seeking_content { text-align: left; }
#partner_overview .seeking_list { text-align: left; width: 100%; }
/* Contact //////////////////////////// */
#contact .map { margin-top: -2.2em !important; }
/* Portfolio */
/* grid-item */
.grid-item { width: 100%; }
.grid-item .title { opacity: 1; }
}

/*/////////////////////////////////////////////////////////////////////////// 

1.25x 4 0 0

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 25em) {
#engineering_mode .testing_1_25x { display: block; }
/* H O M E */
/*#slide_64 h1{
max-width: 320px;
font-size: 80px;
font-size: 8.8rem;
}*/

.home .swiper-slide p { max-width: 240px !important; font-size: 12px !important; font-size: 1.2rem !important; }
}

/*/////////////////////////////////////////////////////////////////////////// 

1x 3 2 0

iPhone 5S, 5, 4S, 4

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 20em) {
#engineering_mode .testing_1x { display: block; }
/* Search Form */
#search_wrapper { height: 96px; }
.headroom-unpinned #search_wrapper { height: 72px; }
.headroom-unpinned .search-form { margin-top: 4px; margin-bottom: 4px; }
/* H O M E */
.home .swiper-slide h1 { margin-bottom: 16px; font-size: 72px !important; font-size: 7.2rem !important; }
#slide_61 h1 { max-width: 280px; font-size: 72px; font-size: 7.2rem; }
#slide_64 h1 { font-size: 64px !important; font-size: 6.4rem !important; max-width: 260px; }
/* P A R T R N E R */

#application_header h1,
#category_header h1 { font-size: 68px !important; font-size: 6.8rem !important; }
/* Portfolio */
/* New Selector */
#works_buttons_category #works_selector_control { margin-top: 1.6em; margin-bottom: 1.6em; }
.headroom-unpinned #works_buttons_category #works_selector_control { margin-top: 1em; margin-bottom: 1em; }
#works_selector_control .selectors span { height: 48px; width: 48px; margin-left: -24px; }
}

/*/////////////////////////////////////////////////////////////////////////// 

H E I G H T  9 6 0

Actually is 906px height
On iPad Air2/3, Mini2/3

///////////////////////////////////////////////////////////////////////////*/

@media screen and (min-height: 56.5625em) {
#engineering_mode .testing_h960 { display: block; }
.pagemargin { margin-left: 40px; margin-right: 40px; }
.pagepadding { padding-left: 40px; padding-right: 40px; }
.pagemargin_h { margin-left: 20px; margin-right: 20px; }
.pagepadding_h { padding-left: 20px; padding-right: 20px; }
.pagemargin_4s { margin: 40px; }
.pagepadding_4s { padding: 20px 40px; }
.pagemargin_4s_h { margin: 20px; }
.pagepadding_4s_h { padding: 20px; }
}

/*/////////////////////////////////////////////////////////////////////////// 

H E I G H T  6 4 0 

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-height: 40em) {
#engineering_mode .testing_h640 { display: block; }
.pagemargin { margin-left: 20px; margin-right: 20px; }
.pagepadding { padding-left: 20px; padding-right: 20px; }
.pagemargin_h { margin-left: 10px; margin-right: 10px; }
.pagepadding_h { padding-left: 10px; padding-right: 10px; }
.pagemargin_4s { margin: 20px; }
.pagepadding_4s { padding: 20px; }
.pagemargin_4s_h { margin: 10px; }
.pagepadding_4s_h { padding: 10px; }
#nav_wrapper ul { /* #nav_wrapper .menu-custom-menu-item-container ul */ margin-top: -180px; }
#nav_wrapper a { height: 50px; line-height: 50px; }
#admin_login { display: none; }
/* Search Form */		
#search_wrapper { height: 96px; }
/* mouse icon */
#icon_mouse { margin-top: -12px; }
/* H O M E */
.home .swiper-slide h1 { font-size: 96px; font-size: 9.6rem; max-width: 640px; }
.home .swiper-slide p { font-size: 14px; font-size: 1.4rem; max-width: 480px;/*480px 720px*/ }
/* P A R T R N E R */

#application_header h1,
#category_header h1 { font-size: 72px; font-size: 7.2rem; }
}

/*/////////////////////////////////////////////////////////////////////////// 

H E I G H T  4 8 0 

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-height: 30em) {
#engineering_mode .testing_h480 { display: block; }
#nav_wrapper ul { /* #nav_wrapper .menu-custom-menu-item-container ul */ margin-top: -120px; }
#nav_wrapper a { height: 30px; line-height: 30px; }
/* H O M E */
.home .swiper-slide h1 { font-size: 72px; font-size: 7.2rem; max-width: 320px; }
.home .swiper-slide p { display: none; }
/* Quick Contact Card */
#quick_contact_wrapper ul { font-size: 10px; font-size: 1.0rem; }
#quick_contact_wrapper .address,
#quick_contact_wrapper .tel,
#quick_contact_wrapper .fax { display: none; }
#quick_contact_wrapper .contact_person { margin-top: 7%; }
/* Contact //////////////////////////// */
#contact .map { margin-top: -0.8em;/*-1.3*/ }
}

/*/////////////////////////////////////////////////////////////////////////// 

H E I G H T  3 2 0 

///////////////////////////////////////////////////////////////////////////*/

@media screen and (max-height: 20em) {
#engineering_mode .testing_h320 { display: block; }
/* mouse icon */
#icon_mouse { display: none; }
/* H O M E */
.home .swiper-slide h1 { font-size: 48px; font-size: 4.8rem; }
#slide_64 h1 { max-width: 480px; }
/* Quick Contact Card */
#quick_contact_wrapper .contact_person,
#quick_contact_wrapper .job_title { display: none; }
#quick_contact_wrapper .mobile { margin-top: 7%; }
/* Single: Works */
#the_works .title { display: none; }
/* Portfolio */
#works_buttons_year { position: relative !important; }
#works_buttons_category { position: absolute !important; }
}

@media screen and (max-width: 40em) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
#engineering_mode .testing_landscape { display: block; }
#site_logo,
.h120 #site_logo { width: 180px; height: 18px; }
#nav_wrapper ul { /* #nav_wrapper .menu-custom-menu-item-container ul */ margin-top: -80px; }
#nav_wrapper a { height: 20px; line-height: 20px; }
/* H O M E */
.home .swiper-slide h1 { font-size: 72px; font-size: 7.2rem; }
.home .swiper-slide p { }
}

/*/////////////////////////////////////////////////////////////////////////// 

X.0 P R I N T   S E T T I N G ( B & W )

///////////////////////////////////////////////////////////////////////////*/



@media print {
body { background: none !important; font-size: 11.25pt; color: black !important; }
}
.qtrans_flag span { display: none; }
.qtrans_flag { height: 12px; width: 18px; display: block; }
.qtrans_flag_and_text { padding-left: 20px; }
.qtrans_flag_en { background: url(../images/gb.png) no-repeat; }
.qtrans_flag_zh { background: url(../images/cn.png) no-repeat; }
.news_t { margin-bottom: 20px; }
.news_t .h3 { font-size: 88px; font-family: Impact, 'passionbold', sans-serif; line-height: 1; color: #e02e2b; }
.news_t .em { font-size: 24px; }
.news { width: 1200px; margin: 0 auto; padding: 60px 0; }
.news_list ul { margin-right: -20px; }
.news_list li { float: left; width: 33.333333%; margin-bottom: 20px; }
.news_list a { color: #fff; text-decoration: none }
.news_list .pd { display: block; margin-right: 20px; }
.news_list .img { }
.news_list .img img { width: 100%; height: auto; display: block; }
.news_list .text { background: #333; padding: 15px; }
.news_list .h3 { font-size: 16px; height: 20px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-bottom: 10px; }
.news_list .p { font-size: 14px; height: 40px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 10px; }
.news_list .em { font-size: 14px; }
.news_list .pd:hover .text { background: #e02e2b; }
.flip { text-align: center; font-size: 18px; }
.flip a,
.flip span { display: inline-block; color: #fff; padding: 0 10px; line-height: 26px; text-decoration: none; }
.flip .current { color: #e02e2b !important; }
.flip a:hover { color: #000; }
.flip .flip_prev { padding: 0px; width: 26px; margin-right: 15px; }
.flip .flip_next { padding: 0px; width: 26px; margin-left: 15px; }
.news_tit { text-align: center; margin-bottom: 20px; }
.news_tit .h1 { font-size: 24px; color: #e02e2b; }
.news_tit .em { font-size: 14px; }
.news_con { font-size: 14px; width: 80%; margin: 0 auto; }
.news_con p { margin-bottom: 1em; text-indent: 2em; font-size: 1em; letter-spacing: 0; }
.news_con img { max-width: 100%; height: auto; margin: 0 auto; display: block; }
.share { padding-top: 20px; margin-bottom: 40px; }
.share * { box-sizing: content-box; }
.share ul { width: 176px; margin: 0 auto; }
.share li { float: left; margin: 0 5px; }
.share i { width: 30px; height: 30px; border: 2px solid #fff; display: block; border-radius: 50%; text-align: center; line-height: 30px; color: #fff; font-size: 16px; }
.share i:hover { background: #fff; color: #001e2d; }

@media screen and (max-width:1279px) {
.news { width: 1000px; }
}

@media screen and (max-width:1024px) {
.news { width: auto; margin: 0 40px; }
.news_con { width: auto; }
.news_t { margin-bottom: 15px; }
.news_t .em { font-size: 18px; }
.slide_object { z-index: 1; }
}

@media screen and (max-width:768px) {
.news_list li { width: 50%; }
}

@media screen and (max-width:480px) {
.news { margin: 0 30px; padding: 80px 0 0 0; }
.news_list ul { margin-right: 0px; }
.news_list li { width: auto; float: none; }
.news_list .pd { margin-right: 0px; }
.flip a,
.flip span { padding: 0 5px; }
.flip .flip_next { margin-left: 10px; }
.flip .flip_prev { margin-right: 10px; }
}
.single-news { background: url(../images/news_bg.jpg) no-repeat top center; background-size: cover; }
.footer { width: 100%; padding: 50px 0; background: #222; }
.footer .wp { width: 1332px; margin: 0 auto; }
.footer_left { float: left; }
.footer_center { float: left; border-right: 1px #e02e2b solid; border-left: 1px #e02e2b solid; padding: 0 30px; margin-left: 100px; }
.footer_center dl { float: left; padding: 0 30px; }
.footer_center dt { font-size: 18px; color: #FFF; margin-bottom: 15px; position: relative; }
.footer_center dt i { position: absolute; right: 0px; width: 40px; height: 40px; background: url(../images/jia.png) no-repeat center bottom; display: none; top: 0px; cursor: pointer; }
.footer_center dt i.curr { background-position: center top; }
.footer_center dd { font-size: 14px; color: #bcbcbc; line-height: 24px; }
.footer_center a { color: #fff; text-decoration: none; display: block; }
.footer_center a:hover { color: #e02e2b; }
.footer_right { float: right; font-size: 14px; color: #bcbcbc; padding-top: 143px; }
.page-template-page-home-php .swiper-container-vertical>.swiper-pagination { right: 40px !important; -webkit-transform: none !important; -moz-transform: none !important; -o-transform: none !important; -ms-transform: none !important; transform: none !important; }
.page-template-page-home-php .swiper-pagination-bullet { width: 6px !important; height: 6px !important; background: #fff; opacity: 1; border-radius: 3px !important; }
.page-template-page-home-php .swiper-pagination-bullet-active { width: 6px !important; opacity: 1; }
#related_jobs { display: none; }
#job_description { width: 70%; }
#business_card,
.grid-item h2 { font-family: 'Century Gothic', \5FAE\8F6F\96C5\9ED1, "museo_slab500", sans-serif; line-height: 1.8; }
#works_buttons_year { }
#works_list .nav_warpper { }
.footer_left img { width: 223px; }
.footer_right { }
.footer_right img { width: 214px; }
#youkuplayer { z-index: 9; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #000; }
.video-paused #site_logo,
.video-paused #menu_control_wrapper { -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; }
.video-paused.ready #site_logo,
.video-paused.ready #menu_control_wrapper { opacity: 0; }
.video-paused.h120 #site_logo,
.video-paused.h120 #menu_control_wrapper { opacity: 1; }
.guide_play { display: none; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0); z-index: 9999; }
#header:hover #site_logo,
#header:hover #menu_control_wrapper { opacity: 1 !important; }

@media screen and (max-width:1440px) {
.footer .wp { width: 1200px; }
.footer_center { margin-left: 80px; }
.footer_center dl { padding: 0 20px; }
}

@media screen and (max-width:1250px) {
.footer .wp { width: 1000px; }
.footer_center { margin-left: 30px; }
.footer_center dl { padding: 0 10px; }
}

@media screen and (max-width:1024px) {
.footer .wp { width: auto; margin: 0 40px; }
.footer_center { float: none; text-align: center; overflow: hidden; border: none; margin: 0px; padding: 0px; }
.footer_center dl { width: 20%; box-sizing: border-box; padding: 0 10px; }
.footer_left { width: 229px; margin: 0 auto; float: none; margin-bottom: 30px; }
.footer_right { float: none; width: 214px; margin: 0 auto; padding-top: 20px; }
#careers { background-size: auto 100%; }
.guide_play { display: block; }
}

@media screen and (max-width:640px) {
/*.footer_center dl{ width:auto; float:none; padding:0px; margin-bottom:0px;}
.footer_center dd{ display:none; padding:10px 0;}
.footer_center dt{ height:32px; line-height:32px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.5); margin-bottom:0px; font-size:16px;}
.footer_center dt i{ display:block; height:32px; line-height:32px; background-position:center -45px;}*/

.footer_center { text-align: left; margin-right: -30px; }
.footer_center dl { padding: 0px; }
.footer_center dt { font-size: 10px; margin-bottom: 5px; line-height: 1; }
.footer_center dd { font-size: 8px; line-height: 1.5; }
.footer .wp { margin: 0 30px; overflow: hidden; }
.footer { padding: 15px 0; }
.footer_center a { color: #bbb; }
.footer_left { width: 28%; margin: 0 0 20px 0; }
.footer_left img { width: 100%; height: auto; display: block; padding-bottom: 10px; border-bottom: 1px solid rgba(224,46,43,0.8); }
.footer_right { overflow: hidden; width: auto; padding-top: 10px; }
.footer_right img { width: 40%; float: right; border-left: 1px solid rgba(224,46,43,0.8); padding: 5px 0 5px 10px; }
}

@media screen and (max-width:480px) {
.page-template-page-home-php .swiper-container-vertical>.swiper-pagination { right: 30px !important; }
.home .swiper-slide h1,
.page h1 { line-height: 0.9; }
#youkuplayer { top: -40px; bottom: -40px; height: auto; background: #000; }
/*#youkuplayer{}
#youkuplayer .fugai{ width:116px; height:28px; border-radius:12px; background:#e02e2b; position:absolute; top:50%; right:5px; margin-top:-150px; z-index:2; line-height:28px;}
#youkuplayer #myVideo{ height:300px; position:absolute; left:0px; top:50%; right:0px; margin-top:-150px;}*/
}

@media screen and (max-width:413px) {
.page-template-page-home-php .swiper-container-vertical>.swiper-pagination { right: 20px !important; }
.footer .wp { margin: 0 20px; }
.home .swiper-slide h1 { font-size: 8rem; padding: 0 20px; box-sizing: border-box; }
}

@media screen and (max-width:374px) {
.footer .wp { margin: 0 10px; }
.footer_center dt { font-size: 12px; }
.footer_center dd { font-size: 10px; }
}
.ntb { display: table; table-layout: fixed; width: 100%; height: 100%; text-align: center; }
.ntd { display: table-cell; vertical-align: middle; }
.ntb .swiper-container { height: auto; }


#nb_icon_wrap,
#nb_invite_wrap{ display:none !important;}
.page-template-page-home-php .swiper-container-vertical>.swiper-pagination{ left:40px !important; right:auto !important;}

.subnav{ position:fixed; right:0px; top:50%; margin-top:-67px;-webkit-transform: translateZ(0); z-index:90; color:#fff;}
.subnav li{ position:relative; background:rgba(25,25,25,0.95); border-bottom:1px solid #5d5d5d; line-height:44px; overflow:hidden;}
.subnav .h3{ float:right;}
.subnav .h3 a{ display:block; width:44px; color:#fff; position:relative; z-index:3;line-height:44px; height:44px; display:block; text-align:center; font-size:18px; float:right;}
.subnav .h3 span{ display:none; margin-right:44px;}
.subnav li:first-child{ border-radius:8px 0 0 0; background:#F00;}
.subnav li:first-child .h3 a{ background:#F00;}
.subnav li:first-child:hover{ background:#F00;}
.subnav li:last-child{ border-bottom:none; border-radius:0 0 0 8px;}
.subnav .box{ display:none; margin-right:120px; padding-left:20px; min-width:260px; color:#fff;}
.subnav .box a{ color:#fff;}
.subnav .box img{ width:140px; height:auto; display:block; margin:20px auto;}
.subnav:hover .h3 span{ display:block;}
.subnav:hover .box{ display:block;}
.subnav li:hover{ background:rgba(137,137,137,0.95);}

@media screen and (max-width:1024px){
.subnav{ left:0px; bottom:0px; top:auto; margin:0px;}
.subnav .h3{ float:none;}
.subnav .h3 a{ width:auto; display:block; float:none; border-right:1px solid rgba(255,255,255,0.5);}
.subnav li{ width:25%; float:left; border-bottom:none; overflow:visible;}
.subnav li:first-child,
.subnav li:last-child{ border-radius:0px;}
.subnav li:last-child a{ border-right:0px;}
.subnav .box{ position:absolute; bottom:100%; left:0px; right:0px; background:rgba(137,137,137,0.95); min-width:inherit; margin-right:0px; padding:0px; text-align:center;}

.subnav .h3 span,
.subnav:hover .h3 span{ display:none;}
.subnav:hover .box{ display:none;}

.subnav li:hover .box{ display:block;}
#search_control,
#background_music,
.home footer{ display:none !important;}
}
@media screen and (max-width:540px){
.subnav ul{ position:relative;}
.subnav li{ position:static;}
}

#newBridge{ display:none !important;}