@charset "utf-8";
/* CSS Document */

/***********************************************
/*ESDlife Digital solutions - general settings*
***********************************************/

head { height: 100%; }
body { width: 100%; margin: 0px; padding: 0px; font-family: 'Noto Sans', sans-serif; font-weight: 400; font-size: 75%; background-position: top center; background: #FFF; background-attachment: fixed; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; min-height: 100%; line-height: 150%; }
:root body { line-height: 100%; }  /* IE9 */
pre { white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ white-space: -pre-wrap; /* Opera 4 - 6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ word-wrap: break-word; /* IE 5.5+ */ font-family: Helvetica, Arial, sans-serif; }
table { empty-cells: show;/*fix blank cell no-border issue*/ }
a:link, a:visited, a:active { color: #036caf; text-decoration: none; }
a:hover { color: #096c86; }
img { border: 0px; display: block; display: inline-block; }
hr { padding: 0px; margin: 0px; color: #adc3ce; height: 0px; }
textarea { resize: none; }
.fl { float: left; }
.fr { float: right; }
.clear { clear: both; display: block; padding: 0 0 20px 0; float: none; }
.clear00 { clear: both; overflow: hidden; float: none; height: 0px; }
.clear10 { clear: both; display: block; padding: 5px 0; float: none; }
.clear50 { clear: both; display: block; padding: 25px 0; float: none; }
.db { display: block; padding: 3px 0px; }
.dn { display: none; }
.center { text-align: center; }
.right { text-align: right; }
/*Quick font colors*/
.c-white { color: #FFF; }
.c-lightgrey { color: #ccc; }
/*Generic link style*/

.grey-actionlink { color: #666; font-size: 1.6em; }
.cClient { cursor: pointer;}
/****************************************
****************Shared elem *************
****************************************/

/****************Header ******************/

#headerContainer { background: url(../images/bg_index_header.png) repeat-x; width: 100%; height: 110px; position: fixed; z-index: 9999; }
#header { margin-left: auto; margin-right: auto; width: 1010px; padding-top: 32px; }
#esdlogo { float: left; }
/**************** Menu ******************/

#mainmenu { float: right; }
#mainmenu ul { list-style: none; padding: 0; margin: 0; padding-top: 30px; }
#mainmenu ul li { float: left; padding-left: 35px; color: #666; }
#mainmenu ul li a { font-size: 1.5em; color: #666; text-decoration: none; padding: 0px 10px 16px 10px; display: block; /*For ie to correctly display border at <a> elem*/ background: transparent url(../images/bg_menu_borderbottom.png) no-repeat -250px 0px; height: 17px; text-shadow: 1px 1px #fff; }
#mainmenu ul li a.current { color: #666; text-decoration: none; background: transparent url(../images/bg_menu_borderbottom.png) no-repeat 0px 0px; }
/****************Footer ******************/

#footerContainer { background: #666 url(../images/bg_footer.jpg) repeat-x; width: 100%; min-height: 300px; }
#footer { width: 1010px; margin-left: auto; margin-right: auto; padding: 40px 0px 30px 0px; }
#footer a {color:#ccc;}
#footer a:hover { text-decoration:underline;}
#footermenu ul { list-style: none; padding: 0; margin: 0; }
#footermenu ul li { float: left; width: 250px; padding-right: 50px; }
#footermenu ul li a { text-decoration: none; color: #FFF; font-size: 1.25em; }
#footermenu ul li ul { width: 180px; padding-left: 10px; overflow: hidden; /*makes the ul container wraps the list*/ border-left: 1px solid #999; margin-top: 15px; }
#footermenu ul li ul li { padding: 0px 0px 10px 0px; }
#footermenu ul li ul li a { text-decoration: none; color: #999; font-size: 1.1em; }
#footermenu ul li.lastone { width: 30px; }
#footermenu .tableHead td { font-size: 1.25em; padding-bottom: 10px;  text-shadow: 1px 0 #000;}
#footermenu .tableHead td a { text-decoration: none; color: #FFF; outline:0; }
#footermenu .tableHead td a:hover { color:#6699cc; text-shadow:none;}
#footermenu .tablein td { padding: 0px 135px 10px 10px; border-left: 1px solid #999; margin-top: 15px; text-decoration: none; color: #999; font-size: 1.1em; }
#footermenu .tablein td a { text-decoration: none; color: #999; #FFF; outline:0;}
#footermenu .tablein td a:hover, div:hover.cClient { color: #6699cc; }
#footermenu td.noborder { border: none; padding-right: 30px; }
/****************************************
**************Index elements*************
****************************************/

/**************** Slider ******************/
#indexSliderContainer { width: 100%; background: #FFF url(../images/bg_index_banner_01.jpg) repeat-x; }
#indexSlider { width: 1250px; margin-left: auto; margin-right: auto; height: 475px; }
/***********Index mid contents ************/

#indexContentContainer { background: url(../images/bg_inner_midgrey.jpg) repeat-x; width: 100%; min-height: 800px; }
#indexContent { padding: 30px 0px; width: 1010px; margin-left: auto; margin-right: auto; }
.headerTitle { margin: 30px auto 20px auto; min-height: 40px; font-size: 2.6em; /*font-weight: 700;*/ width: 1010px; text-align: center; color: #4A4A4B; position: relative; *line-height:100% /*ie6+7*/;
text-shadow: 1px 1px #fff; }
.lt-ie9 .headerTitle { height: 50px; margin: 0px; padding: 30px 0px 30px 0px; }
#indexContent .headerTitle .hrl, #indexContent .headerTitle .hrr { height: 1px; border-bottom: 1px dashed #999; width: 34%; position: absolute; }
#indexContent .headerTitle .hrl { top: 30%; left: 0; }
#indexContent .headerTitle .hrr { top: 30%; right: 0; }
/*cat col*/
#indexCatColl { width: 600px; float: left; }
#indexCatColr { width: 410px; float: left; }
.services-cat { position: relative; }
.services-cat .icon { position: absolute; top: 30px; left: 75px; width: 80px; height: 80px; z-index: 10; cursor: pointer; display:block; }
.services-cat .bubble { position: absolute; background: transparent; opacity: 0.1; top: 50px; left: 100px; width: 50px; height: 50px; }
.services-cat .bubblexpanded { opacity: 1; top: 0px; left: 0px; width: 230px; height: 230px; }
.services-cat .dotted-lines { color: #FFF; font-size: 6em; }
.services-cat #dotted-01 { position: absolute; width: 310px; bottom: 40px; left: 180px; }
.services-cat #dotted-02 { position: absolute; width: 310px; bottom: 40px; left: 180px; }
.services-cat #dotted-03 { position: absolute; width: 310px; top: -10px; left: 180px; }
.services-cat #dotted-04 { position: absolute; width: 310px; top: -10px; left: 180px; }
.service-cat-desc { display: none; overflow: hidden; width: 400px; position: relative; min-height: 400px; }
.service-cat-desc .wrap {  /*For swipe in effect as masking wrapper*/ position: absolute; top: 0; left: 0; width: 400px; z-index: 5; }
.campaign .icon { background: transparent url(../images/ico_cat.png) no-repeat 0 -80px; }
.campaign span.roll_cat_oc { background: transparent url(../images/ico_cat.png) no-repeat 0 0; }
.ecommerce .icon { background: transparent url(../images/ico_cat.png) no-repeat -80px -80px; }
.ecommerce span.roll_cat_ec { background: transparent url(../images/ico_cat.png) no-repeat -80px 0; }
.digitalbranding .icon { background: transparent url(../images/ico_cat.png) no-repeat -160px -80px; }
.digitalbranding span.roll_cat_db { background: transparent url(../images/ico_cat.png) no-repeat -160px 0; }
.mobileapp .icon { background: transparent url(../images/ico_cat.png) no-repeat -240px -80px; }
.mobileapp span.roll_cat_ma { background: transparent url(../images/ico_cat.png) no-repeat -240px 0; }
.services-cat .title { /*Title text of the bubbles on left col*/ font-weight: 400; font-size: 1.65em; line-height: 1.25em; position: absolute; top: 120px; left: 0px; width: 130px; margin: 0px; padding: 10px 50px; z-index: 6; text-align: center; cursor: pointer; }
#indexCatColr .title { font-size: 2.6em; color: #51C4C7; font-weight: 700; padding: 30px 0px; }
#indexCatColr .content { font-size: 1.3em; color: #333; font-weight: 400; padding-bottom: 20px; line-height: 2em; }
#indexCatColl ul { list-style: none; }
#indexCatColl ul li { float: left; width: 240px; height: 240px; }
/*Client logos*/

#clientlogoContainer ul { width: 100%; float: left; margin: 0px auto; margin-left: -10px; padding: 0px; }
#clientlogoContainer li { display: inline-block; float: left; list-style: none; width: 16.5%; height: 100px; margin: 0px; text-align: center; }
/***CSS transform***/
.cardContainer { display: inline-block; text-align: justify; }
.cardContainer:hover .back { transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transition: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.cardContainer:hover .front { transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transition: rotateY(-180deg); -webkit-transform: rotateY(-180deg); }
.card { transition-style: preserve-3d; -moz-transition-style: preserve-3d; -o-transition-style: preserve-3d; -ms-transition-style: preserve-3d; -webkit-transform-style: preserve-3d; perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; -webkit-perspective: 1000; position: relative; width: 110px; height: 50px; }
.back, .front { position: absolute; -webkit-backface-visibility: visible; /*Solution for triggering backface visibility in chrome which don't support this, still in testing*/ backface-visibility: hidden; -moz-backface-visibility: visible; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.5s ease-in; -moz-transition: -moz-transform 0.5s ease-in; -o-transition: -o-transform 0.5s ease-in; -ms-transition: -ms-transform 0.5s ease-in; -webkit-transition: -webkit-transform 0.5s ease-in; width: 100%; height: 100%; padding: 20px; color: #fff; font-weight: bold; /*box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
    border-radius: 4px; */ overflow: hidden; top: 1px; }
.back { transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.front { background: transparent; }
/**********Inner pages**************/
/**********Containers***************/

#innerContentContainer { background: transparent url(../images/bg_inner_midgrey.jpg) repeat-x; width: 100%; min-height: 700px; padding-top: 110px; }
#innerContentContainer2 { background: transparent url(../images/bg_inner_midgrey.jpg) repeat-x; width: 100%; min-height: 700px; padding-top: 110px; }
#innerContent { padding: 30px 0px; width: 1010px; margin-left: auto; margin-right: auto; }
/*inner category filter on WORKS page*/

#blob { position: absolute; top: 0; z-index : 0; background: transparent url(../images/bg_ico_cat.png) no-repeat top center; }
#innerCatFilter { width: 1000px; margin-left: auto; margin-right: auto; position: relative; float: left; }
#innerCatFilter ul { list-style: none; }
#innerCatFilter ul li { float: left; width: 240px; height: 240px; }
#innerCatFilter ul li a { color: #e3e3e3; position: relative; z-index: 2; float: left; }
#grid .item { width: 320px; margin-top: 20px; margin-right: 20px; background: transparent url(../images/bg_portfothumbnail.png) no-repeat; }
#grid .item-details { padding-left: 10px; font-size: 1.2em; }
#grid a:link, a:visited, a:active { color: #000; text-decoration: none; }
/*Slideblock */
.slideblockWrapper { /*Don't use positionL:relative here -> IE 8 won't be able to hide the filtered items */ padding: 12px; width: 288px; height: 192px; margin: 0; overflow: hidden; }
.slideblockWrapper .slideblock ul { margin: 0; padding: 0 0 0 15px; }
.slideblockWrapper .slideblock li { list-style-image: url(../images/li_dot_2.gif); text-align: left; line-height: 100%; }
.slideblockWrapper .slideblock { position: absolute; bottom: 24px;  /*relative to #grid .item*/ *bottom: 31px;    /* IE6+7, doesn't work in IE8/9 as IE7 */
bottom: 31px\0/IE8+9; /* IE8+9  */ left: 12px; display: none; width: 248px; height: 152px; padding: 20px 20px; overflow: hidden; }
:root .slideblock { bottom: 24px; }
.slideblockWrapper .slideblock a { color: #000; }
.slideblockWrapper .slideblockbg-campaign { background: transparent url(../images/bg_porfolio_hover_blue2.png) no-repeat; }
.slideblockWrapper .slideblockbg-ecommerce { background: transparent url(../images/bg_porfolio_hover_purple2.png) no-repeat; }
.slideblockWrapper .slideblockbg-digitalbranding { background: transparent url(../images/bg_porfolio_hover_green2.png) no-repeat; }
.slideblockWrapper .slideblockbg-mobileapp { background: transparent url(../images/bg_porfolio_hover_orange2.png) no-repeat; }
.slideblockWrapper .slideblock .title { font-size: 1.5em; line-height: 100%; font-weight: 700; padding-bottom: 10px; }
/* CSS Document for fall back effects for those non-modern browsers */
/* Card flipper*/

.no-csstransforms3d #clientlogoContainer ul { margin-left: -20px; margin-top: 0px; }
.no-csstransforms3d .front .back { display: none; }
.no-csstransforms3d .card { width: 110px; height: 50px; }
.no-csstransforms3d .front { position: absolute; width: 100%; height: 100%; }
.no-csstransforms3d .front .back { padding-bottom: auto; color: white; background-color: #404040; }
.no-csstransforms3d .front, .back { width: 110px; height: 50px; }
.no-borderradius .services-cat .bubble { /*for detecting png & alpha support targeted for ie8, no relation with borderradius*/ background: #FFF; }
/**********works detail***************/
#detailpage { width: 100%; /*font-family: 'Myriad Pro', Verdana, Geneva, sans-serif; */ }
#detailpage p { margin: 8px 0px 25px 0px; display:inline-block; }
#detailpage .top_nav { width: 1010px; margin: 0 auto; padding:10px 0; font-size: 16px; }
#detailpage .top_nav a.btn_back { line-height: 20px; color: #333; text-decoration:underline;}
#detailpage .work_banner { width: 100%; height: 453px; background: url(../images/detail_bg2.png) repeat-x left top; }
#detailpage .work_banner .banner { width: 1010px; margin: 0 auto; position: relative; }
#detailpage .work_banner .banner .work_title { position: absolute; top: 15px; right: 15px; width: 400px; font-size: 27px; text-align: left; color: #fff; line-height: 100%; text-shadow: 1px 1px #333; }
#detailpage .work_banner .banner .work_title h1 { font-size: 42px; font-weight: normal; line-height: 100%; }
#detailpage .work_description { width: 1010px; margin: 50px auto 100px; padding: 0; overflow: hidden; }
#detailpage .desc_box { width: 680px; float: left; }
#detailpage .desc_box h2 { font-size: 38px; color: #666; text-shadow: 0 1px #fff; text-align: left; line-height: 100%; font-weight: normal; overflow: hidden; padding: 0; margin: 0; }
#detailpage .desc_box p, #detailpage .desc_box li { text-align: left; font-size: 18px; color: #666; font-weight: normal; line-height: 140%; }
#detailpage .desc_box li { list-style: outside disc; line-height: 110%; margin-left: -20px; list-style-image: url(../images/li_dot.gif); }
#detailpage .share_tag { width: 190px; background-color: #DCDCDE; padding: 25px; float: right; color: #3587B8; line-height: 200%; }
#detailpage .share_tag h3 { font-size: 18px; color: #333; line-height: 0%; font-weight: normal; }
#detailpage .share_tag a { float: left; margin-right: 10px; }
#detailpage .share_tag .share_box { width: 52px; height:52px; margin-right: 8px; float: left; }
#detailpage .share_tag .share_box a { outline: 0; }
#detailpage .share_tag span.roll_fb { background: url(../images/ico_share.png) no-repeat left -52px; height: 52px; position: absolute; width: 52px; z-index: 10; }
#detailpage .share_tag span.roll_tt { background: url(../images/ico_share.png) no-repeat -52px -52px; height: 52px; position: absolute; width: 52px; display: block; }
#detailpage .share_tag span.roll_in { background: url(../images/ico_share.png) no-repeat -104px -52px; height: 52px; position: absolute; width: 52px; display: block; }
#detailpage .share_tag .share_fb { background: url(../images/ico_share.png) no-repeat left top; height: 52px; width: 52px; display: block; }
#detailpage .share_tag .share_tt { background: url(../images/ico_share.png) no-repeat -52px top; height: 52px; width: 52px; display: block; }
#detailpage .share_tag .share_in { background: url(../images/ico_share.png) no-repeat -104px top; height: 52px; width: 52px; display: block; }
#detailpage .linkbox { float: left; margin-top: 15px; }
#detailpage .linkbox .linkhome { background: url(../images/btn_website.png) no-repeat left top; height: 34px; float: left; padding-left: 120px; width: 560px; margin-bottom: 15px; }
#detailpage .linkbox .linkhome a { vertical-align: middle; font-size: 15px; text-decoration: underline; padding-top: 10px; float: left; }
#detailpage .linkbox .iphonestore { background: url(../images/store_badges_iphone.png) no-repeat left top; height: 40px; width: 135px; display: block; float: left; margin-right: 10px; }
#detailpage .linkbox .googleplay { background: url(../images/store_badges_google.png) no-repeat left top; height: 40px; width: 135px; display: block; float: left; }
/**********contacts***************/
#contacts { overflow: hidden; width: 1010px; margin: 0px auto 100px; }
#contacts .title { color: black; }
#contacts .map { margin:0 auto 30px; width:1000px; padding-right: 48px; }
#contacts .contactInfo { padding-left: 20px; width:450px; float:left; }
#contacts .contactInfo td { font-size: 1.3em; color: #7B7B7B; line-height: 1.7 }
#contacts .contactForm { width:450px; float:right;}
#contacts .contactForm .formBox { float:left; margin-bottom:5px; display:block;}
#contacts .contactForm  div.title { font-size:14px; color:#7b7b7b; line-height:200%;}
#contacts .contactForm input.email, #contacts .contactForm input.name, #contacts .contactForm textarea.message { border:1px solid #fefefe; background-color:#fff; color:#333; font-size:14px; width:400px; padding:5px; font-family: 'Noto Sans', sans-serif;}
#contacts .contactForm textarea.message { height:80px;}
#contacts .contactForm input[type="submit"], input[type="button"], input[type="reset"] { border:0; background-color:#018fd9; color:#fff; font-size:16px; padding:10px 30px; cursor:pointer;  } 
#contacts .form { margin-top: 60px; color: #7B7B7B; line-height: 1.7 }
#contacts .form label { font-size: 1.3em; }
#contacts input:focus, #contacts textarea:focus, #contactsselect:focus { -webkit-box-shadow: 0 0 3px #007eff; -moz-box-shadow: 0 0 3px #007eff; box-shadow: 0 0 3px #007eff; outline: none; }
/**********about***************/
.test { border: 1px solid #AAA; }
#about { overflow: hidden; width: 100%; min-width: 1010px; margin: 0px auto; height: 2900px; background: url(../images/about/bg_moon_galaxy.jpg) no-repeat #000; background-position: 50% 2200px; position: relative; font-weight: normal; z-index: 10; }
#about #section1 { width: 100%; background: #E3E8EB; text-align: center; position: absolute; top: 0px; height: 800px; z-index: 21; }
.s1Bubble { width: 50%; text-align: center; margin: 0 auto; position: relative; min-height: 287px; min-width: 1010px; position: relative; }
.s1Bubble #s12001 { position: absolute; top: 0; z-index: 10; left: 388px }
.s1Bubble #s12001_a { position: absolute; top: 95px; z-index: 6; left: 443px; }
.s1Bubble #s12010 { position: absolute; top: 9px; z-index: 5; left: 533px; width: 0px; }
.s1content, .s2content { width: 1010px; text-align: center; margin: 0 auto; font-size: 18px; line-height: 150%; color: #666666; padding-bottom: 50px; }
#fix_bg1 { background: url(../images/about/bg_space1.jpg) 50% 0 no-repeat fixed; z-index: 12; height: 700px; top: 800px; position: relative; background-position: 50% 0px; }
#fix_bg2 { background: url(../images/about/bg_space2.jpg) 50% 0 repeat-y fixed; z-index: 13; height: 900px; top: 1300px; position: relative; }
#fix_bg3 { background: url(../images/about/bg_moon.png) 50% 0 no-repeat fixed; z-index: 14; height: 1080px; top: -300px; position: relative; background-position: 50% 3500px; }
#fix_bg3_mobile { background: url(../images/about/bg_moon.png) 50% 0 no-repeat; z-index: 14; height: 1080px; top: -440px; position: relative; background-position: 50% 0px; }
#about #section2 { width: 100%; background: #F0F0F0; text-align: center; position: absolute; top: 800px; height: 800px; z-index: 22; }
.s2Triangle { width: 50%; text-align: center; margin: 0 auto; position: relative; height: 500px; /*overflow:hidden;*/ min-width: 1010px; position: relative; }
.s2Triangle #s2C { position: absolute; top: 280px; left: 384px }
.s2Triangle #s2O { position: absolute; top: 88px; left: 384px }
.s2Triangle #s2V { position: absolute; top: 280px; left: 263px }
.s2Triangle #s2P { position: absolute; top: 280px; left: 505px }
#s1word, #s2word { position: relative; }
#about #section3 { width: 100%; margin: 0px auto; position: absolute; top: 1600px; background: #FEFEFE; height: 650px; padding-top: 50px; z-index: 23; }
#about #section3 #clientlogoContainer { width: 1010px; text-align: center; margin: 0 auto; }
#about #section4 { width: 100%; text-align: center; position: absolute; top: 2700px; z-index: 15; }
#section4 .content { width: 1280px; position: relative; margin: 0 auto; font-size: 16px; line-height: 2; position: relative; z-index: 16; }
#section4 .content #s4word { text-align: left; color: #FFF; width: 420px; position: absolute; left: 550px; top: -140px; }
#section4 .content #s4word .header { font-size: 32px; line-height: 1.5; }
#section4 #spaceman { position: absolute; top: -265px; left: 300px; z-index: 19; animation: flowmove 4s infinite; -webkit-animation: flowmove 4s infinite; /* Safari and Chrome */ }
@keyframes flowmove { 0% {
top:-320px;
}
50% {
top:-290px;
}
100% {
top:-320px;
}
}
@-webkit-keyframes flowmove /* Safari and Chrome */ { 0% {
top:-320px;
}
50% {
top:-290px;
}
100% {
top:-320px;
}
}
/**********service***************/		
#service .content { text-align: center; margin: 0 auto; font-size: 18px; line-height: 150%; color: #666666; }
#service .headerTitle { min-height: 0px; margin: 30px 0px 20px 0px; }
#service .wordindent { margin-left: -18px; }
#service .flower { position: relative; overflow: visible; width: 1000px; height: 860px; margin: 0px auto; }
#service .close { }
#bg_creative { width: 255px; height: 247px; position: absolute; top: 50px; left: 155px; }
#i_creative { width: 155px; height: 152px; position: absolute; top: 100px; left: 212px; cursor: pointer; }
#m_creative { width: 390px; position: absolute; color: #FFF; font-size: 18px; line-height: 1.4; top: 200px; left: 317px; display: none; }
#m_creative_close { width: 15px; height: 15px; position: absolute; top: 160px; left: 640px; display: none; cursor: pointer; }
#bg_digi { width: 308px; height: 197px; position: absolute; top: 100px; left: 420px; }
#i_digi { width: 241px; height: 149px; position: absolute; top: 123px; left: 455px; cursor: pointer; }
#m_digi { width: 570px; position: absolute; color: #FFF; font-size: 18px; line-height: 1.4; top: 190px; left: 201px; display: none; }
#m_digi_close { width: 15px; height: 15px; position: absolute; top: 127px; left: 774px; display: none; cursor: pointer; }
#bg_mobile { width: 300px; height: 175px; position: absolute; top: 307px; left: 245px; }
#i_mobile { width: 239px; height: 86px; position: absolute; top: 345px; left: 266px; cursor: pointer; }
#m_mobile { width: 570px; position: absolute; color: #FFF; font-size: 18px; line-height: 1.4; top: 270px; left: 157px; display: none; }
#m_mobile_close { width: 15px; height: 15px; position: absolute; top: 150px; left: 747px; display: none; cursor: pointer; }
#bg_web { width: 276px; height: 276px; position: absolute; top: 307px; left: 555px; }
#i_web { width: 229px; height: 155px; position: absolute; top: 344px; left: 579px; cursor: pointer; }
#m_web { width: 553px; position: absolute; color: #FFF; font-size: 18px; line-height: 1.3; top: 309px; left: 263px; display: none; }
#m_web_close { width: 15px; height: 15px; position: absolute; top: 270px; left: 741px; display: none; cursor: pointer; }

.qrcode {padding:1px; border-radius:3px; background-color:#fff; width:90px; height:90px;}
.qrcode img {border:0;}

a.contactus {color:#fff; font-size:18px; font-weight:light; text-shadow:0 1px #06334f; text-decoration:none; padding:8px 15px; background-color:#3584b5; border-radius:2px;}
a:hover.contactus { background-color:#fff; color:#3584b5; text-shadow:none;}
/* video */
.videoBox { width:460px; height:259px; position:absolute; left:62px; top:50px;}