@charset "UTF-8";

* {padding: 0; margin: 0;}

body {background-color: #FFF; margin: 0;}

a {text-decoration: none; color: #999; cursor: pointer;}
img {border: 0;}
ul {margin: 0; padding: 0; list-style: none;}
h1, h2, h3, p {font-family: Arial, Helvetica, sans-serif; color: #666; line-height: 1.4em; letter-spacing: 0.1em; text-align: justify;}

h1 {font-size: 21px;} h2 {font-size: 18px;} h3 {font-size: 14px;} p {font-size: 12px; padding: 0 3px 0 0;}

.al-left {float: left;}
.al-right {float: right;}
.al-center {text-align: center;}
.copyright {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFEBC4;
	font-size: 10px;
	line-height: 0px;
	position: relative;
	top: 25px;
	left: 46px;
	}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}


/*      layout          */

#main {width: 1024px; height: 700px; margin: 0 auto; padding-bottom: 20px; font-size: 10px;}
#header {width: 1024px; height: 100px; background: url(../images/logo_header.png) no-repeat; text-align: left;}
#contaner {width: 1024px; height: 540px;}
#footer {width: 1024px; height: 60px; clear: both; background: #A67930;}
#left-side {width: 356px; height: 540px; float: left;}
#right-side{width: 658px; height: 540px; margin-left: 356px; padding-left: 10px; }
#content {width: 1024px; height: 340px;}
.content-col {width: 446px; height: 240px; position: relative; top: 40px; overflow-y: auto; overflow-x: hidden; padding-right: 6px;}
#content-left-s {width: 356px; height: 300px; float: left; position: relative; top: 20px; left: 46px;}
#content-right-b {width: 622px; height: 310px; background: url(../images/bg_line.png) no-repeat; float: right; position: relative; top: 10px; right: 46px;}
#menu_area {width: 1024px; height: 200px;}
#menu_img {width: 356px; height: 200px; float: left; text-align: left;}
#menu {width: 668px; height: 200px; margin-left: 356px;}
#menu-home {width: 658px; min-height: 60px;}
#home_link {width: 252px; height: 45px; position: relative; top: 19px; left: 46px;}

/*          About           */

#about {width: 310px; height: 250px; margin: 40px 0 0 46px; padding: 40px 0 0 0; background: url(../images/title_about.png) no-repeat; clear: both; float: left;}
#fade {width: 658px; height: 480px;}

/*          Contact         */

#contact_link {width: 120px; height: 30px; position: relative; top: 36px; right: 46px;}
#contact {width: 302px; height: 260px; background: url(../images/title_contact.png) no-repeat; float: left; padding: 40px 0 0 0;}
#mail-form {width: 600px; height: 260px; position: relative; left: 20px;}

/*          Q & A           */

#question {width: 466px; height: 260px; background: url(../images/title_question.png) no-repeat; position: relative; top: 20px; left: 46px; float: left;}
#answer {width: 466px; height: 260px; background: url(../images/title_answer.png) no-repeat; position: relative; top: 20px; right: 46px; float: right;}

/*          Scroller & Overlay      */
#item-title {width: 1024px; height: 30px; margin: 50px 0 55px 0;}
#item-image {width: 932px; height: 215px; margin: 0 50px;}

/*          Case            */
.case {background: url(../images/title_case.png) no-repeat; background-position-x: 46px;}
#case-item {width: 932px; height: 200px; position:relative;	top: 110px;}

/*          Product         */

#product {width: 1024px; height: 260px; position: relative; top: 40px; float: left;}
#product-item {width: 932px; height: 200px; position: relative; top: 60px; left: 46px; float: left;}

/*          Menu list       */

#menu ul {list-style: none; text-align: left;}
#menu-home ul {width: 658px; list-style: none; text-align: left;}
#menu li {width: 330px; height: 96px; float: left; margin-bottom: 8px;}
#menu-home li {float: left; margin-right: 88px;}
#menu-home li a {width: 98px; height: 57px; display: block; text-indent: -4000px; font-size: 1px;}
#menu-home li.one a, #menu-home li.two a, #menu-home li.three a, #menu-home li.four a {background: url(../images/menu_home.png) no-repeat;}
#menu-home li.one a { background-position-x: 0px;}
#menu-home li.two a {background-position: -105px 0;}
#menu-home li.three a {background-position: -315px 0;}
#menu-home li.four a {background-position: -210px 0;}
#menu-home li.four {margin: 0;}
#menu-home li.one a:hover{background-position: 0 -57px;}
#menu-home li.two a:hover{background-position: -105px -57px;}
#menu-home li.three a:hover{background-position: -315px -57px;}
#menu-home li.four a:hover {background-position: -210px -57px;}
.left_space {margin-left: 8px;}

/*          Login           */
#box-login {position: absolute; width: 400px; height: 500px; margin: -250px 0 0 -200px; top: 50%; left: 50%;}
#box-login h1, #video-list h1 {background: url(../images/logo_header.png) no-repeat 32px 0px; display: block; padding: 0px; margin: 0px; min-height: 100px; width: 350px;}
#box-login h1 a {font-size: 12px; display: block; height: 90px; padding: 0px; margin: 0px; width: 400px; cursor: pointer; text-indent: -3000px;}
#box-login p {margin-bottom: 20px; left: 50px; top: 40px; position: relative; min-height: 20px; width: 400px; color: #666666; line-height: 2em; font-size: 12px;}
#box-login form {height: 400px; width: 400px; background-repeat: no-repeat; background-image: url(../images/bg_login.png);}
#box-login input{margin: 0px; height: 36px; width: 300px; padding: 4px; color: #666; font-family: Myriad, Verdana; font-size: 28px;}
#box-login button,#box-login button a {width: 80px; height: 30px; margin: 30px auto; display: block; background: url(../images/button.png) no-repeat; border: none; cursor: pointer; color: #333; font-size: 14px;}

/*          Video List      */
#video-list {width: 670px; height: 510px; padding: 10px;}
#video-list h1 {width: 304px; background-position: -46px -26px; float: left;}
#video-list h3 {margin-bottom: 8px;}
#video-list li {margin-bottom: 6px;}
#video-list-left {width: 300px; height: 100px; margin-left: 304px;}
#videoDiv {width: 640px; height: 400px; display: table-cell; text-align: center; vertical-align: middle;}

/*          Form            */

#form {width: 550px; height: 300px; margin-left: 20px;}
#form .text{float:left; width: 112px; text-align:right;}
#form .buttons{text-align: center; margin: 10px 70px;}
#form .button {min-width: 60px; height: 36px; background: url(../images/bg_button.png); color:  #FFF; cursor: pointer; border: none;}
#form p{margin: 5px 0; line-height: normal; letter-spacing: normal;}
input,textarea {border: 1px solid #ccc;}