@charset "UTF-8";

.h500 {
	height: 500px;
}

/*Common*/
* html div#container{
    height:100%;
}

div#container{
	width: 100%;
	position:relative;
	min-height: 100%;
	float: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

body > #container{
    height:auto;
}

html{
	height:100%;
}

body{
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust:none;
	text-align:justify;
	text-justify:distribute;
	font-family: Arial, Helvetica, sans-serif;
	height:100%;
	background-color: #FFF;
	color: #555;
	font-size: 1em;
	font-weight: normal;
	background-image:url(../images/bg_top.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	word-break:break-all;
}

a {
	outline:none;
}

a img {
    border-style:none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

#container{
    height:100%;
    min-height:100%;
    width:100%;
}

div#main{
	padding-bottom:170px;
	float: none;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	height: auto;
}

#contents{
	margin-right: auto;
	margin-left: auto;
	clear: both;
	float: none;
	height: 800px;
	width: 960px;
	padding-bottom: 10px;
	padding-top: 20px;
}

.area{
	clear: both;
	float: left;
	height: auto;
	width: 960px;
}

.area h2 {
	font-size: 1.6em;
	color: #141;
	padding-bottom: 25px;
	padding-top: 5px;
}

.border_b_gr {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}

.border_r_gr {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
}

.bt_down a {
	width: 50px;
	float: none;
	height: 31px;
	background-image: url(../images/bt_down.png);
	background-image: url(../images/ie8/bt_down.png)\9; /* IE8 */
	background-size:50px 59px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	overflow: hidden;
	text-align: left;
	display: block;
	font-weight: bold;
	text-indent: -9999px;
	clear: both;
}

.bt_down a:focus,
.bt_down a:hover {
	background-image: url(../images/bt_down.png);
	background-image: url(../images/ie8/bt_down.png)\9; /* IE8 */
	background-size:50px 59px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -30px;
}

.bt_down a:active  {
	background-image: url(../images/bt_down.png);
	background-image: url(../images/ie8/bt_down.png)\9; /* IE8 */
	background-size:50px 59px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -28px;
}

.bt_up a {
	width: 50px;
	float: none;
	height: 31px;
	background-image: url(../images/bt_up.png);
	background-image: url(../images/ie8/bt_up.png)\9; /* IE8 */
	background-size:50px 59px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px 2px;
	overflow: hidden;
	text-align: left;
	display: block;
	font-weight: bold;
	text-indent: -9999px;
	clear: both;
}

.bt_up a:focus,
.bt_up a:hover {
	background-image: url(../images/bt_up.png);
	background-image: url(../images/ie8/bt_up.png)\9; /* IE8 */
	background-size:50px 59px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -30px;
}

.bt_up a:active  {
	background-image: url(../images/bt_up.png);
	background-image: url(../images/ie8/bt_up.png)\9; /* IE8 */
	background-size:50px 59px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -32px;
}


/*Header*/
#hd {
	position:relative;
	height: 130px;
	width: 960px;
	float: none;
	clear: both;
	display: block;
}

#hd .box_left {
	clear: none;
	float: left;
	height: auto;
	width: 400px;
}

#hd .box_left h1 a {
	background-image: url(../images/name.png);
	background-image: url(../images/ie8/name.png)\9; /* IE8 */
	background-size:336px 52px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	text-indent: -9999px;
	display: block;
	clear: both;
	float: left;
	height: 52px;
	width: 336px;
	padding-bottom: 8px;
	margin-top: 20px;
}

#hd .box_left h4 {
	background-image: url(../images/ti_quality.png);
	background-image: url(../images/ie8/ti_quality.png)\9; /* IE8 */
	background-size:166px 16px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	text-indent: -9999px;
	display: block;
	clear: both;
	float: left;
	height: 16px;
	width: 166px;
}

#hd .box_right {
	clear: none;
	float: right;
	height: auto;
	width: 345px;
}

#hd .box_right h2 {
	background-image: url(../images/logo.png);
	background-image: url(../images/ie8/logo.png)\9; /* IE8 */
	background-size:129px 59px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	text-indent: -9999px;
	display: block;
	clear: both;
	float: right;
	height: 59px;
	width: 129px;
	margin-bottom: 15px;
	overflow: hidden;
	margin-right: 12px;
}


/*Navi*/
#navi {
	float: left;
	height: auto;
	width: 345px;
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
	text-align:right;
}

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#example-one {
	list-style: none;
	position: relative;
	width: 345px;
	height: auto;
	padding-top: 0px;
	overflow: hidden;
}

#example-one li {
	display: inline;
	float: left
}

#magic-line {
	position: absolute;
	right: 0;
	width: 57px;
	height: 3px;
	top: 57px;
	background-image: url(../images/pointer.png);
	background-image: url(../images/ie8/pointer.png)\9; /* IE8 */
	background-size:57px 3px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
}

ul li.bt_nav1 a{
	float: left;
	width: 57px;
	height: 60px;
	background-image: url(../images/nav1.png);
	background-image: url(../images/ie8/nav1.png)\9; /* IE8 */
	background-size:57px 50px,100% 100%;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
}

ul li.bt_nav2 a{
	width: 57px;
	float: left;
	height: 60px;
	background-image: url(../images/nav2.png);
	background-image: url(../images/ie8/nav2.png)\9; /* IE8 */
	background-size:57px 50px,100% 100%;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
}

ul li.bt_nav3 a{
	width: 57px;
	float: left;
	height: 60px;
	background-image: url(../images/nav3.png);
	background-image: url(../images/ie8/nav3.png)\9; /* IE8 */
	background-size:57px 50px,100% 100%;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
}

ul li.bt_nav4 a{
	width: 57px;
	float: left;
	height: 60px;
	background-image: url(../images/nav4.png);
	background-image: url(../images/ie8/nav4.png)\9; /* IE8 */
	background-size:57px 50px,100% 100%;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
}

ul li.bt_nav5 a{
	width: 57px;
	float: left;
	height: 60px;
	background-image: url(../images/nav5.png);
	background-image: url(../images/ie8/nav5.png)\9; /* IE8 */
	background-size:57px 50px,100% 100%;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
}


/*Footer*/
#ft {
	position:absolute;
	bottom:0px;
	height: 80px;
	width: 100%;
	float: none;
	clear: both;
	background-image: url(../images/bg_ft.jpg);
	background-image: url(../images/ie8/bg_ft.jpg)\9; /* IE8 */
	background-size:366px 250px,100% 100%;
	background-repeat: repeat-x;
	background-position: left top;
	padding-top: 90px;
}

#ft_area {
	clear: both;
	float: none;
	height: 60px;
	margin-right: auto;
	margin-left: auto;
	width: 960px;
	font-size: 0.75em;
	line-height: 1.5em;
	padding-top: 5px;
	color: #FFF;
	word-spacing: 0.1em;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}

#ft_area .ft_logo {
	background-image: url(../images/logo_ft.png);
	background-image: url(../images/ie8/logo_ft.png)\9; /* IE8 */
	background-size:120px 55px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	clear: none;
	float: left;
	height: 55px;
	width: 120px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin-right: 15px;
	margin-top: 5px;
}

#ft_area .company_info {
	clear: none;
	float: left;
	height: auto;
	width: 400px;
	padding-top: 4px;
}

#ft_area .company_info h3 {
	font-weight: bold;
	font-size: 14px;
}

#ft_area address {
	font-style: normal;
}

#ft_area p {
	margin-top: 20px;
	text-align: right;
	clear: none;
	float: right;
}

#ft_area a:link{
	color: #FFF;
	text-decoration: none;
}

#ft_area a:visited{
	color: #FFF;
	text-decoration: none;
}

#ft_area a:focus,
#ft_area a:hover{
	color: #FFF;
	text-decoration: underline;	
}


/*Top*/
.top_left{
	clear: none;
	float: left;
	height: auto;
	width: 560px;
}

.top_left h2{
	font-size: 1.6em;
	color: #141;
	padding-bottom: 20px;
}

.top_left li{
	float:left;
	padding-bottom: 20px;
}

.top_left p{
	font-size: 1em;
	line-height: 1.9em;
	color: #030;
	padding-bottom: 20px;
}

.top_left li a {
	width: 183px;
	float: left;
	height: 38px;
	background-image: url(../images/bt1.png);
	background-image: url(../images/ie8/bt1.png)\9; /* IE8 */
	background-size:183px 115px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	overflow: hidden;
	text-align: center;
	display: block;
	color: #FFF;
	font-size: 15px;
	text-decoration: none;
	line-height: 37px;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
	font-weight: bold;
}

.top_left li a:focus,
.top_left li a:hover {
	background-image: url(../images/bt1.png);
	background-image: url(../images/ie8/bt1.png)\9; /* IE8 */
	background-size:183px 115px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -38px;
}

.top_left li a:active  {
	background-image: url(../images/bt1.png);
	background-image: url(../images/ie8/bt1.png)\9; /* IE8 */
	background-size:183px 115px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -76px;
	line-height: 39px;
}

.top_left .ic_facebook a{
	list-style:none;
	background-image: url(../images/ic_facebook.png);
	background-image: url(../images/ie8/ic_facebook.png)\9; /* IE8 */
	background-size:32px 32px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	height: 32px;
	width: auto;
	display: block;
	overflow: hidden;
	padding-left: 40px;
	color: #258;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
	margin-top: 20px;
	clear: none;
	float: left;
	white-space: nowrap;
}

.top_left .ic_facebook a:focus,
.top_left .ic_facebook a:hover{
	color: #025;
	text-decoration: underline;
}

.top_right{
	clear: none;
	float: right;
	height: auto;
	width: 350px;
	padding-top: 10px;
}


/*About Buddy Tape*/
.about_box {
	height: auto;
	clear: none;
	width: 465px;
	float: left;
}

.about_box h3 {
	font-size: 1.1em;
	font-weight: bold;
	color: #000;
	line-height: 0.5em;
	padding-bottom: 10px;
}

.about_box img {
	clear: none;
	float: left;
	margin-right: 10px;
}

.about_box p {
	clear: none;
	float: left;
	height: auto;
	width: 391px;
	font-size: 0.9em;
	font-weight: normal;
	color: #444;
	line-height: 1.3em;
}

.about_map_box {
	height: auto;
	clear: none;
	width: 465px;
	float: left;
	text-align: center;
	font-weight: bold;
	color: #000;
}

.about_map_box img {
	clear: both;
	float: none;
	margin-right: auto;
	margin-left: auto;
	display: block;
	margin-bottom: 10px;
}

/*Application and Storage*/
.appli_box{
	clear: both;
	float: left;
	height: auto;
	width: 960px;
}

.appli_box p {
	font-size: 0.9em;
	font-weight: normal;
	color: #444;
	line-height: 1.3em;
}

.appli_box h4 {
	font-size: 1em;
	font-weight: bold;
	color: #000;
	clear: both;
	float: none;
	padding-bottom: 5px;
}

.appli_box .box1{
	clear: none;
	float: left;
	height: auto;
	width: 480px;
	padding-right: 25px;
}

.appli_box .box1 p{
	line-height:1.5em;
}

.box1 .ic_arrow_on a {
	list-style:none;
	background-image: url(../images/ic_arrow.png);
	background-image: url(../images/ie8/ic_arrow.png)\9; /* IE8 */
	background-size:24px 49px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	height: 24px;
	width: auto;
	display: block;
	overflow: hidden;
	padding-left: 28px;
	color: #000;
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
	clear: none;
	float: left;
	white-space: nowrap;
	padding-right: 15px;
	text-decoration: none;
	line-height: 24px;
}

.box1 .ic_arrow_off a {
	list-style:none;
	background-image: url(../images/ic_arrow.png);
	background-image: url(../images/ie8/ic_arrow.png)\9; /* IE8 */
	background-size:24px 49px,100% 100%;
	background-repeat: no-repeat;
	background-position: left bottom;
	text-align: left;
	height: 24px;
	width: auto;
	display: block;
	overflow: hidden;
	padding-left: 28px;
	color: #999;
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
	clear: none;
	float: left;
	white-space: nowrap;
	padding-right: 15px;
	text-decoration: none;
	line-height: 24px;
}

.appli_box .box2{
	clear: none;
	float: left;
	height: auto;
	width: 435px;
	padding: 10px;
	background-color: #ebc8ac;
	-moz-border-radius: 5px;/*for Firefox*/
    -webkit-border-radius: 5px;/*for Safari and chrome*/
    border-radius: 5px; /* CSS3 */
}

.appli_box .box3{
	clear: none;
	float: left;
	height: auto;
	width: 280px;
}

.appli_box .box3 img{
	margin-bottom: 35px;
}

.box3 li a {
	width: 280px;
	float: left;
	height: 38px;
	background-image: url(../images/bt2.png);
	background-image: url(../images/ie8/bt2.png)\9; /* IE8 */
	background-size:280px 115px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	overflow: hidden;
	text-align: center;
	display: block;
	color: #FFF;
	font-size: 18px;
	text-decoration: none;
	line-height: 39px;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
	font-weight: bold;
}

.box3 li a:focus,
.box3 li a:hover {
	background-image: url(../images/bt2.png);
	background-image: url(../images/ie8/bt2.png)\9; /* IE8 */
	background-size:280px 115px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -38px;
}

.box3 li a:active  {
	background-image: url(../images/bt2.png);
	background-image: url(../images/ie8/bt2.png)\9; /* IE8 */
	background-size:280px 115px,100% 100%;
	background-repeat: no-repeat;
	background-position: 0px -76px;
	line-height: 41px;
}

.appli_box .box4{
	clear: none;
	float: left;
	height: auto;
	width: 630px;
	padding-left: 50px;
	padding-top: 15px;
}

.appli_box .box4 .inner{
	clear: none;
	float: left;
	height: auto;
	width: 300px;
	padding-bottom: 15px;
}

.appli_box .box4 li{
	display: block;
	padding-top: 7px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 7px;
	font-size: 0.9em;
	color: #333;
	}
	
.box4 .bg_gr{
	background-color: #ECECEC;
	}

.box4 .ic_attention {
	list-style:none;
	background-image: url(../images/ic_attention.png);
	background-image: url(../images/ie8/ic_attention.png)\9; /* IE8 */
	background-size:37px 32px,100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	height: 27px;
	width: auto;
	display: block;
	overflow: hidden;
	padding-left: 40px;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	margin-top: 15px;
	clear: none;
	float: left;
	white-space: nowrap;
	padding-top: 5px;
}

.box4 .attention_box {
	padding: 10px;
	clear: both;
	float: left;
	height: auto;
	width: 608px;
	border: 1px solid #CCC;
	margin-top: 10px;
	margin-bottom: 10px;
	-moz-border-radius: 5px;/*for Firefox*/
	-webkit-border-radius: 5px;/*for Safari and chrome*/
	border-radius: 5px; /* CSS3 */
	behavior: url("/css/PIE.htc");
	position: relative;
}


/*Contact us*/
.contact_box {
	height: 270px;
	clear: none;
	width: 299px;
	float: left;
	padding: 10px;
}

.contact_box h3 {
	font-size: 1em;
	font-weight: bold;
	color: #666;
	line-height: 1.1em;
	padding-bottom: 0px;
}

.contact_box h4 {
	font-size: 0.9em;
	font-weight: bold;
	color: #000;
	line-height: 1.3em;
	margin-bottom: 4px;
}

.contact_box img {
	display: block;
	clear: both;
	float: none;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	overflow: hidden;
}

.contact_box p {
	clear: none;
	float: left;
	font-size: 0.75em;
	font-weight: normal;
	color: #444;
	line-height: 1.5em;
}

.contact_box p a:link {
	color: #369;
	text-decoration: none;
}

.contact_box p a:visited {
	color: #369;
	text-decoration: none;
}

.contact_box p a:focus,
.contact_box p a:hover {
	color: #036;
	text-decoration: underline;	
}

.tx_normal {
	font-weight: normal;
	font-size: 0.8em;
}

.tx_bold {
	font-weight: bold;
}


/*Margin*/
.ma_l455{
	margin-left: 455px;
}

.ma_r5{
	margin-right: 5px;
}

.ma_r10{
	margin-right: 10px;
}

.ma_r15{
	margin-right: 15px;
}

.ma_r30{
	margin-right: 30px;
}

.ma_b10{
	margin-bottom: 10px;
}

.ma_b15{
	margin-bottom: 15px;
}

.ma_b25{
	margin-bottom: 25px;
}

.ma_t10 {
	margin-top: 10px;
}

/*Padding*/
.pa_b30{
	padding-bottom: 30px;
}

.pa_b20{
	padding-bottom: 20px;
}