/* 
===================== LAYOUT ===================== 
*/
/* ==================================== General ==================================== */
html, body 											{ margin:0; padding:0; border:0; font-size:12px; line-height:1.2em; vertical-align:baseline;
														font-family: "Raleway", "Helvetica", Arial, sans-serif; font-weight: 400;}
body												{ height:auto; overflow-y:scroll; -webkit-text-size-adjust: none; 
														color:inherit; width:100%; }
body * 												{ outline:none; }
table 												{ border-collapse:collapse; border-spacing:0; width:100%; }
td													{ vertical-align:top; }
ol, ul 												{ /*list-style:none;*/ margin:0; padding:0; }
dl, dt, dd											{ margin:0; padding:0; }
a 													{ margin:0; padding:0; border:0; text-decoration:none;  
	word-wrap: break-word;}
a:hover												{ text-decoration: underline; }
a img 												{ border:none; }
h1,h2,h3,h4,h5,h6									{ font-weight:normal; margin:0; padding:0; }
strong 												{ font-weight:bold; }
em 													{ font-style:italic; }
.hide												{ display: none; }

.left												{ float:left;}
.right												{ float:right; }
.inline 											{ display:inline;}
.inlineblock 										{ display:inline-block;}
.inlinegrid											{ display:inline-grid;}
.flex 												{ display:flex;}

.clearfix											{ zoom:1; }
.clearfix:after										{ content:"."; display:block; clear:both; width:0px; height:0px; visibility:hidden; font-size:0; }


::-webkit-input-placeholder 						{ color: #fff; font-size:16px; }
:-moz-placeholder 									{ color: #fff; font-size:16px; }
::-moz-placeholder 									{ color: #fff; font-size:16px; }
:-ms-input-placeholder 								{ color: #fff; font-size:16px; }

.grey												{ color:#999999; }
.mobile												{ display: none; }

.pc													{ display:block!important; }
.m													{ display:none!important; }
.only-desktop										{ display:block!important; }
.only-mobile										{ display:none!important; }
.m-fixed 											{ position: fixed; overflow: hidden;}

/* for mac browser */
* 													{-webkit-font-smoothing: antialiased;}

/* try around, find the setting that fits your font-size */
/*
* 													{ -webkit-text-stroke: 0.6px;}
*/
/* alternative RGBa syntax, allows finer settings with alpha-transparency */
/*
* 													{-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);}
*/

/* ==================================== Structure ==================================== */
#wrap												{ padding: 80px 0 0 0; position:relative; background: #000;} 
#wrap.white 										{ background: #fff;}
#mobile-plane										{ position:fixed; top:0; left:0; width:100%; height:100%; cursor:pointer;
  /*background:url('../img/bg-black-50.png') 0 0 repeat;*/ z-index:999; display:none; }
.mobile-p											{ position:fixed; top:0; left:0; width:100%; height:100%; cursor:pointer;
  background: #ffdb33; z-index: -1; display:none;}

/* header */
#wrapper-header										{ position: absolute; top:50px; z-index:1000; font-family: "Montserrat","Helvetica", Arial, sans-serif; font-weight: 600; width:100%; height:auto; /*position:fixed;*/ /*background:rgba(0,0,0,1);*/}
#header												{ position:relative; margin:0 auto; max-width:1440px;}

/* logo */
#logo												{ left:70px; top:20px; position:absolute;}
#logo a												{ display:block; }
#logo img											{ height:100%; max-height: 93px; max-width: 60px;} 

/* language */
#language-desktop									{ display:none; float:right; width: auto; margin:0; padding: 0; }
#language-desktop>li 								{ display:block; float:left; margin: 0 0 0 0; }
#language-desktop>li:first-child					{ margin:0; }
#language-desktop>li>a								{ display:block; color:#fff; font-size:12px; padding: 12px 10px; }
#wrap.white #language-desktop>li>a 					{ color: #000;}
#language-desktop>li>a:hover						{ color:#25b0d9; }

/* main menu */
#menu												{ position:absolute; top:70px; right:60px; z-index:1000; }
#menu>ul											{ display:block; text-align:center;}
#menu>ul>li											{ display:inline-block; color:#fff;  margin: 0 45px 0 0;}
#wrap.white #menu>ul>li								{ color: #000;}
#menu>ul>li a										{ display:inline-block; font-size:14px; padding: 4px 10px 4px; color:#fff; text-decoration:none; text-transform: uppercase;  transform: translate(0px, 0px)}
#wrap.white #menu>ul>li	a							{ color: #000;}
/*
#menu>ul>li>a:after									 { content: ''; width: 0; display: block; margin-left: -10px; padding-bottom: 10px; border-bottom: 3px solid #ffdb33; -webkit-transition: transform 300ms ease-out; -o-transition: transform 300ms ease-out; transition: transform 300ms ease-out; transform: translate(20px, 0px)}	
#menu>ul>li>a:hover:after,#menu>ul>li>a:active:after { width: 100%; max-width: 60px; transform: translate(0px, 0px)}	
*/
#menu>ul>li.lang_pc  								{ margin:0 0 0 -2px;}
#menu>ul>li.lang_pc a:hover:after,
#menu>ul>li.lang_pc a.active:after					{ content:''; width: 0; border: 0; margin: 0; transform: translate(0px, 0px)}

#menu>ul span 										{ color: #fff;}
#wrap.white #menu>ul span 							{ color: #000;}

#menu>ul>li ul										{ position: absolute; top: 40px; display: block; margin-left: -78px; display:none; }
#menu>ul>li ul>li									{ float:left; }

#menu-bg											{ position:absolute; width:100%; height:34px; background-color:#25b0d9; top:100%; z-index:999; display:none; }

/* slide menu */
.mobile-menu-btn									{ position: absolute; top: 60px; right:30px; width: 32px; height: 12px; display: none; 
	background:url('../img/mbtn.png') center center no-repeat; cursor: pointer; }
#wrap.white .mobile-menu-btn 						{ background:url('../img/mbtn_b.png') center center no-repeat; }
.mobile-menu-btn.active								{ background:url('../img/close.png') center center no-repeat; height: 32px; top: 55px;}
#wrap.white .mobile-menu-btn.active					{ background:url('../img/close.png') center center no-repeat; height: 32px; top: 55px;}

.wrapper-slide-menu									{ position: fixed; top: 150px; width: 100%; /*overflow: auto;*/ }

.slide-menu											{ width: 100%; height:auto; position:relative; display:none; }
.slide-menu>li										{ display:block; position:relative; /*border-top: #fff solid 1px;*/ }
.slide-menu>li:first-child							{ border-top:none; }
.slide-menu>li>span									{ display:block; position:absolute; right:0; top:0; width:79px; height:44px; cursor:pointer; background:url('../img/mobile-menu-arrow-down.png') center center no-repeat; text-align:center; }	
.slide-menu>li>span.active							{ background:url('../img/mobile-menu-arrow-up.png') center center no-repeat; }
.slide-menu>li>a									{ display:block; text-decoration: none;  color:#000; padding: 30px 0; font-size:16px; letter-spacing: 0.5px; text-align:left; margin-left: 60px; text-transform: uppercase;}
.slide-menu>li>a:hover								{ color:#000; }

.slide-menu>li>a:after								{ content: ''; width: 0; display: block; padding-bottom: 10px; border-bottom: 4px solid #fff; -webkit-transition: transform 300ms ease-out; -o-transition: transform 300ms ease-out; transition: transform 300ms ease-out; transform: translate(20px, 0px)}	
#wrap.white .slide-menu>li>a:after					{ border-bottom: 4px solid #000;}
.slide-menu>li>a:hover:after,.slide-menu>li>a:active:after { width: 60px; transform: translate(0px, 0px)}	
.slide-menu>li>ul									{ display:none; }
.slide-menu>li>ul>li								{ display:block; border-top: #8cc8d9 solid 1px; }
.slide-menu>li>ul>li>a								{ display:block; background-color:#25b0d9; padding: 15px 0; font-size:14px; text-align:center; text-decoration:none; text-transform: uppercase;}
.slide-menu>li>ul>li>a:hover						{ color:#fff; }
#wrap.white .slide-menu>li>ul>li>a:hover			{ color:#000; }

/* mobile language */
#language-mobile									{ padding: 40px 60px; text-align:left; font-size:15px; color:#000; /*background:url('../img/bg-black-50.png') 0 0 repeat;*/}
#language-mobile span								{ display:inline-block; margin: 0 40px; }
#language-mobile span:first-child 					{ margin: 0 40px 0 0; }
#language-mobile span:last-child 					{ margin: 0 0 0 40px;}
#language-mobile span a,
#language-mobile span a:hover						{ color:#000; text-decoration:none; }

/* footer */
#wrapper-footer										{ position:relative; margin:0 auto; max-width:1920px; background-color:#313131; }
#footer												{ padding: 35px 30px 35px; background-color:#000000; text-align:center; font-size:14px; }


/* 
===================== SHARING ===================== 
*/
/* grid */
.full												{ width:100%; }
.half												{ width:50%; }
.one_third											{ width:33.33%; }
.two_third											{ width:66.66%; }
.forty												{ width:40%; }
.sixty												{ width:60%; }

/* sep */
.sep-10												{ height: 0px; clear:both; padding: 5px 0; }
.sep-15												{ height: 0px; clear:both; padding: 8px 0 7px; }
.sep-0												{ height: 0px; clear:both; padding: 0 0; }
.sep-for-4											{ height: 0px; clear:both; padding: 0 0; }
.sep-for-3											{ height: 0px; clear:both; padding: 0 0; }
.sep-for-2											{ height: 0px; clear:both; padding: 0 0; }
.sep-line											{ height: 1px; clear:both; padding: 0 0; margin: 0 10px 0 0; background-color:#fff; }

/* heading */
h1 													{ font-size: 48px; }
h2 													{ font-size: 36px; }
h3 													{ font-size: 28px; }
h4 													{ font-size: 16px; }
h1,h2,h3,h4											{ line-height:1.2em; margin:0; color:#009fdf; display:block;  }
hr													{ padding:0; height:1px; border:0; width: 100px; margin: 1em 0; 
	background-color: #fff; text-align:left; }

h5 													{ font-weight: 600; font-size: inherit; display: inline-block; text-transform: uppercase;}
h6 													{ font-weight: 600; font-size: inherit; display: inline-block;}

/* font & style */
.semibold 											{ font-weight: 600; }
.mc 												{ color: #ffdb33;}
.mf 												{ font-family: "Montserrat","Helvetica", Arial, sans-serif;}
.sidetext											{ transform: rotate(90deg); }
.reeltext 											{ text-indent: 10px; }

/* form */
dl													{ padding:0; }
dl dt												{ width:20%; float:left; padding:2px 0; text-transform:uppercase; }
dl dd												{ width:80%; float:left; }

select												{ border:none; /*background:#606 url('../img/bg-purple-80.png') 0 0 repeat; */
	color:#606; padding:2px 10px; -webkit-appearance: menulist; }

input[type=text], textarea							{ padding:15px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; color:#fff; font-size:16px;
	box-sizing: border-box; width:100%; background:url('../img/bg-white-30.png') 0 0 repeat; border:none; }
textarea											{ height:130px; }
input[type=text].error, textarea.error				{ border: red solid 1px; }
.error-msg											{ color: red; font-size:16px; text-align:left; margin:4px 0 0 0; }
.message_box										{ color:red; font-size:16px; margin: 20px 0 0 0; }

/* pager */
.pager												{ margin:0 0 0 0 !important; padding:0; }
.pager li											{ float:left; margin:0 0 0 5px; padding:0; list-style:none; }
.pager li:first-child								{ margin:0; }
.pager a											{ display:block; width:22px; text-align:center; font-size:11px; 
	color:#606; background:url('../img/bg-white-30.png') 0 0 repeat; 
	border:1px solid #c2bfa4; padding-top:1px;}
.pager a:hover, .pager a.active 					{ background:url('../img/bg-purple-80.png') 0 0 repeat; color:#fff;}

.pager a.first, .pager a.prev, 
.pager a.next, .pager a.last						{ background:url('../img/pager.png') no-repeat; text-indent:-9999px;}
.pager a.first										{ background:url('../img/pager.png') no-repeat left top;}
.pager li:hover a.first								{ background-position:left bottom;}
.pager a.prev										{ background:url('../img/pager.png') no-repeat -20px top;}
.pager li:hover a.prev								{ background-position:-20px bottom;}
.pager a.next										{ background:url('../img/pager.png') no-repeat -40px top;}
.pager li:hover a.next								{ background-position:-40px bottom;}
.pager a.last										{ background:url('../img/pager.png') no-repeat right top;}
.pager li:hover a.last								{ background-position:right bottom;}

/* buttons */
.button-warp										{ padding: 0; position: relative; text-align:left; }
.button												{ display:inline-block; padding: 2px 26px; color:#333; 
	border:solid 1px #333; text-transform:uppercase; }
.button:hover										{ border:solid 1px #fff; color:#fff; background-color:#333; }

.txtonimg 											{ position: relative;}
.txtonimg img 										{ width: 100%; height: 100%;}
.txtonimg figcaption								{ display: inline-block; margin: -44% auto 0; width: 100%; text-align: center; /*position: absolute; top: 40%;	bottom: 40%; left: 30%;*/}

.btn_path 											{ padding-bottom: 0!important;}
.btn_path a,.btn_path a:hover						{ color: #000;}
.case2 .btn_path a, .case2 .btn_path a:hover		{ color: #fff;}
.case2 .animated-arrow .the-arrow.-left,
.case2 .animated-arrow .the-arrow.-right			{ transform: rotate(180deg);}
/*
.btn_path:after 									{ content: url('../img/path.png'); display: inline-block; position: relative; top: 5px; left: 10px; transform: translate(0px, 0px)}
.btn_path:hover:after 								{ transform: translate(10px, 0px);}
*/

/* 
===================== MODULES ===================== 
*/
/* ==================================== Homepage ==================================== */
/* ==================================== Banner ==================================== */
#wrapper-banner										{ position:relative; margin:0 auto; max-width:1920px; margin-top: -100px;}
.homeSlideShow .slide								{ width:100%; overflow: hidden; margin: 0 auto;}
.homeSlideShow .slide img.home						{ width:100%; min-height: 1080px;}
.homeSlideShow .slide .scrollbtn img				{ padding-top: 100px; }

.homeSlidePagerWrapper								{ position:absolute; left:50%; bottom:5%; display:inline-block; z-index:101; }
.homeSlidePager										{ position:relative; display: inline-block; }
.homeSlidePager span								{ background:url('../img/icon_dot2.png') center center no-repeat; 
														width:12px; height:12px; margin:0 0 0 20px; 
														display:block; float:left; cursor:pointer; }
.homeSlidePager span:first-child					{ margin:0; }
.homeSlidePager span.cycle-pager-active,
.homeSlidePager span:hover							{ background:url('../img/icon_dot.png') center center no-repeat; }

.homeSlideShow .desktop								{ display:block; }
.homeSlideShow .mobile								{ display:none; }

#prev												{ position:absolute; top:50%; margin-top:-22px; left:20px; z-index:101; 
														width:20px; height:45px; text-indent:-9999px; cursor:pointer;
														background: url('../img/slider_prev.png') center center no-repeat; }
#prev:hover											{ opacity:0.5; }
#next												{ position:absolute; top:50%; margin-top:-22px; right:20px; z-index:101; 
														width:20px; height:45px; text-indent:-9999px; cursor:pointer;
														background: url('../img/slider_next.png') center center no-repeat; }
#next:hover											{ opacity:0.5; }

.banner-text										{ z-index:99;  position: absolute; top: 248px; width:100%;/*display:inline-block;*/}
.banner-text .wrap									{ max-width: 1440px; margin: 0 auto; position: relative;}
.banner-text .wrap>div 								{ margin: 0 70px; max-width: 600px; color: #fff;}
.banner-text .wrap .title							{ display: inline-block; text-transform: uppercase; line-height:80px; font-size:70px; font-weight:300;}
.banner-text .wrap .title .highlight                { color:#fedc32; font-weight: 600;}
.banner-text .wrap .content							{ display: inline-block; font-size:14px; line-height:28px;}
.banner_pc 											{ width: 100%;}
.banner_m 											{ display: none;}

.headline .title 									{ font-weight: 600;}

.inner .ivideo,.inner .hvideo 						{ margin: 0 auto; display: block; max-width: 1000px; max-height: 600px; margin: 0 auto; padding: 0 30px;}
.inner .ivideo 										{ min-height: 600px; width: 100%; height: 100%;}
.inner video 										{ /*position: absolute;*/ top: 0; left: 0; width: 100%; height: 100%; margin: 0 auto;}

#homeVideo 											{ object-fit: cover; height: 100%; width: 100%; min-width: 100%; max-height: 800px; min-height: 650px; opacity: 1;}

/* ==================================== Work ==================================== */
#wrapper-work										{ position:relative; margin: 0 auto; width:100%; max-width:1920px; background: linear-gradient(180deg, #000 60%, #1d1d1d 60%);}
.work												{ position:relative; margin: 0 auto; width:100%; max-width:1440px; min-height:640px; /*background: url('../img/w.png') left center no-repeat;*/  }
.work .inner										{ z-index:101; padding: 160px 70px; max-width:1440px; margin:0 auto; }
.work .inner h2 									{ color:#fedc32; font-size:28px; letter-spacing: 0px; text-transform: uppercase;}
.work .inner p 										{ font-weight: 600;}

.work .one_third  									{ max-width: 400px; margin: 0 10px;}
.work .one_third:first-of-type  					{ margin-left: 0;}
.work .one_third:last-of-type  						{ margin-right: 0;}

.work .headline	 									{ padding-bottom:70px; }
.work .headline .title								{ font-size: 30px; color: #fff; padding-left: 0px; display: inline-block; text-transform: uppercase;}
.work .headline .title h6 							{ display: block;}
.work .headline .line 							    { border-bottom: 3px solid #fedc32; position: relative; display: block; padding-bottom: 20px; margin: 0 auto;} 
.work .headline .content							{ display: inline-block; font-size: 14px; line-height: 30px; max-width: 720px; padding-top:50px; text-align: left; margin-left:-30px; font-weight: 500;}

/* ==================================== About Us ==================================== */
#wrapper-about-us									{ position:relative; margin:0 auto; max-width:1920px; color: #fff;}
.about-us											{ margin: 0 0 0 0; padding: 0; position:relative; /*background: url('../img/s.png') 70% center no-repeat;*/ /*text-align: justify;*/}
.about-us .inner									{ position:relative; z-index:101; padding: 0 70px; max-width:1440px; margin:0 auto; }
.about-us .inner h2 								{ color:#5b5b5b; font-size:48px; text-align:center; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif; letter-spacing: 0px; text-transform: uppercase; font-weight: bold;}
.about-us .inner p 									{ color:#707070; font-size:18px; line-height:29px; font-family: Helvetica, Arial, sans-serif }

.about-us .headline	 								{ margin: 0 auto; max-width: 960px; padding-top: 20px;}
.about-us .headline .title							{ font-size: 30px; text-align: right; display: inline-block; text-transform: uppercase;}
.about-us .headline .title h6 						{ display: block;}
.about-us .headline .line 							{ border-bottom: 3px solid #fedc32; position: relative; display: block; padding-bottom: 20px; margin: 0 auto;} 
.about-us .headline .content						{ font-size: 14px; line-height: 30px; max-width: 720px; padding-top:50px; text-align: left; font-weight: 500; display: inline-block;}

.about-us .life 									{ padding: 170px 40px; margin: 0 auto; display:table; width: 100%; text-align: center;}
.about-us .life a 									{ text-decoration: none; color: inherit;}
.about-us .life img 								{ width: 100%;}
.about-us .life .card 								{ margin: 0; display: inline-block; background: #fff; position:relative;}
.about-us .life .card:before 						{ content: ''; background: #fedc32; display: block; position: absolute; width:280px; height: 260px; bottom: -10px; right: -10px; z-index:-1; -webkit-transition: transform 500ms ease-out; -o-transition: transform 500ms ease-out; transition: transform 500ms ease-out; transform: translate(0px, 0px)}

.about-us .life .card .num 							{ font-size: 70px; position: absolute; margin-top: -64px; margin-left: -100px; letter-spacing: 5px; font-weight: 500;}
.about-us .life .card .title 						{ font-size: 18px;}
.about-us .life .card .title h5 					{ line-height: 32px;}
.about-us .life .card .content						{ font-size: 14px; line-height: 26px; padding-top: 25px; text-align: left; padding-right: 0; font-weight: 500;}
.about-us .life .card .casestudy					{ font-size: 14px; line-height: 26px; position: absolute; bottom: 40px; right: 40px;}
/*
.about-us .life .card .casestudy:after 				{ content: url('../img/path.png'); display: inline-block; position: relative; top: 5px; left: 10px; transform: translate(0px, 0px)}
.about-us .life .card:hover:before 					{ transform: translate(15px, 15px)}
*/
/*
.about-us .life .card:hover .num					{ transform: scale(1.05);}
.about-us .life .card:hover	.title					{ transform: scale(1.05);}
.about-us .life .card:hover .content				{ transform: scale(1.05);}

.about-us .life .card:hover .casestudy				{ transform: translate(10px, 0px);}
*/
.about-us .life .left 								{ text-align: left; padding-right:50px}
.about-us .life .right 								{ text-align: left; padding-right:50px; padding-left: 50px;}

.about-us .background-1								{ position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-about-us-1.png) 50% 0 no-repeat fixed; z-index:101; }
.about-us .background-2								{ position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-about-us-2.png) 50% 0 no-repeat fixed; z-index:100; }

/* ==================================== Sponsor ==================================== */
#wrapper-sponsor									{ position:relative; margin: 0 auto; width:100%; max-width:1920px;}
.sponsor											{ position:relative; z-index:101; padding: 0 70px; max-width:1440px; margin:0 auto; }
.sponsor .inner										{ position:relative; z-index:101; padding: 40px 0px; max-width:1300px; margin:0 auto; }
.sponsor .inner	img 								{ width: 100% }
.sponsor .life 										{ padding: 0px 40px;} 

/* ==================================== Team ==================================== */
#wrapper-team										{ position:relative; margin: 0 auto; padding: 150px 0px; width:100%; max-width:1920px; min-height:600px;}
.team												{ margin: 0 0 0 0; padding: 0; position:relative; /*background: url('../img/t.png') 70% top no-repeat;*/}
.team .inner										{ position:relative; z-index:101; padding: 0 70px; max-width:1440px; margin:0 auto; }
.team .inner img 									{ width: 100% }
.team .inner h2 									{ font-size: 24px; color: #fedc32; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif; margin: 20px 0 10px;}
.team .inner p 										{ font-size: 18px; color: #fff; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif;  margin: 10px 0 20px;}

.team .headline	 									{ padding-bottom:70px; }
.team .headline .title								{ font-size: 30px; color: #fff; padding-left: 0px; display: inline-block; text-transform: uppercase;}
.team .headline .title h6 							{ display: block;}
.team .headline .line 							    { border-bottom: 3px solid #fedc32; position: relative; display: block; padding-bottom: 20px; margin: 0 auto;} 
.team .headline .content							{ display: inline-block; font-size: 14px; line-height: 30px; max-width: 720px; padding-top:50px; text-align: left; margin-left:-30px; font-weight: 500;}


/* ==================================== Project ==================================== */


#wrapper-project									{ position:relative; margin: 0 auto;  width:100%; max-width:1920px; min-height:500px;}
.proj												{ margin: 0 0 0 0; padding: 0; position:relative; }
.proj .inner										{ position:relative; z-index:101; max-width:1300px; margin:0 auto; }
.proj .inner img 									{ width: 100% }

#wrapper-project .proj								{ color: #fff;}
#wrap.white  #wrapper-project .proj					{ color: #000}
#wrapper-project .proj .inner						{ position:relative; z-index:101; padding: 250px 0 0; max-width:1440px; margin:0 auto; }

.project.projlist .proj .headline  					{ margin: 0 auto; padding: 0 70px; max-width: 1920px; }
.project.projlist .proj .headline .title			{ font-size: 34px; line-height: 50px; text-align: left; padding-top: 30px; padding-right:25px; text-transform: uppercase; }
.project.projlist .proj .headline .line 			{ left: 0px; border-bottom: 3px solid #fedc32; position: relative; padding-bottom: 10px; } 
.project.projlist .proj .headline .content			{ max-width: 768px; margin: 0 auto; font-size: 14px; line-height: 30px; padding-top:215px; text-align: left; padding-left: 25px; padding-bottom: 150px;}

/* ==================================== Process ==================================== */


#wrapper-process									{ position:relative; margin: 0 auto;  width:100%; max-width:1920px; min-height:500px;}
.process											{ margin: 0 0 0 0; padding: 0; position:relative; }
.process .inner										{ position:relative; z-index:101; max-width:1300px; margin:0 auto; }
.process .inner img 								{ width: 100% }

#wrapper-process .process							{ color: #fff;}
#wrap.white #wrapper-process .process				{ color: #000;}
#wrapper-process .process .inner					{ position:relative; z-index:101; padding: 200px 0px; max-width:1440px; margin:0 auto; }

.process.proclist .process .headline  				{ margin: 0 auto; padding: 0 70px; max-width: 1920px; }
.process.proclist .process .headline .title			{ color: #fedc32; font-size: 34px; line-height: 50px; text-align: center; padding: 75px 0; text-transform: uppercase; }
#wrap.white  .process .headline .title				{ color: #000; }
.process.proclist .process .headline .subtitle		{ font-size: 34px; line-height: 50px; text-align: right; padding-top: 30px; padding-right:25px; text-transform: uppercase; }
.process.proclist .process .headline .line 			{ left: 0px; border-bottom: 3px solid #fedc32; position: relative; padding-bottom: 10px; } 
.process.proclist .process .headline .content		{ font-size: 14px; line-height: 30px; padding: 75px 200px 175px; text-align: left; }

.process.proclist .process .headline .selection		{ color: #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; padding-top: 30px;}
.process.proclist .process .headline .selection		{ color: #fff; display: inline-block;}
#wrap.white  .process .headline .selection  { color: #000;}
.process.proclist .process .headline .selection .highlight { display: inline; color: #fff;}
#wrap.white  .process .headline .selection .highlight{ color: #000;}
.process.proclist .process .headline .selection a {color: #fedc32;}

.process .gridr .half								{ max-width: 600px; min-width: 600px;}

/* ==================================== Projgrid ==================================== */
#wrapper-projgrid									{ position:relative; margin: 0 auto; padding-bottom: 95px; width:100%; max-width:1920px; display:inline-block}
.projgrid											{ margin: 0 0 0 0; padding: 0; position:relative;  }
.projgrid .inner									{ position:relative; z-index:101; padding: 0 70px; max-width:1440px; margin:0 auto; }
.projgrid .inner img, .projgrid .inner video		{ width: 100%; /*max-width: 600px;*/}
.projgrid .inner .title 							{ min-width: 50px;}
.projgrid .inner .title,.projgrid .inner .winner	{ vertical-align: top; }
.projgrid .inner .content 							{ word-wrap: break-word; max-width:345px;}
.projgrid .inner h1 								{ font-size: 24px; margin: 15px 0 10px; color: #fedc32; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif; text-transform: uppercase;}
.projgrid .inner h2 								{ font-size: 18px; margin: 20px 0 10px; color: #fedc32; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif; text-transform: uppercase;}
.projgrid .inner p 									{ font-size: 14px; margin: 10px 0 20px; color: #fff; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif; text-transform: uppercase; }
#wrap.white .projgrid .inner p 						{ color: #000;}
.projgrid .inner .winner 							{ margin-top: 20px;}
.projgrid .inner a:hover							{ text-decoration: none; }

.process .gridr .gridrow .next_proj					{ text-align: right; font-weight: 600; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif; font-size: 20px; letter-spacing: 0px; text-transform: uppercase;}
.process .gridr .gridrow .next_proj	a 				{ color: #fedc32; }
.process .gridr .gridrow .next_proj	a:hover			{ text-decoration: underline; }
.process .gridr .gridrow .next_proj	a:after 		{ background-image: url('../img/arrow.png'); background-size: 10px 15px; display: inline-block; width: 10px; height: 15px; margin-left: 10px; content:"";}
#wrap.white.process .gridr .gridrow .next_proj a	{ color: #000; }
#wrap.white.process .gridr .gridrow .next_proj a:after { background-image: url('../img/arrow_black.png'); }

/* ==================================== Grid ==================================== */

.gridr .gridrow 									{ display: inline-grid;}
.gridr .gridrow .row_1_2							{ position: relative; margin: 0 auto; padding-bottom: 80px;}
.gridr .gridrow .row_1_3							{ position: relative; margin: 0 auto; padding-bottom: 80px;}
.gridr .one_third									{ max-width: 400px; min-width: 400px; margin: 0 10px; display:inline-block; vertical-align: top;}
.gridr .one_third div 								{ display:inline-block;}
.gridr div.one_third:first-of-type 					{ margin-left: 0;}
.gridr div.one_third:last-of-type					{ margin-right: 0;}

.gridr .half  										{ max-width: 400px; min-width: 400px; margin: 0 28px;}
.gridr .half:first-of-type 							{ margin-left: 0;}
.gridr .half:last-of-type							{ margin-right: 0;}


/* ==================================== Side Item ==================================== */
.sideitem 											{ display: inline-block; position: absolute; right: 0; bottom: 160px; width: 20px;}
.sideitem a  										{ text-decoration: none; color: #000;}
.sideitem .sidetext 								{ position: relative; font-size: 14px; width: 100px;}
.sideitem.toshowreel	 							{ right: -60px; width: 60px;}
.sideitem.toshowreel .sidetext 						{ top: 90px; left: -60px; width: 160px; }
.sideitem.toshowreel a 								{ color:#fff; }
.sideitem.toshowreel .arrowdown 					{ position: relative; top: 160px; left: 10px;}
.sideitem.scrolltotop								{ right: 65px; }
.sideitem.scrolltotop .sidetext 					{ top: 50px; left: -40px; width: 100px; }

.sideitem.services 									{ top: 0; right: 0px; height: 100%;}
.sideitem.services .sidetext 						{ top: 130px; left: -100px;}
.sideitem.services .sideline 						{ height: calc(100% - 200px); position: absolute; top: 300px; margin-top: -100px; right: 70px; border-right: 1px solid #000;}

.sideitem.plab 										{ top: 0; right: 0px; height: 100%; z-index: 100;}
.sideitem.plab .sidetext 							{ top: 600px; left: -100px; color: #fff;}
.sideitem.plab .sideline 							{ height: 550px; position: absolute; top: 0; margin-top: 0; right: 70px; border-right: 1px solid #fff;}

/* ==================================== Footer ==================================== */
#wrapper-footer										{ position:relative; margin:0 auto; max-width:1920px; background:#fedc32; background-size:cover; }
.footer												{ color: #000;  margin:0 auto; text-align: left;}
.footer .inner										{ max-width: 1440px; margin:0 auto; padding: 70px; position:relative; z-index:102; font-weight: 500;}
.footer .inner .logo 								{ display:inline-block;}
.footer .inner .logo img							{ height: 100%; max-height: 50px; max-width: 194px;}
.footer .inner .com 								{ align-self: flex-end; padding-left: 20px; font-size: 14px; font-weight: 600;}
.footer .inner .content 							{ color: #000; padding: 50px 0 15px; font-size: 18px; font-weight: 500; line-height: 30px;}
.footer .inner .content>div 						{ padding-bottom: 30px;} 	

.footer .inner .place								{ padding-top: 25px; }
.footer .inner .place>div 							{ padding: 0 0 0 50px; border-left: 1px solid #000; max-width: 260px;}
.footer .inner .place>div:first-child 				{ padding: 0 50px 0 0; border:0;}
.footer .inner .place>div>div						{ padding-bottom: 20px; text-transform: uppercase;}

.footer .inner .place .location 					{ color: #000; font-weight: bold; padding-bottom: 30px;}
.footer .inner .place .mail							{ text-transform: lowercase; word-break: break-all;}
.footer .inner .copyright 							{ clear:both;  font-size: 14px; font-weight: 500;}


/* ==================================== Case Study ==================================== */


.case .sideitem 									{ right: 5px; bottom: 350px; width: 20px;}
.case .btn_path 									{ padding-right: 30px;}
.case .btn_path  									{ color: #000;}
.case2 .btn_path  									{ color: #fff;}
/*
.case2 .btn_path:after 								{ transform: rotate(180deg); content: url('../img/path.png'); display: inline-block; position: relative; top: 5px; left: 10px; }
.case2 .btn_path:hover:after 						{ left: 20px; }
*/
.case2 .sideitem 									{ right: -150px; bottom: 100px;}
.case2 .sideitem a  								{ color: #fff; }
.case2 .sideitem img 								{ transform: rotate(180deg);}

.case .banner-text 									{ top: auto; bottom: 25%;}
.case .banner-text .wrap .title						{ font-size: 50px;}
.case .banner-text .wrap .num 						{ display:inline-block; font-weight: 500;}
.case .banner-text .wrap .casestudy					{ font-size: 30px; font-weight: bold;}
.case .banner-text .wrap .content					{ display:block; font-size: 35px; max-width: none; font-weight: 300; text-transform: uppercase;}

.case .cases										{ margin:0 auto; padding: 0; position:relative; min-height: 1000px; max-width:1920px; background: linear-gradient(180deg, #fff 80%, #ffdb33 30%);}
.case .cases .inner									{ position:relative; z-index:101; padding: 120px 50px 50px; max-width:1440px; margin:0 auto; }
.case .cases .inner h2 								{ color:#5b5b5b; font-size:48px; text-align:center; font-family: "Montserrat", Helvetica, "Arial Black", sans-serif; letter-spacing: 0px; text-transform: uppercase; font-weight: bold;}
.case .cases .inner p 								{ color:#707070; font-size:18px; line-height:29px; font-family: Helvetica, Arial, sans-serif }
.case .cases .inner>div 							{ display: flex; padding-bottom: 100px;}

.case .cases .headline .title						{ font-size: 34px; text-align: left; padding-left:25px}
.case .cases .headline .line 						{ border-bottom: 3px solid #fedc32; position: relative; width: 200px; display: inline-block; left: 0; padding-bottom: 20px; margin-bottom: 20px;}
.case .cases .headline .logo1to 					{ padding: 20px; margin-top: 10%;}
.case .cases .headline .logo1to img 				{ width: auto;}

.case .cases .content								{ font-size: 14px; line-height: 30px; max-width: 540px; text-align: left; /*padding-top:15px; padding-left: 25px*/ padding: 0;}
.case .cases .half.left 							{ text-align: left;}
.case .cases .half.right							{ text-align: right;}
.case .cases .case-bg .left  img 					{ padding-right: 20px; width: 100%;}
.case .cases .case-bg .right img 					{ padding-left: 20px; width: 100%;}
.case .cases .headline img 							{ max-width: 100%;}
.case .cases .headline img:hover					{ transition: transform 2s cubic-bezier(.4,0,0,1)}

.case .cases .case-bg .title						{ font-size: 18px; text-align: left; padding-left:25px; padding-bottom: 20px; font-weight: 600;}
.case .cases .case-bg.swap_block 					{ display: flex;}

.case .cases .card 									{ display: inline-block; background: #fff; max-width:275px; /*min-height:275px;*/ position:relative;}
.case .cases .card:before 							{ content: ''; background: #fedc32; display: block; position: absolute; max-width:275px; max-height: 275px; width: 100%; height: 100%; bottom: -10px; right: -10px; z-index:-1; -webkit-transition: transform 500ms ease-out; -o-transition: transform 500ms ease-out; transition: transform 500ms ease-out; transform: translate(0px, 0px)}
.case .cases .card.logo1a:before 					{ content: ''; background: #c0c0c0;}
.case .cases .card:hover:before 					{ transform: translate(30px, 30px); left:-5px; 
														-webkit-transition: transform 1s cubic-bezier(.4,0,0,1), width 1s cubic-bezier(.4,0,0,1);
														-o-transition: transform 1s cubic-bezier(.4,0,0,1), width 1s cubic-bezier(.4,0,0,1);
														transition: transform 1s cubic-bezier(.4,0,0,1), width 1s cubic-bezier(.4,0,0,1);
													}
													
.case .cases.cs_a .case-bg .content 	 			{ padding: 15px 25px;}
.case .cases.cs_b 									{ display: flex; background: #fff;}
.case .cases.cs_b .subtitle  						{ font-size: 18px; text-align: left; padding-left: 120px; font-weight: 600; text-transform: uppercase;}
.case .cases.cs_b .headline .title					{ font-size: 70px; position: absolute; letter-spacing: 5px; font-weight: 500; padding-left:20px; margin-top:-30px;}
.case .cases.cs_b .headline .line 					{ border-bottom: 3px solid #fedc32; position: relative; width: 70px; display: inline-block; left: 20px; padding-bottom: 10px; /*margin-bottom: 20px;*/} 
.case .cases.cs_b .headline .content 				{ padding-left: 120px;}

.case .cases.cs_b .inner>div						{ display: block;}
.case .cases.cs_b .inner>div .headline				{ display: flex; padding: 50px 0;}
.case .cases.cs_b .case-bg 			 				{ display: block;}
.case .cases.cs_b .case-bg .fullimg img 			{ width: 100%;}

.case .cases.cs_b .re1,
.case .cases.cs_b .re2,
.case .cases.cs_b .re3								{ display: block; clear:both;}
.case .cases.cs_b .re3 								{ padding: 0;}

.case.case1 .cases .headline .re1a img  			{ margin-top: -50px;}
.case.case1 .cases .headline .re2a img  			{ margin-top: -50px;}

.case .cases.cs_b .re1 .headline .line				{ width: 70px;}
.case .cases.cs_b .re2 .headline .line 				{ width: 100px;}
.case .cases.cs_b .re3 .headline .line				{ width: 90px;}

.case .cases.cs_b .re2 .headline div:last-child>div{ margin-left: 60px;}
.case .cases.cs_b .re2 .headline .subtitle 			{ padding-left: 140px;}
.case .cases.cs_b .re2 .headline .content			{ padding-left: 140px; max-width: 520px;}

.case .cases.cs_b .re3 .headline .subtitle 			{ padding-left: 140px;}
.case .cases.cs_b .re3 .headline .content 			{ padding-left: 140px;}
.case .cases.cs_b .re3 .re31 img 					{ padding-top: 20px;}
.case .cases.cs_b .re3 .re31a 						{ padding-top: 250px; padding-right: 20px; text-align: right; }
.case .cases.cs_b .re3 .re32 img 					{ padding-top: 20px;}


.case.case1 .cases .headline .title  				{ padding-left: 0;}
.case.case1 .cases .content 						{ padding-left: 0;}
.case.case1 .cases .content.first 					{ padding-right: 30px;}
.case.case1 .cases .headline .line 					{ left: -25px;}
.case.case1 .cases .case-bg .title 					{ padding-left: 0;}
.case.case1 .cases .case-bg .content 				{ float: right;}

.case.case2 .cases.cs_a .headline  					{ display: table; margin: 0 auto; padding: 0 50px; max-width: 960px; }
.case.case2 .cases.cs_a .headline .title			{ font-size: 34px; line-height: 50px; text-align: left; padding-right:25px; text-transform: uppercase; }
.case.case2 .cases.cs_a .headline .line 			{ left: -25px; border-bottom: 3px solid #fedc32; position: relative; width: 200px; padding-bottom: 20px; } 
.case.case2 .cases.cs_a .headline .content			{ font-size: 14px; line-height: 30px; max-width: 640px; padding-top:15px; text-align: left; padding-left: 25px; }

.case.case2 .cases									{ background: linear-gradient(180deg, #000 80%, #141414 30%); color: #fff;}

.case.case2 .cases.cs_a .case-bg  					{ margin: 0 auto; padding-top: 120px; padding-bottom: 0px; max-width: 960px;}

.case.case2 .cases.cs_b 							{ display: flex; color: #fff; }
.case.case2 .cases.cs_b .headline .full 			{ margin: 0 auto; max-width: 960px;}
.case.case2 .cases.cs_b .headline .content 			{ max-width: 860px;}
.case.case2 .cases.cs_b .case-bg:last-child 		{ padding: 20px 0; clear: both;}
.case.case2 .cases.cs_b .left img 					{ padding-right: 10px;}
.case.case2 .cases.cs_b .right img 					{ padding-left: 10px;}

.case.case2 .cases.cs_b .re2 						{ padding-top: 72px;}
.case.case2 .cases.cs_b .re2 .headline div:last-child>div{ margin-left: 0;}