@charset "utf-8"; /*********** responsive *********/ @media screen and (min-width: 769px){ /****** img **** img{ max-width: 100%; height: auto; width :auto; }*/ /****** siteCommon ******/ .siteCommon .wrapper{width:950px;} /****** fb_like_box ******/ .fbbox_top{ top: 11px; margin: 22px 12px 20px 15px; } @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .fbbox_top{ top: 16px !important; } } /****** visual ******/ .visualBox{ position:relative; height:485px; } .bgstretcher, .bgstretcher ul, .bgstretcher ul li{ position:absolute; top:0; left:0; } .bgstretcher{ background:black; overflow:hidden; width:100%; position:fixed; z-index:1; _position:absolute; /*IE6 doesn't support fixed positioning*/ top:0; left:0; } .visualBox #slideNav ul{ padding-top:495px; text-align:center; } .visualBox #slideNav ul li{ display:inline-block; /display:inline; /zoom:1; width:12px; height:12px; margin:0 9px; text-indent:-9999px; background:url(../images/top/list_off.png) center no-repeat; cursor:pointer; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transition:opacity .3s ease; -moz-transition:-moz-opacity .3s ease; -o-transition:filter .3s ease; transition:opacity .3s ease; } .visualBox #slideNav ul li a{ display:block; width:12px; height:12px; } .visualBox #slideNav ul li:hover{ filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5; } .visualBox #slideNav ul li.showPage{background:url(../images/top/list_on.png) center no-repeat;} /* copy */ .visualBox .introBox{ position:absolute; width:100%; height:485px; top:0; left:0; } .visualBox .introBox .copyBox{ width:950px; margin:205px auto 0; } .visualBox .introBox .copyBox h1{ text-indent:-100%; height:0; } /****** mainContent ******/ .mainContent{ width:990px; margin:26px auto 0; text-align:center; } .mainContent .menu{ display:inline-block; /display:inline; /zoom:1; margin:22px 15px 10px; } .mainContent .menu a figure{ line-height:0; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transition:opacity .5s ease; -moz-transition:-moz-opacity .5s ease; -o-transition:filter .5s ease; transition:opacity .5s ease; } .mainContent .menu a:hover figure{ filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5; } .mainContent .menu a h1{ padding:12px 0; background-color:#f0f0f0; -webkit-transition:background-color .5s ease; -moz-transition:background-color .5s ease; -o-transition:background-color .5s ease; transition:background-color .5s ease; font-size:14px; text-align:center; } .mainContent .menu a:hover h1{background-color:#fcfcfc;} /****** footer ******/ footer{margin-top:30px;} footer .footerProducts{ background:#f0f0f0; } .menu01{ display:inline-block; /display:inline; /zoom:1; margin:22px 15px 10px; } /* footerValue */ footer .footerValue{ width:950px; height:162px; margin:0 auto; } /* image */ #image{ width:300px; height:162px; overflow:hidden; } footer .image{ float:left; width:300px; height:162px; list-style:none; overflow:hidden; position:relative; } footer .image li{ width:300px; height:162px; display:inline; float:left; } /* bana */ footer .bana{ float:right; width:620px; } footer .serviceBana1, footer .serviceBana2{ padding-top:22px; background:#f0f0f0; } footer .serviceBana1 ul, footer .serviceBana2 ul{ margin-top:8px; overflow:hidden; } footer .serviceBana1 li{ float:right; margin-left:44px; } footer .serviceBana2 li{ float:right; margin-left:44px; } footer .serviceBana1 li:last-child, footer .serviceBana2 li:last-child{ margin-left:0; } footer .serviceBana1 li a, footer .serviceBana2 li a{ filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -webkit-transition:opacity .5s ease; -moz-transition:-moz-opacity .5s ease; -o-transition:filter .5s ease; transition:opacity .5s ease; } footer .serviceBana1 li a:hover, footer .serviceBana2 li a:hover{ filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5; } footer .footerMenu{ width:950px; height:100px; margin:15px auto 0; } footer .menuLeft{ margin:20px 0 0 20px; width:160px; float:left; display:block; border-right:solid 1px #7e7e7e; } footer .menuJobs{ margin:20px 0 0 20px; width:250px; float:left; display:block; border-right:solid 1px #7e7e7e; } footer .menuRight{ margin:20px 0 0 20px; width:190px; float:left; display:block; } footer .menuLeft ul li a, footer .menuJobs ul li a, footer .menuRight ul li a{ color:#7e7e7e; font-size:15px; line-height:26px; } footer .menuLeft ul li a:hover, footer .menuJobs ul li a:hover, footer .menuRight ul li a:hover{ color:#fff; } footer .recruit{ color:#7e7e7e; font-size:13px; line-height:20px; } footer span:hover{ color:#fff; } /* fade slider */ .slides { display:none; height:490px; margin:60px auto 0; overflow:hidden; position:relative; } .slides ul { list-style:none; position:relative; } .slides ul li img{ width:100vw; } #copy img{ width:100%; position: relative; top: 140px; left: 28%; } /* keyframes #anim_slides */ @-webkit-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:1; } 40% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:1; } 40% { opacity:0; } 100% { opacity:0; } } .slides ul li { opacity:0; position:absolute; top:0; /* css3 animation */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 15.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 15.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) section { -webkit-animation-delay: 5.0s; -moz-animation-delay: 5.0s; } .slides ul li:nth-child(3), .slides ul li:nth-child(3) section { -webkit-animation-delay: 10.0s; -moz-animation-delay: 10.0s; } .slides ul li:nth-child(1), .slides ul li:nth-child(1) section { -webkit-animation-delay: 0.0s; -moz-animation-delay: 0.0s; } .slides ul li img { display:block; } /* keyframes #anim_titles */ @-webkit-keyframes anim_titles { 0% { left:10%; opacity:1; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:10%; opacity:1; } 100% { left:10%; opacity:1; } } @-moz-keyframes anim_titles { 0% { left:10%; opacity:1; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:10%; opacity:1; } 100% { left:10%; opacity:1; } } .slides ul li section { /*background-color:#000000;*/ /*border-radius:10px 10px 10px 10px;*/ /*box-shadow:0 0 5px #FFFFFF inset;*/ /*color:#FFFFFF;*/ /*font-size:26px;*/ /*left:10%;*/ margin:0 auto; padding:0px; position:absolute; top:10%; /*width:200px;*/ /* css3 animation */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 15.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 15.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } }