@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 100%;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    color: #222;
}

/* layout */
.clear {
    clear: both;
}

.fltlt {
    float: left;
}

.fltrt {
    float: right;
}

.none {
    display: none;
}

a {
    color: #0097d4;
    text-decoration: underline;
}

h1 {
    font-size: 32px;
    font-weight: bold;
}

h1 sup {
    font-size: 20px;
    font-weight: bold;
}

h2 {
    font-size: 20px;
    line-height: 26px;
    font-weight: normal;
}

h3 {
    font-size: 16px;
    line-height: 26px;
    font-weight: normal;
}

h4 {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
}

p {
    margin: 20px 0;
    padding: 0;
}

.allcap {
    text-transform: uppercase;
}

.wrap-a {
    width: 1000px;
    margin: 0 auto;
}

.wrap-b {
    width: 1250px;
    margin: 0 auto;
}

.wrap-c {
    width: 1360px;
    margin: 0 auto;
}

.wrap-d {
    width: 1400px;
    margin: 0 auto;
}

.pdtop-60 {
    padding: 60px 0 0 0;
}

.pdbtm-60 {
    padding: 0 0 60px 0;
}

.pdtb-60 {
    padding: 60px 0;
}

.mtop-40 {
    margin: 40px 0 0 0;
}

.mtop-30 {
    margin: 30px 0 0 0;
}

.mtop-20 {
    margin: 20px 0 0 0;
}

.mtop-10 {
    margin: 10px 0 0 0;
}

input, textarea {
    border: 0;
    outline: none;
    background: transparent;
    line-height: 18px;
    width: 100%;
    color: #fff;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
}

input:-webkit-autofill, input:focus:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px #1b2123 inset;
}

input:-moz-autofill, input:focus:-moz-autofill {
    -moz-text-fill-color: #fff;
    -moz-box-shadow: 0 0 0px 1000px #1b2123 inset;
}

input:-o-autofill, input:focus:-o-autofill {
    -o-text-fill-color: #fff;
    -o-box-shadow: 0 0 0px 1000px #1b2123 inset;
}

input:-khtml-autofill, input:focus:-khtml-autofill {
    -khtml-text-fill-color: #fff;
    -khtml-box-shadow: 0 0 0px 1000px #1b2123 inset;
}

textarea {
    resize: none;
    overflow: auto;
    display: block;
    height: 90px;
}

::-webkit-input-placeholder {
    color: #434d53;
    opacity: 1;
}

::-moz-placeholder {
    color: #434d53;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #434d53;
    opacity: 1;
}

:-moz-placeholder {
    color: #434d53;
    opacity: 1;
}

label {
    color: #434d53;
    font-size: 14px;
    line-height: 14px;
}

ul {
    list-style: none;
}

/* main */
#top-panel {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
}

#top-panel.default {
    position: absolute;
    padding: 60px 0 0;
    background: none;
}

#top-panel.fixed {
    position: fixed;
    padding: 15px 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
}

#top-panel.fixed:hover {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#page-intro {
    background: #eaeaea;
    width: 100%;
    height: 790px;
}

#cards-panel {
    position: relative;
    z-index: 1;
}

#logo-panel {
    float: left;
}

#cards-panel {
    padding: 76px 0 0;
}

#changebg-panel {
    width: 100%;
    height: 790px;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    background: #eaeaea url(../images/app_bg.png) no-repeat 50% 0;
}

#changebg-panel.cms-bg {
    background: #dce54a url(../images/cms_bg.png) no-repeat 50% 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#changebg-panel.bespoke-bg {
    background: #007776 url(../images/bespoke_bg.png) no-repeat 50% 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#changebg-panel.partnersolution-bg {
    background: #04131c url(../images/partnersolution_bg.png) no-repeat 50% 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#logo-tw {
    background: transparent url(../images/logo.png) no-repeat 0 0;
    width: 258px;
    height: 16px;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#logo-tw.white {
    background: transparent url(../images/logo_white.png) no-repeat 0 0;
    height: 12px;
    margin: 8px 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#mobile-apps {
    background: transparent url(../images/mobile_app.png) no-repeat 50% 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#cms {
    background: transparent url(../images/cms.png) no-repeat 50% 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#bespoke {
    background: transparent url(../images/bespoke.png) no-repeat 50% 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#partner {
    background: transparent url(../images/partner.png) no-repeat 50% 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.card-wrap {
    float: left;
    width: 260px;
    height: 396px;
}

.app-wrap {
    -moz-transform: rotate(-22deg);
    -webkit-transform: rotate(-22deg);
    -o-transform: rotate(-22deg);
    -ms-transform: rotate(-22deg);
    transform: rotate(-22deg);
    margin: 194px 0 0 81px;
}

.cms-wrap {
    margin: 60px 0 0 60px;
}

.bespoke-wrap {
    margin: 100px 0 0;
}

.partner-wrap {
    margin: 60px 0 0;
}

.btn-close-app, .btn-close-cms, .btn-close-bespoke, .btn-close-app, .btn-close-partnersolution, .btn-close-popup {
    cursor: pointer;
}

#tagline {
    text-align: center;
    margin: 0 0 10px 0;
    display: none;
}

/* navi */
#navi {
    float: right;
}

#navi li {
    float: left;
    padding: 0 15px;
}

#navi li:last-child {
    padding: 0 0 0 15px;
}

#navi li a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
}

/* about */
#page-about {
    background: #fff url(../images/abt_bg_left.png) no-repeat 0 0;
    width: 100%;
    min-height: 400px;
    padding: 0 0 60px 0;
    border-bottom: 1px solid #dedede;
}

#about-panel {
    background: transparent url(../images/abt_bg_right.png) no-repeat 100% 0;
    width: 100%;
    min-height: 400px;
}

#award-panel {
    width: 610px;
    margin: 0 auto;
    text-align: center;
}

.awd-line {
    background: #ededed;
    height: 2px;
    float: left;
    width: 230px;
    margin: 50px 0 0;
}

#award {
    background: transparent url(../images/award.png) no-repeat 50% 0;
    width: 150px;
    height: 108px;
    float: left;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#inovation-msia {
    display: inline-block;
    margin: 10px 0 0 0;
}

#gomobile {
    display: inline-block;
    background: transparent url(../images/gomobile.png) no-repeat 0 0;
    width: 103px;
    height: 29px;
    margin: 0 0 0 10px;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

#about-chart-panel {
    background: transparent url(../images/about_chart.png) no-repeat 50% 0;
    width: 100%;
    min-height: 380px;
    margin: 80px 0 0;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
}

.abt-left {
    float: left;
    width: 670px;
}

.abt-right {
    float: left;
    width: 330px;
}

.icon-wrap {
    width: 55px;
    height: 55px;
}

.icon-about01 {
    background: transparent url(../images/icon_about01.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    float: right;
    margin: 0;
}

.icon-about02 {
    background: transparent url(../images/icon_about02.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    float: right;
}

.icon-about03 {
    background: transparent url(../images/icon_about03.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    float: left;
    margin: 50px 20px 0 20px;
}

.icon-about04 {
    background: transparent url(../images/icon_about04.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    float: left;
    margin: 0 20px 0 0;
}

.abt01-cnt, .abt02-cnt {
    float: left;
    width: 245px;
    margin: 0 5px 0 0;
}

.abt03-cnt {
    float: right;
    width: 235px;
}

.abt04-cnt {
    float: right;
    width: 255px;
}

.abtlft-wrap {
    width: 305px;
}

.abtlft-wrap.mtop02 {
    margin: 150px 0 0;
}

.abtrt-wrap {
    width: 330px;
}

.abtrt-wrap.mtop03 {
    margin: 110px 0 0;
}

.abtrt-wrap.mtop04 {
    margin: 80px 0 0;
}

/* work */
.workdesc-01 {
    width: 700px;
}

.workdesc-02 {
    width: 600px;
}

.work-thumb {
    float: left;
    width: 340px;
    height: 240px;
}

.work-ustore {
    background: transparent url(../images/work_ustore.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.work-digi {
    background: transparent url(../images/work_digi.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.work-sepang {
    background: transparent url(../images/work_sepang.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.work-viking {
    background: transparent url(../images/work_viking.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.work-airasia {
    background: transparent url(../images/work_airasia.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.work-ea {
    background: transparent url(../images/work_ea.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.work-ford {
    background: transparent url(../images/work_ford.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

.work-mahb {
    background: transparent url(../images/work_mahb.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
}

/* clients */
#page-clients {
    background: #aab0ae url(../images/partner_bg.png) no-repeat 50% 0;
    width: 100%;
	    height: 1140px;
	    padding: 20px 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.clt-01 {
	    float: left;
	    width: 434px;
	}

	.clt-02 {
	    float: left;
	    width: 161px;
	}

	.clt-03 {
	    float: left;
	    width: 805px;
            padding-top: 30px;
	}

	#testimonial-panel {
	    padding: 0 70px 0 40px;
	    text-align: center;
	}

	.p-thumb {
	    float: left;
	    width: 160px;
	    height: 130px;
	    opacity: 0.85;
	    margin: 0 1px 1px 0;
	}

	.partner-aws {
	    background: transparent url(../images/partner_aws.png) no-repeat 50% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.partner-wikitude {
	    background: transparent url(../images/partner_wikitude.png) no-repeat 50% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-umobile {
	    background: transparent url(../images/client_umobile.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-airasia {
	    background: transparent url(../images/client_airasia.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-digi {
	    background: transparent url(../images/client_digi.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-celcom {
	    background: transparent url(../images/client_celcom.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-maxis {
	    background: transparent url(../images/client_maxis.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-mahb {
	    background: transparent url(../images/client_mahb.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-sepang {
	    background: transparent url(../images/client_sepang.png) no-repeat 50% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-michelin {
	    background: transparent url(../images/client_michelin.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-ea {
	    background: transparent url(../images/client_ea.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-firefly {
	    background: transparent url(../images/client_firefly.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-groupm {
	    background: transparent url(../images/client_groupm.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-ford {
	    background: transparent url(../images/client_ford.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-mindshare {
	    background: transparent url(../images/client_mindshare.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-mncsaatchi {
	    background: transparent url(../images/client_mncsaatchi.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-shell {
	    background: transparent url(../images/client_shell.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-dentsu {
	    background: transparent url(../images/client_dentsu.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-guinness {
	    background: transparent url(../images/client_guinness.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.client-disneypixar {
	    background: transparent url(../images/client_disneypixar.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	/* custom */
	.partner-aws {
	    margin: 131px 0 132px 0;
	}

	.client-airasia, .client-digi, .client-maxis, .client-mahb, .client-ea, .client-shell, .client-dentsu {
	    margin: 0 162px 1px 0;
	}

	.client-groupm {
	    margin: 0 162px 1px 161px;
	}

	.client-mncsaatchi {
	    margin: 0 1px 1px 161px;
	}

	#testimonial-panel h3 {
	    font-weight: bold;
	    line-height: 20px;
	}

	/* contact */
	#page-contact {
	    background: #1b2123 url(../images/contact_bg.png) no-repeat 100% 0;
	    width: 100%;
	    min-height: 300px;
	    color: #d8d8d8;
	    -webkit-user-select: text;
	    -moz-user-select: text;
	    -ms-user-select: text;
	    user-select: text;
	}

	#page-contact h1 {
	    font-weight: normal;
	}

	#page-contact h1 sup {
	    font-weight: normal;
	    font-size: 14px;
	}

	.ctc-title {
	    position: relative;
	}

	.ctc-title::before {
	    position: absolute;
	    top: 0;
	    left: -40px;
	    content: " ";
	    width: 25px;
	    height: 25px;
	}

	#title-visit::before {
	    background: transparent url(../images/icon_location.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	#title-phone::before {
	    background: transparent url(../images/icon_contact.png) no-repeat 100% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	#tel::before {
	    content: "TEL";
	    margin: 0 30px 0 0;
	}

	#fax::before {
	    content: "FAX";
	    margin: 0 28px 0 0;
	}

	.input-wrap {
	    border-bottom: 1px solid #434d53;
	    padding: 0 20px;
	    margin: 0 0 30px 0;
	    position: relative;
	}

	.input-wrap label {
	    position: absolute;
	    top: -10px;
	    left: 20px;
	}

	.input-control {
	    padding: 10px 0;
	}

	.error {
	    background: transparent url(../images/icon_error_red.png) no-repeat 0 0;
	    width: 20px;
	    height: 20px;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	    position: absolute;
	    bottom: 10px;
	    right: 0;
	}

	.btn {
	    border: 0;
	    outline: none;
	    background: #0097d4;
	    color: #fff;
	    padding: 10px 40px;
	    cursor: pointer;
	}

	.btn-send {
	    float: right;
	}

	.ctc-left {
	    float: left;
	    width: 344px;
	}

	.ctc-right {
	    float: left;
	    width: 650px;
	}

	.form-left {
	    float: left;
	    width: 300px;
	    margin: 0 50px 0 0;
	}

	.form-right {
	    float: left;
	    width: 300px;
	}

	.captcha {
	    padding: 0 0 15px;
	}

	.captcha-pic {
	    height: 60px;
	}

	.icon-refresh {
	    height: 40px;
	}

	/* app */
	.icon-close {
	    background: transparent url(../images/icon_close.png) no-repeat 50% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	    width: 40px;
	    height: 40px;
	    margin: 10px;
	    position: absolute;
	    top: 0;
	    right: 0;
	    z-index: 4;
	}

	.overlay-wrap {
	    width: 50%;
	    float: left;
	    height: 100%;
	}

	.pg-overlay {
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 4;
	    width: 100%;
	    height: 790px;
	}

	#app-panel {
	    width: 100%;
	    height: 790px;
	}

	.app-overlay {
	    background: #ffad08;
	}

	.app-cnt {
	    padding: 75px 180px 0 180px;
	}

	.app-title {
	    background: transparent url(../images/app_title.png) no-repeat 50% 0;
	    width: 184px;
	    height: 177px;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.app-developer {
	    background: transparent url(../images/app_developer.png) no-repeat 50% 0;
	    width: 428px;
	    height: 53px;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	/* cms */
	#cms-panel {
	    width: 100%;
	    height: 790px;
	}

	.cms-overlay {
	    background: #dce54a url(../images/cms_bg02.png) no-repeat 50% 100%;
	}

	.cms-cnt {
	    padding: 0 180px;
	}

	.cms-title {
	    background: transparent url(../images/cms_title.png) no-repeat 50% 0;
	    width: 444px;
	    height: 183px;
	    margin: 80px 0 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	/* bespoke */
	#bespoke-panel {
	    width: 100%;
	    height: 790px;
	    color: #d8d8d8;
	}

	.bespoke-overlay {
	    background: #0c8f8f url(../images/bespoke_bg02.png) no-repeat 0 100%;
	}

	.bespoke-cnt {
	    padding: 75px 180px 0 180px;
	}

	.bespoke-title {
	    background: transparent url(../images/bespoke_title.png) no-repeat 50% 0;
	    width: 132px;
	    height: 173px;
	    margin: 0 auto;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	/* partnersolution */
	#partnersolution-panel {
	    width: 100%;
	    height: 790px;
	    color: #d8d8d8;
	}

	.partnersolution-overlay {
	    background: #405059;
	}

	.partnersolution-cnt {
	    padding: 0 160px;
	}

	.partnersolution-title {
	    background: transparent url(../images/partner_title.png) no-repeat 50% 0;
	    width: 201px;
	    height: 210px;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	#partnersolution-panel a {
	    color: #d8d8d8;
	    text-decoration: underline;
	}

	.aws-tw {
	    background: transparent url(../images/aws.png) no-repeat 0 0;
	    width: 141px;
	    height: 61px;
	    display: inline-block;
	    vertical-align: middle;
	    margin: 0 0 0 10px;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.wikitude-tw {
	    background: transparent url(../images/wikitude.png) no-repeat 0 0;
	    width: 71px;
	    height: 71px;
	    display: inline-block;
	    vertical-align: middle;
	    margin: 0 0 0 10px;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	}

	.aws-txt, .wikitude-txt {
	    display: inline-block;
	}

	/* animation */
	.full-opacity {
	    opacity: 1;
	}

	.semi-opacity {
	    opacity: 0.2;
	}

	#mobile-apps, #bespoke, #partner, #cms {
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}

	#mobile-apps.animate {
	    -moz-transform: translateY(-90px) translateX(50px) rotateZ(0);
	    -webkit-transform: translateY(-90px) translateX(50px) rotateZ(0);
	    -ms-transform: translateY(-90px) translateX(50px) rotateZ(0);
	    -o-transform: translateY(-90px) translateX(50px) rotateZ(0);
	    transform: translateY(-90px) translateX(50px) rotateZ(0);
	}

	#mobile-apps.original {
	    -moz-transform: translateY(0) translateX(0) rotateZ(-22deg);
	    -webkit-transform: translateY(0) translateX(0) rotateZ(-22deg);
	    -ms-transform: translateY(0) translateX(0) rotateZ(-22deg);
	    -o-transform: translateY(0) translateX(0) rotateZ(-22deg);
	    transform: translateY(0) translateX(0) rotateZ(-22deg);
	}

	#bespoke.original, #partner.original, #cms.original {
	    -moz-transform: translateY(0);
	    -webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	    -o-transform: translateY(0);
	    transform: translateY(0);
	}

	#cms.animate1 {
	    -moz-transform: translateY(-20px);
	    -webkit-transform: translateY(-20px);
	    -ms-transform: translateY(-20px);
	    -o-transform: translateY(-20px);
	    transform: translateY(-20px);
	}

	#cms.animate2 {
	    -moz-transform: translateY(40px);
	    -webkit-transform: translateY(40px);
	    -ms-transform: translateY(40px);
	    -o-transform: translateY(40px);
	    transform: translateY(40px);
	}

	#cms.animate3 {
	    -moz-transform: translateY(40px);
	    -webkit-transform: translateY(40px);
	    -ms-transform: translateY(40px);
	    -o-transform: translateY(40px);
	    transform: translateY(40px);
	}

	#bespoke.animate {
	    -moz-transform: translateY(-40px);
	    -webkit-transform: translateY(-40px);
	    -ms-transform: translateY(-40px);
	    -o-transform: translateY(-40px);
	    transform: translateY(-40px);
	}

	#partner.animate1 {
	    -moz-transform: translateY(40px);
	    -webkit-transform: translateY(40px);
	    -ms-transform: translateY(40px);
	    -o-transform: translateY(40px);
	    transform: translateY(40px);
	}

	#partner.animate2 {
	    -moz-transform: translateY(45px);
	    -webkit-transform: translateY(45px);
	    -ms-transform: translateY(45px);
	    -o-transform: translateY(45px);
	    transform: translateY(45px);
	}

	/*popup*/
	.overlay-popup {
	    background: rgba(64, 80, 89, 0.6);
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 100
	}

	.popup {
	    background: #fff;
	    width: 460px;
	    text-align: center;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    margin-right: -50%;
	    -webkit-transform: translate(-50%, -50%);
	    -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	    -o-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
	    -webkit-border-radius: 10px;
	    -moz-border-radius: 10px;
	    border-radius: 10px;
	    z-index: 101
	}

	.popup h3 {
	    padding: 0 60px
	}

	.tw-gonow {
	    background: transparent url(../images/tw_gonow.png) no-repeat 50% 0;
	    width: 460px;
	    height: 243px;
	    -webkit-border-radius: 10px;
	    -moz-border-radius: 10px;
	    border-radius: 10px;
	    cursor: pointer;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%;
	    margin: 10px auto 0 auto
	}

	.popup-header {
	    background: #000;
	    color: #fff;
	    text-transform: uppercase;
	    padding: 20px 0;
	    margin: 0 0 20px 0;
	    -webkit-border-top-left-radius: 10px;
	    -webkit-border-top-right-radius: 10px;
	    -moz-border-radius-topleft: 10px;
	    -moz-border-radius-topright: 10px;
	    border-top-left-radius: 10px;
	    border-top-right-radius: 10px
	}

	.popup .icon-close {
	    background: transparent url(../images/icon_close_white.png) no-repeat 50% 0;
	    -webkit-background-size: auto 100%;
	    -moz-background-size: auto 100%;
	    -o-background-size: auto 100%;
	    background-size: auto 100%
	}

	@media only screen
	and (max-width: 1400px) {
	    .wrap-c {
		width: 1250px;
	    }

	    .wrap-d {
		width: 1250px;
	    }

	    /* work */
	    .work-thumb {
		width: 312px;
		height: 220px;
	    }

	    /* clients */
	    #page-clients {
		padding: 80px 0;
		height: auto;
	    }

	    #testimonial-panel h2.mtop-30 {
		margin: 0;
	    }

	    .clt-01 {
		width: 434px;
	    }

	    .clt-02 {
		width: 136px;
	    }

	    .clt-03 {
		width: 680px;
	    }

	    .p-thumb {
		width: 135px;
		height: 110px;
	    }

	    /* custom */
	    .partner-aws {
		margin: 111px 0 112px 0;
	    }

	    .client-airasia, .client-digi, .client-maxis, .client-mahb, .client-ea, .client-shell, .client-dentsu {
		margin: 0 137px 1px 0;
	    }

	    .client-groupm {
		margin: 0 137px 1px 136px;
	    }

	    .client-mncsaatchi {
		margin: 0 1px 1px 136px;
	    }

	    /*app*/
	    .app-cnt {
		padding: 75px 140px 0px;
	    }

	    .app-developer {
		width: 355px;
		height: 44px;
	    }

	    /*cms*/
	    .cms-cnt {
		padding: 0px 140px;
	    }

	    /*bespoke*/
	    .bespoke-cnt {
		padding: 60px 120px 0px;
	    }

	    .bespoke-overlay {
		-webkit-background-size: auto 20%;
		-moz-background-size: auto 20%;
		-o-background-size: auto 20%;
		background-size: auto 20%;
	    }

	    /* partnersolution */
	    .partnersolution-cnt {
		padding: 0 100px;
	    }
	}

	@media only screen
	and (max-width: 1279px) {
	    body {
		font-size: 13px;
		line-height: 20px;
	    }

	    /*layout*/
	    h1 {
		font-size: 26px;
	    }

	    h1 sup {
		font-size: 16px;
	    }

	    h2 {
		font-size: 16px;
		line-height: 23px;
	    }

	    h3 {
		font-size: 13px;
		line-height: 20px;
	    }

	    h4 {
		font-size: 11px;
		line-height: 16px;
	    }

	    p {
		margin: 20px 0;
		padding: 0;
	    }

	    .wrap-a {
		width: 900px;
	    }

	    .wrap-b, .wrap-c, .wrap-d {
		width: 994px;
	    }

	    input, textarea {
		font-size: 13px;
	    }

	    label {
		font-size: 13px;
		line-height: 13px;
	    }

	    /* main */
	    #top-panel.fixed {
		padding: 18px 0;
	    }

	    #logo-tw {
		width: 194px;
		height: 12px;
		margin: 0 0 0 30px;
	    }

	    #logo-tw.white {
		margin: 4px 0 0;
	    }

	    #page-intro {
		height: 690px;
	    }

	    #changebg-panel {
		height: 690px;
		background: #eaeaea url(../images/app_bg_1024.png) no-repeat 50% 0;
	    }

	    .card-wrap {
		width: 228px;
		height: 347px;
	    }

	    .app-wrap {
		margin: 160px 0px 0px 21px
	    }

	    .cms-wrap {
		margin: 30px 0 0 50px;
	    }

	    .bespoke-wrap {
		margin: 70px 0 0;
	    }

	    .partner-wrap {
		margin: 30px 0 0;
	    }

	    #app-panel {
		height: 690px;
	    }

	    #cms-panel {
		height: 690px;
	    }

	    #bespoke-panel {
		height: 690px;
	    }

	    #partnersolution-panel {
		height: 690px;
	    }

	    /* about */
	    .abt-left {
		width: 620px;
	    }

	    .abt-right {
		width: 280px;
	    }

	    .abtlft-wrap {
		width: 250px;
	    }

	    .abtrt-wrap {
		width: 280px;
	    }

	    .abtrt-wrap.mtop03, .abtrt-wrap.mtop04 {
		margin: 110px 0 0;
	    }

	    .abt01-cnt, .abt02-cnt {
		margin: 0 10px 0 0;
	    }

	    .abt01-cnt, .abt02-cnt, .abt03-cnt {
		width: 195px;
	    }

	    .abt04-cnt {
		width: 215px;
	    }

	    #award {
		width: 120px;
		height: 86px;
	    }

	    #gomobile {
		width: 82px;
		height: 23px;
	    }

	    .icon-wrap {
		width: 44px;
		height: 44px;
	    }

	    /* work */
	    .work-thumb {
		width: 248px;
		height: 175px;
	    }

	    /* clients */
	    #page-clients {
		padding: 80px 0;
		height: auto;
	    }

	    #testimonial-panel {
		padding: 0px 30px 0 0;
	    }

	    .clt-01 {
		width: 304px;
	    }

	    .clt-02 {
		width: 115px;
	    }

	    .clt-03 {
		width: 575px;
	    }

	    .p-thumb {
		width: 114px;
		height: 93px;
	    }

	    /* custom */
	    .partner-aws {
		margin: 94px 0 95px 0;
	    }

	    .client-airasia, .client-digi, .client-maxis, .client-mahb, .client-ea, .client-shell, .client-dentsu {
		margin: 0 116px 1px 0;
	    }

	    .client-groupm {
		margin: 0 116px 1px 115px;
	    }

	    .client-mncsaatchi {
		margin: 0 1px 1px 115px;
	    }

	    /* contact */
	    #page-contact {
		-webkit-background-size: auto 25%;
		-moz-background-size: auto 25%;
		-o-background-size: auto 25%;
		background-size: auto 25%;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
	    }

	    #page-contact h1 sup {
		font-size: 11px;
	    }

	    .ctc-left {
		width: 280px;
	    }

	    .ctc-right {
		width: 620px;
	    }

	    .form-left {
		margin: 0 20px 0 0;
	    }

	    /* app */
	    .icon-close {
		width: 30px;
		height: 30px;
	    }

	    .app-title {
		width: 147px;
		height: 142px;
	    }

	    .app-developer {
		width: 250px;
		height: 31px;
	    }

	    .app-cnt {
		padding: 75px 120px 0px;
	    }

	    /* cms */
	    .cms-title {
		width: 355px;
		height: 146px;
	    }

	    .cms-cnt {
		padding: 0px 100px;
	    }

	    .cms-overlay {
		-webkit-background-size: auto 15%;
		-moz-background-size: auto 15%;
		-o-background-size: auto 15%;
		background-size: auto 15%;
	    }

	    /* bespoke */
	    .bespoke-title {
		width: 106px;
		height: 138px;
	    }

	    .bespoke-cnt {
		padding: 60px 100px 0px;
	    }

	    /* partnersolution */
	    .partnersolution-title {
		width: 161px;
		height: 168px;
	    }

	    .aws-tw {
		width: 113px;
		height: 49px;
	    }

	    .wikitude-tw {
		width: 57px;
		height: 57px;
	    }

	    /*popup*/
	    .popup-header {
		padding: 10px 0;
		margin: 0 0 10px 0
	    }

	    .popup .icon-close {
		margin: 6px
	    }
	}

	@media only screen
	and (max-width: 1023px) {
	    /* layout */
	    .wrap-a, .wrap-b, .wrap-c, .wrap-d {
		width: 760px;
	    }

	    .pdtop-60 {
		padding: 36px 0 0 0;
	    }

	    .pdbtm-60 {
		padding: 0 0 36px 0;
	    }

	    .pdtb-60 {
		padding: 36px 0;
	    }

	    .mtop-40 {
		margin: 24px 0 0 0;
	    }

	    .mtop-30 {
		margin: 18px 0 0 0;
	    }

	    .mtop-20 {
		margin: 12px 0 0 0;
	    }

	    .mtop-10 {
		margin: 6px 0 0 0;
	    }

	    p {
		margin: 12px 0;
		padding: 0;
	    }

	    /* main */
	    #top-panel.default {
		position: fixed;
		padding: 15px 0;
		background: rgb(0, 0, 0);
		background: rgba(0, 0, 0, 1);
	    }

	    #top-panel.fixed {
		background: rgb(0, 0, 0);
		background: rgba(0, 0, 0, 1);
	    }

	    #logo-tw {
		background: transparent url(../images/logo_white.png) no-repeat 0 0;
		height: 12px;
		margin: 4px 0 0;
		-webkit-background-size: auto 100%;
		-moz-background-size: auto 100%;
		-o-background-size: auto 100%;
		background-size: auto 100%;
	    }

	    #page-intro {
		height: 490px;
	    }

	    #changebg-panel {
		height: 490px;
		background: #eaeaea url(../images/app_bg_800.png) no-repeat 50% 0;
	    }

	    #changebg-panel.cms-bg {
		background: #eaeaea url(../images/app_bg_800.png) no-repeat 50% 0;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
		background-size: auto;
	    }

	    #changebg-panel.bespoke-bg {
		background: #eaeaea url(../images/app_bg_800.png) no-repeat 50% 0;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
		background-size: auto;
	    }

	    #changebg-panel.partnersolution-bg {
		background: #eaeaea url(../images/app_bg_800.png) no-repeat 50% 0;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
		background-size: auto;
	    }

	    .card-wrap {
		width: 168px;
		height: 256px;
	    }

	    .app-wrap {
		margin: 95px 0 0 31px;
	    }

	    .cms-wrap {
		margin: 20px 0 0 40px;
	    }

	    .bespoke-wrap {
		margin: 40px 0 0;
	    }

	    .partner-wrap {
		margin: 20px 0 0;
	    }

	    #app-panel {
		height: 490px;
	    }

	    #cms-panel {
		height: 490px;
	    }

	    #bespoke-panel {
		height: 490px;
	    }

	    #partnersolution-panel {
		height: 490px;
	    }

	    /* navi */
	    #navi.none {
		display: block;
	    }

	    /* about */
	    #page-about, #about-panel {
		-webkit-background-size: auto 75%;
		-moz-background-size: auto 75%;
		-o-background-size: auto 75%;
		background-size: auto 75%;
	    }

	    #page-about {
		padding: 0px 0px 40px;
	    }

	    #about-chart-panel {
		-webkit-background-size: auto 70%;
		-moz-background-size: auto 70%;
		-o-background-size: auto 70%;
		background-size: auto 70%;
		min-height: 250px;
		margin: 40px 0 0;
	    }

	    .abt-left {
		width: 490px;
	    }

	    .abt-right {
		width: 270px;
	    }

	    .abtrt-wrap {
		width: 270px;
	    }

	    .abtlft-wrap {
		width: 250px;
	    }

	    .abtlft-wrap.mtop02 {
		margin: 80px 0 0;
	    }

	    .abtrt-wrap.mtop03 {
		margin: 75px 0 0;
	    }

	    .abtrt-wrap.mtop04 {
		margin: 40px 0 0;
	    }

	    .abt01-cnt {
		width: 200px;
	    }

	    .abt02-cnt {
		width: 205px;
	    }

	    .abt03-cnt {
		width: 205px;
	    }

	    .abt04-cnt {
		width: 225px;
	    }

	    .icon-about03 {
		margin: 40px 10px 0 20px;
	    }

	    .icon-about04 {
		margin: 0 10px 0 0;
	    }

	    #award-panel {
		width: 550px;
	    }

	    #award {
		width: 90px;
		height: 65px;
	    }

	    #gomobile {
		width: 62px;
		height: 17px;
	    }

	    .icon-wrap {
		width: 33px;
		height: 33px;
	    }

	    /* work */
	    .work-thumb {
		width: 190px;
		height: 134px;
	    }

	    /* clients */
	    #page-clients {
		padding: 40px 0;
	    }

	    #testimonial-panel {
		padding: 0 20px;
	    }

	    .clt-01 {
		width: 380px;
	    }

	    .clt-02 {
		display: none;
	    }

	    .clt-03 {
		width: 380px;
	    }

	    .p-thumb {
		width: 95px;
		height: 95px;
		margin: 0;
	    }

	    /* custom */
	    .partner-aws.none, .partner-wikitude.none {
		display: inline-block;
	    }

	    .partner-aws, .client-airasia, .client-digi, .client-maxis, .client-mahb, .client-ea, .client-shell, .client-dentsu, .client-groupm, .client-mncsaatchi {
		margin: 0;
	    }

	    /* contact */
	    .ctc-left {
		width: 270px;
		padding: 0 0 0 10px;
	    }

	    .ctc-right {
		width: 480px;
	    }

	    #title-visit::before, #title-phone::before {
		-webkit-background-size: auto 80%;
		-moz-background-size: auto 80%;
		-o-background-size: auto 80%;
		background-size: auto 80%;
	    }

	    .ctc-title::before {
		left: -30px;
		top: 2px;
	    }

	    .form-left {
		width: 43%;
		margin: 10px 4% 0 0;
	    }

	    .form-right {
		width: 43%;
		margin: 10px 0 0;
	    }

	    .captcha-pic {
		height: 44px;
	    }

	    /* app */
	    .icon-close {
		width: 24px;
		height: 24px;
	    }

	    .app-title {
		width: 110px;
		height: 106px;
	    }

	    .app-cnt {
		padding: 40px 40px 0px;
	    }

	    /* cms */
	    .cms-title {
		width: 266px;
		height: 110px;
		margin: 20px 0 0;
	    }

	    .cms-cnt {
		padding: 0px 40px;
	    }

	    /* bespoke */
	    .bespoke-title {
		width: 79px;
		height: 104px;
	    }

	    .bespoke-cnt {
		padding: 20px 40px 0;
	    }

	    .bespoke-overlay {
		background: #0C8F8F;
	    }

	    /* partnersolution */
	    .partnersolution-title {
		width: 121px;
		height: 126px;
	    }

	    .aws-tw {
		width: 85px;
		height: 37px;
	    }

	    .wikitude-tw {
		width: 43px;
		height: 43px;
	    }

	    .partnersolution-cnt {
		padding: 0 20px;
	    }

	    /* animation */
	    #mobile-apps.animate {
		-moz-transform: translateY(0) translateX(0) rotateZ(-22deg);
		-webkit-transform: translateY(0) translateX(0) rotateZ(-22deg);
		-ms-transform: translateY(0) translateX(0) rotateZ(-22deg);
		-o-transform: translateY(0) translateX(0) rotateZ(-22deg);
		transform: translateY(0) translateX(0) rotateZ(-22deg);
	    }

	    #bespoke.original, #partner.original, #cms.original, #cms.animate1, #cms.animate2, #cms.animate3, #bespoke.animate, #partner.animate1, #partner.animate2 {
		-moz-transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	    }
	}

	@media only screen
	and (max-width: 799px) {
	    body {
		font-size: 13px;
		line-height: 19px
	    }

	    h1 {
		font-size: 18px;
	    }

	    h1 sup {
		font-size: 14px;
	    }

	    h2 {
		font-size: 14px;
		line-height: 20px;
	    }

	    h3 {
		font-size: 13px;
		line-height: 19px;
	    }

	    h4 {
		font-size: 12px;
		line-height: 18px;
	    }

	    /* layout */
	    .wrap-a, .wrap-b, .wrap-c, .wrap-d {
		width: 450px;
	    }

	    .pdtop-60 {
		padding: 30px 0 0 0;
	    }

	    .pdbtm-60 {
		padding: 0 0 30px 0;
	    }

	    .pdtb-60 {
		padding: 30px 0;
	    }

	    .mtop-40 {
		margin: 20px 0 0 0;
	    }

	    .mtop-30 {
		margin: 15px 0 0 0;
	    }

	    .mtop-20 {
		margin: 10px 0 0 0;
	    }

	    .mtop-10 {
		margin: 5px 0 0 0;
	    }

	    p {
		margin: 10px 0;
		padding: 0;
	    }

	    /* main */
	    #logo-tw {
		height: 8px;
		margin: 0;
	    }

	    #logo-tw.white {
		height: 8px;
		margin: 0;
	    }

	    #top-panel.fixed {
		padding: 15px 0;
	    }

	    #page-intro {
		height: 570px;
	    }

	    #changebg-panel {
		height: 570px;
		background: #eaeaea url(../images/app_bg_480.png) no-repeat 50% 0;
		-webkit-background-size: 100%;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%;
	    }

	    #changebg-panel.cms-bg {
		background: #eaeaea url(../images/app_bg_480.png) no-repeat 50% 0;
		-webkit-background-size: 100%;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%;
	    }

	    #changebg-panel.bespoke-bg {
		background: #eaeaea url(../images/app_bg_480.png) no-repeat 50% 0;
		-webkit-background-size: 100%;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%;
	    }

	    #changebg-panel.partnersolution-bg {
		background: #eaeaea url(../images/app_bg_480.png) no-repeat 50% 0;
		-webkit-background-size: 100%;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%;
	    }

	    #cards-panel {
		padding: 50px 0 0;
	    }

	    .card-wrap {
		width: 160px;
		height: 238px;
	    }

	    .app-wrap {
		-moz-transform: rotate(0);
		-webkit-transform: rotate(0);
		-o-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
		margin: 0 0 0 65px;
	    }

	    .cms-wrap {
		margin: 0;
	    }

	    .bespoke-wrap {
		margin: 0 0 0 65px;
	    }

	    .partner-wrap {
		margin: 0;
	    }

	    #app-panel {
		height: 570px;
	    }

	    #cms-panel {
		height: 570px;
	    }

	    #bespoke-panel {
		height: 570px;
	    }

	    #partnersolution-panel {
		height: 570px;
	    }

	    .overlay-wrap {
		width: 100%
	    }

	    .overlay-wrap.btn-close-app, .overlay-wrap.btn-close-bespoke, .overlay-wrap.btn-close-cms, .overlay-wrap.btn-close-partnersolution {
		display: none;
	    }

	    #tagline {
		display: block;
	    }

	    /* navi */
	    #navi.none, #navi {
		display: none;
	    }

	    /* about */
	    #page-about, #about-panel, #about-chart-panel {
		background: none;
	    }

	    #about-chart-panel {
		margin: 20px 0 0;
		min-height: 100px;
	    }

	    #award-panel {
		width: 450px;
	    }

	    .awd-line {
		width: 180px;
		margin: 30px 0 0;
	    }

	    .abt-left, .abt-right, .abtlft-wrap, .abtrt-wrap {
		width: 100%;
	    }

	    .abt01-cnt, .abt02-cnt {
		float: right;
		width: 90%;
		margin: 0;
	    }

	    .icon-about01, .icon-about02 {
		float: left;
		margin: 4px 0 0;
	    }

	    .icon-about03, .icon-about04 {
		margin: 0;
	    }

	    .abt03-cnt, .abt04-cnt {
		width: 90%;
	    }

	    .abtlft-wrap.mtop02, .abtrt-wrap.mtop03, .abtrt-wrap.mtop04 {
		margin: 20px 0 0;
	    }

	    .icon-wrap {
		width: 27px;
		height: 27px;
	    }

	    /* work */
	    .workdesc-01, .workdesc-02 {
		width: 100%;
	    }

	    .work-thumb {
		width: 160px;
		height: 113px;
	    }

	    .work-ustore, .work-sepang, .work-airasia, .work-ford {
		margin: 0 0 0 80px;
	    }

	    /* client */
	    .clt-01 {
		float: none;
		width: 100%;
	    }

	    .clt-03 {
        width: 320px;
        float: none;
        margin: 40px auto;
    }

    .p-thumb {
        width: 80px;
        height: 65px;
    }

    /* contact */
    #page-contact {
        background: #1B2123;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    .ctc-left, .ctc-right {
        float: none;
    }

    .ctc-left {
        width: 95%;
        padding: 0 0 0 5%;
    }

    .ctc-right {
        margin: 40px 0 0;
        width: 100%;
    }

    .form-left {
        width: 100%;
        margin: 10px 0 0;
    }

    .form-right {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .btn-send {
        float: none;
    }

    /* animation */
    #mobile-apps.animate, #mobile-apps.original {
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
}

@media only screen
and (max-width: 479px) {
    /* layout */
    .wrap-a {
        width: 300px;
    }

    .wrap-b, .wrap-c, .wrap-d {
        width: 320px;
    }

    /* main */
    .app-wrap, .cms-wrap, .bespoke-wrap, .partner-wrap {
        margin: 0;
    }

    /* about */
    #award-panel {
        width: 300px;
    }

    .awd-line {
        width: 105px;
    }

    .abt01-cnt, .abt02-cnt, .abt03-cnt, .abt04-cnt {
        width: 85%;
    }

    /* work */
    .work-ustore, .work-sepang, .work-airasia, .work-ford {
        margin: 0;
    }

    #page-work .wrap-c.pdbtm-60 {
        padding: 0;
    }

    /* contact */
    .ctc-left {
        width: 90%;
        padding: 0 0 0 10%;
    }

    /*popup*/
    .popup {
        width: 340px;
    }

    .popup h3 {
        padding: 0 30px
    }

    .tw-gonow {
        width: 340px;
        height: 180px
    }
}

@media only screen
and (max-width: 360px) {
    /*popup*/
    .popup {
        width: 320px;
	}
	
	.modal {
        width: 320px;
    }

    .tw-gonow {
        width: 320px;
        height: 170px
    }
}

@media only screen
and (max-width: 320px) {
    /*popup*/
    .popup {
        width: 300px;
    }

	.modal {
        width: 300px;
    }
    .tw-gonow {
        width: 300px;
        height: 160px
    }
}

@media only screen
and (max-width: 319px) {
    body {
        display: none
    }
}

.modal {
	position: fixed;
	overflow-y: auto;    
    overflow-x: auto;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: scale(1.1);
	padding-top: 10px;
	transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
	z-index: 200;
}
.modal-content {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 1rem 1.5rem;
	width: 80%;
	height: auto
	border-radius: 0.5rem;
}
.close-button {
	float: right;
	width: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	cursor: pointer;
	border-radius: 0.25rem;
	background-color: lightgray;
}
.close-button:hover {
	background-color: darkgray;
}
.show-modal {
	opacity: 1;
	visibility: visible;
	transform: scale(1.0);
	transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}