/* ===================== 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: 300;} body { height:auto; overflow-y:scroll; -webkit-text-size-adjust: none; background-color:#fff; color: #000; 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 { 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; } .pcflex { display:flex!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: 0 0 0 0; position:relative; } #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: #007391; z-index: -1; display:none;} /* header */ #wrapper-header { position: fixed; top:0px; z-index:1000; max-width: 1920px; left: 50%; transform: translate(-50%); font-family: "Montserrat","Helvetica", Arial, sans-serif; font-weight: 300; width:100%; height:200px; background: #007391; background: #007391; background: linear-gradient(180deg,rgba(0, 115, 145, 1) 0%, rgba(0, 113, 143, 0.6) 60%, rgba(0, 34, 43, 0) 100%); /*position:relative; height: auto;*/ } #header { position:relative; margin:0 auto; max-width:1440px;} /* logo */ #logo { left:8px; top:28px; position:absolute;} #logo a { display:block; } #logo img { height:100%;} /* 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; } #language-desktop>li>a:hover { color:#25b0d9; } /* main menu */ #menu { position:absolute; top:38px; right:8px; z-index:1000; } #menu>ul { display:block; text-align:center;} #menu>ul>li { display:inline-block; color:#fff; margin: 0 100px 0 0;} #menu>ul>li a { display:inline-block; font-size: 14px; padding: 20px 10px 1px; color:#fff; text-decoration:none; text-transform: uppercase; transform: translate(0px, 0px)} #menu>ul>li a:hover, a:active { color: #91EFFD;} /* #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;} #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: 50px; right:30px; width: 29px; height: 19px; display: none; background:url('../img/mbtn.png') center center no-repeat; cursor: pointer; } .mobile-menu-btn.active { background:url('../img/close.png') center center no-repeat; height: 32px; } .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:#fff; padding: 30px 0; font-size:16px; letter-spacing: 0.5px; text-align:left; margin-left: 30px; text-transform: uppercase;} .slide-menu>li>a:hover { color:#fff; } /* .slide-menu>li>a:after { content: ''; width: 0; display: block; margin-left: -10px; 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)} .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; } /* mobile language */ #language-mobile { padding: 40px 30px; text-align:left; font-size:15px; color:#fff; /*background:url('../img/bg-black-50.png') 0 0 repeat;*/} #language-mobile span { display:inline-block; margin: 0 10px; } #language-mobile span:first-child { margin: 0 10px 0 0; } #language-mobile span:last-child { margin: 0 0 0 10px;} #language-mobile span a, #language-mobile span a:hover { color:#fff; text-decoration:none; } /* ==================================== Footer ==================================== */ #wrapper-footer { position:relative; margin:0 auto; max-width:1920px; background:#007391; background-size:cover; } .footer { color: #fff; margin:0 auto; text-align: left;} .footer .inner { max-width: 1440px; margin:0 auto; padding: 90px 8px; position:relative; z-index:102; font-weight: 400;} .footer .inner .logo { display:inline-block;} .footer .inner .com { align-self: flex-end; padding-left: 20px; font-size: 14px; font-weight: 600;} .footer .inner .content { color: #fff; padding: 20px 0 0; font-size: 14px; font-weight: bold; font-weight: 400; font-size: 20px; line-height: 100%;} .footer .inner .place { font-size: 14px; line-height: 26px;} .footer .inner .place>div { padding: 0 0 0 50px; border-left: 1px solid #000;} .footer .inner .place>div:first-child { padding: 0 8px 0 0; border:0;} .footer .inner .place>div>div { padding-bottom: 5px; } .footer .inner .place>div>div:last-child { padding-bottom: 0px;} .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; padding-top: 10px!important;} /* ===================== 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; } .c1 { color: #007391;} .c2 { color: #91EFFD;} .mc { color: #ffdb33;} .b1 { background: #FFCA05;} .b2 { background: #91EFFD;} .b3 { background: #4DBEED;} .mf { font-family: "Montserrat","Helvetica", Arial, sans-serif;} .sidetext { transform: rotate(90deg); } .reeltext { text-indent: 10px; font-weight: 400; font-style: Regular; font-size: 16px; line-height: 100%; letter-spacing: 0%; text-transform: unset; } /* 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-top: -50%; margin-left: 25%;/*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: -200px;} .homeSlideShow .slide { width:100%; overflow: hidden; margin: 0 auto;} .homeSlideShow .slide img.home { width:100%; min-height: 1080px;} .homeSlideShow .slide .scrollbtn img { padding-top: 200px; } .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: 55%; width:100%;/*display:inline-block;*/} .banner-text .wrap { max-width: 1440px; margin: 0 auto; position: relative;} .banner-text .wrap>div { margin: 0 90px; text-align: center; color: #fff;} .banner-text .wrap .title { font-weight: 800; font-style: Italic; font-size: 75px; line-height: 100%; letter-spacing: 0%; color:#fedc32;} .banner-text .wrap .title .highlight { color:#fff; font-weight: 600;} .banner-text .wrap .title div { display: inline-block; } .banner-text .wrap .content { display: inline-block; font-size:14px; line-height:28px;} .banner_pc { width: 100%;} .banner_m { display: none;} .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: 800px; width: 100%; min-width: 100%; min-height: 800px; opacity: 1;} /* ==================================== Sections ==================================== */ #wrapper-section1 { position:relative; margin:0 auto; max-width:1920px; background: #fff; color: #000;} #wrapper-section2 { position:relative; margin:0 auto; max-width:1920px; background: #fff; color: #000;} #wrapper-support1 { position:relative; margin:0 auto; max-width:1920px; background: url(../img/home/support1.jpg) 50% 0 no-repeat #000 ; z-index:101; color: #fff;} #wrapper-support2 { position:relative; margin:0 auto; max-width:1920px; background: #fff; color: #000;} .sections { margin: 0 0 0 0; padding: 0; position:relative; /*text-align: justify;*/} .sections .inner { position:relative; z-index:101; padding: 0 5%; max-width:1440px; margin:0 auto; } .sections .inner h2 { color:#5b5b5b; font-size:48px; text-align:center; letter-spacing: 0px; text-transform: uppercase; font-weight: bold;} .sections .inner p { color:#707070; font-size:18px; line-height:29px; } .sections .headline { margin: 0 auto; max-width: 1400px; padding-top: 30px;} .sections .headline .title { text-align: center; font-weight: 400; font-size: 48px; line-height: 100%; letter-spacing: 0%; } .sections .headline .title h6 { display: block;} .sections .headline .line { border-bottom: 3px solid #fedc32; position: relative; display: block; width: 180px; padding-bottom: 20px; margin: 0 auto;} .sections .headline .content { font-size: 14px; line-height: 30px; max-width: 1400px; padding:50px 0; text-align: left; font-weight: 400;} .sections .life { padding: 0 30px 0; margin: 0 auto; display:table; width: 100%; text-align: center;} .sections .life a { text-decoration: none; color: inherit;} .sections .life img { width: 100%;} .sections .life .card { margin: 0; display: inline-block; background: #fff; position:relative;} .sections .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)} .sections .life .card .num { font-size: 70px; position: absolute; margin-top: -64px; margin-left: -100px; letter-spacing: 5px; font-weight: 400;} .sections .life .card .title { font-size: 18px;} .sections .life .card .title h5 { line-height: 32px;} .sections .life .card .content { font-size: 14px; line-height: 26px; padding-top: 25px; text-align: left; padding-right: 0; font-weight: 400;} .sections .life .card .casestudy { font-size: 14px; line-height: 26px; position: absolute; bottom: 40px; right: 40px;} /* .sections .life .card .casestudy:after { content: url('../img/path.png'); display: inline-block; position: relative; top: 5px; left: 10px; transform: translate(0px, 0px)} .sections .life .card:hover:before { transform: translate(15px, 15px)} */ /* .sections .life .card:hover .num { transform: scale(1.05);} .sections .life .card:hover .title { transform: scale(1.05);} .sections .life .card:hover .content { transform: scale(1.05);} .sections .life .card:hover .casestudy { transform: translate(10px, 0px);} */ .sections .life .left { text-align: left; padding-right:25px} .sections .life .right { text-align: left; padding-right:25px} .sections .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; } /* ==================================== Our Solution ==================================== */ #wrapper-solution { position:relative; margin: 0 auto; width:100%; max-width:1920px; background: #fff;} .solution { margin: 0 0 0 0; padding: 0; position:relative; /*text-align: justify;*/ } .solution .headline { margin: 0 auto; max-width: 1400px; padding: 20px 0 0;} .solution .headline .title { text-align: center; font-weight: 400; font-size: 48px; line-height: 100%; letter-spacing: 0%; } .solution .headline .title h6 { display: block;} .solution .headline .line { border-bottom: 3px solid #fedc32; position: relative; display: block; width: 180px; padding-bottom: 20px; margin: 0 auto;} .solution .headline .content { font-size: 14px; line-height: 30px; max-width: 1400px; padding:50px 0 90px; text-align: left; font-weight: 400;} .solution .life { padding: 0 30px 0; margin: 0 auto; display:table; width: 100%; text-align: center;} .solution .inner { position:relative; z-index:101; padding: 100px 5%; max-width:1440px; margin:0 auto; } .solution .inner h2 { color: #007391; font-size:18px; letter-spacing: 0px; font-weight: 300;} .solution .one_third { max-width: 400px; /*margin: 0 10px;*/} .solution .one_third:first-child { margin-left: 0;} .solution .one_third:last-child { margin-right: 0;} .solution .one_third .content { margin: 0 auto; text-align: center; } .solution .one_third .content div { margin: 50px auto 0; text-align: center;} /* ==================================== Our Support ==================================== */ #wrapper-support1 { position:relative; margin:0 auto; max-width:1920px; background: url(../img/home/support1.jpg) 70% 0% no-repeat #000; z-index:101; color: #fff;} #wrapper-support2 { position:relative; margin:0 auto; max-width:1920px; background: url(../img/home/support2.jpg) 25% 0 no-repeat #000 ; z-index:101; color: #fff;} .support .inner { position:relative; z-index:101; padding: 0 5%; max-width:800px; margin:0 auto; } .support .headline .content { font-size: 14px; line-height: 30px; max-width: 800px; padding:50px 0; text-align: left; font-weight: 400;} .support .life { padding: 60px 30px; margin: 0 auto; display:table; width: 100%; text-align: center;} /* ==================================== Sponsor ==================================== */ #wrapper-sponsor { position:relative; margin: 0 auto; width:100%; max-width:1920px; background: #fff;} .sponsor { position:relative; z-index:101; padding: 0 5%; max-width:1440px; margin:0 auto; } .sponsor .inner { position:relative; z-index:101; padding: 80px 0px; max-width:1300px; margin:0 auto; } .sponsor .inner img { width: 100% } .sponsor .headline { margin: 0 auto; max-width: 1400px; padding-top: 20px;} .sponsor .headline .title { text-align: center; font-weight: 400; font-size: 48px; line-height: 100%; letter-spacing: 0%; padding-bottom: 80px;} /* ==================================== Team ==================================== */ #wrapper-team { position:relative; margin: 0 auto; padding: 160px 0px; width:100%; max-width:1920px; min-height:600px; background: #000;} .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 5%; 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:180px; } .team .headline .title { font-size: 30px; text-align:right;} .team .headline .title h6 { display: block;} .team .headline .line { border-bottom: 3px solid #fedc32; position: relative; display: block; width: 180px; padding-bottom: 20px; margin: 0 auto;} .team .headline .content { font-size: 14px; line-height: 30px; max-width: 720px; padding-top:50px; text-align: left; margin-left:-30px; font-weight: 400;} /* ==================================== Project ==================================== */ #wrapper-project { position:relative; margin: 0 auto; width:100%; max-width:1920px; min-height:500px; background: #000;} .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;} #wrapper-project .proj .inner { position:relative; z-index:101; padding: 120px 0px; max-width:1440px; margin:0 auto; } .project.projlist .proj .headline { margin: 0 auto; padding: 0 90px; max-width: 1920px; } .project.projlist .proj .headline .title { text-indent: 80px; width:300px; 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; width: 300px; padding-bottom: 20px; } .project.projlist .proj .headline .content { 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; background: #000;} .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;} #wrapper-process .process .inner { position:relative; z-index:101; padding: 120px 0px; max-width:1440px; margin:0 auto; } .process.proclist .process .headline { margin: 0 auto; padding: 0 90px; max-width: 1920px; } .process.proclist .process .headline .title { color: #fedc32; font-size: 34px; line-height: 50px; text-align: center; padding: 180px 0 140px; text-transform: uppercase; } .process.proclist .process .headline .subtitle { width:260px; 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: 20px; } .process.proclist .process .headline .content { font-size: 14px; line-height: 30px; padding: 100px 200px; text-align: left; } .process.proclist .process .headline .selection { color: #fedc32; font-size: 20px; font-weight: 600; text-transform: uppercase; cursor: pointer; padding-top: 30px;} .process.proclist .process .headline .selection .highlight { color: #fff; display: inline-block} .process .gridr .gridrow { display: block;} .process .gridr .half { max-width: 600px; } /* ==================================== Projgrid ==================================== */ #wrapper-projgrid { position:relative; margin: 0 auto; padding-bottom: 270px; width:100%; max-width:1920px; min-height:1500px; background: #000; } .projgrid { margin: 0 0 0 0; padding: 0; position:relative; } .projgrid .inner { position:relative; z-index:101; padding: 0 5%; max-width:1440px; margin:0 auto; } .projgrid .inner img { width: 100% } .projgrid .inner .title,.projgrid .inner .winner { vertical-align: top; } .projgrid .inner .content { word-wrap: break-word; max-width:220px;} .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;} .projgrid .inner .winner { margin-top: 20px;} /* ==================================== Grid ==================================== */ .gridr .gridrow { display: inline-grid;} .gridr .gridrow .row_1_2 { position: relative; margin: 0 auto; padding-bottom: 30px;} .gridr .gridrow .row_1_3 { position: relative; margin: 0 auto; padding-bottom: 30px;} .gridr .one_third { max-width: 400px; margin: 0 10px;} .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; margin: 0 16px;} .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;} /* ==================================== Case Study ==================================== */ #wrapper-cases { padding-top: 175px; } .case { background: #fff; } .case .baseline { height: 30px; margin-top: -31px!important; padding-bottom: 30px;} .case .sideitem { right: 5px; bottom: 350px; width: 20px;} .case .title { font-size: 32px; } .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: 400;} .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; position:relative; padding: 10px 50px 100px; max-width:1440px;} .case .cases .inner { position:relative; z-index:101; margin:0 auto; padding: 20px; background: #F7F5F2;} .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; margin-bottom: 30px;*/ } .case .cases .inner img { width: 100%; } .case .cases .headline { padding-top: 50px; } .case .cases .headline .title { text-align: center; font-weight: 400; font-size: 48px; line-height: 100%; letter-spacing: 0%;} .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: 20px; 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 { width: 100%;} .case .cases .case-bg .content { padding: 40px 80px 40px;} .case .cases .case-bg .content li { font-weight: bold; margin-left: 20px; } .case .cases .case-bg.swap_container { padding-bottom: 30px;} .case .cases .case-bg .left img { padding-right: 15px;} .case .cases .case-bg .right img { padding-left: 15px;} .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.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_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: 400; 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; background: #000; 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;}