@charset "utf-8";


/** 
    
	 
	Settings	 

	 
			  **/
			  

*{
	background-repeat:no-repeat;
	line-height:140%;
	font-family:"Lato" ,Helvetica, "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
	letter-spacing: .8px;
	margin:0;
	padding:0;
	outline: none
}


*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}/* Non count border size */
 
a {text-decoration:none; overflow:hidden; color:#0071ae}
a:hover {color:#FFB900}

img {border: none; line-height:0; vertical-align:bottom;max-width: 100%}
img[data-echo]{ 
	min-width:50px; 
	min-height:50px; 
	background-image:url(../images/common/preloader-30-w.gif); 
	background-position:center center;
	border:solid 1px #ddd;
	border-radius:5px
}
img[data-echo].loaded{background-image:none}


.clear{clear:both; height:0; line-height:0; font-size:0}

.space10 {height: 10px}
.space20 {height: 20px}
.space30 {height: 30px}
.space40 {height: 40px}
.space100 {height: 100px}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml10{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.mr10{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}

.font10{font-size:10px}
.font12{font-size:12px}
.font14{font-size:14px}

.bold{font-weight:bold}

.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}

.red{color:#C00}

.left {float:left}
.center{float:left}
.right {float:right}

p{line-height:160%}

li{list-style: none;}

.alpha{
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.alpha:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.75;
	opacity:0.75;
}

.transition-01{ 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.transition-02{ 
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.transition-03{ 
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}


.bd-01{background: linear-gradient(transparent 60%, rgba(252,238,33,.6) 0%); font-weight: bold}
.bd-02{background: linear-gradient(transparent 60%, rgba(228,0,3,.4) 0%); font-weight: bold}
.bd-03{background: linear-gradient(transparent 60%, rgba(0,65,219,0.50)  0%); font-weight: bold}


.r-corner{-webkit-border-radius: 100%;-moz-border-radius:100%;border-radius:100%;}

.cursor{cursor:pointer; cursor:hand}

th,td{text-align:left}

input[type="text"]:focus {outline: 0;}
button:focus {outline: 0;-webkit-appearance: none;border-radius: 0;}

#back-top {
	position: fixed;
	bottom: 30px;
	right:30px;
	z-index:9999;
	display: block;
	width: 50px;
	height: 50px; 
	border-radius: 100px;
	background-color: #333;
	color:#fff;
	text-align: center;
	padding-top: 12px;
	display: none
}

@media screen and (max-width: 500px) {

#back-top {
	bottom: 10px;
	right:20px;
}

}

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix { display: inline-table; }
.clearfix{zoom:1}/** for IE7 **/

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.link a{color:#29abe2}
.link a:hover{color:#ffb700}

#window-size{position: fixed; bottom:10px; right: 10px; width: 200px; background-color: #fff; font-size: 16px; font-weight: bold; z-index: 9999; text-align: center;
padding: 10px; display: none}


#ie-notice{background-color: #fff; padding: 10px; text-align: center; font-size: 16px; font-weight: bold; color:red}

/** ***********************************************

Common Style

*********************************************** **/



.cols-2{font-size:0;letter-spacing: -.5em}
.cols-2 .col{font-size:14px; display: inline-block; vertical-align: top; width :50%;letter-spacing: normal}

.cols-3{font-size:0;letter-spacing: -.5em}
.cols-3 .col{font-size:14px; display: inline-block; vertical-align: top; width :33.33333%; width : -webkit-calc((100%) / 3) ; width : calc((100%) / 3);letter-spacing: normal}

.cols-4{font-size:0;letter-spacing: -.5em}
.cols-4 .col{font-size:14px; display: inline-block; vertical-align: top; width :25%;letter-spacing: normal}

.cols-5{font-size:0;letter-spacing: -.5em}
.cols-5 .col{font-size:14px; display: inline-block; vertical-align: top; width :20%;letter-spacing: normal}




.tr{display:table;table-layout: fixed;border-collapse: collapse;width: 100%}
.td{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;}
.th{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;font-weight:bold}

.reset{ font-size:0; letter-spacing:.5}
.reset li{font-size:14px; letter-spacing:normal}

.full{width:100%; height:auto}

.hr-list{letter-spacing: -0.5em}
.hr-list li{display:inline-block; vertical-align:top;letter-spacing: normal}

.table-style-01{width:100%}
.table-style-01 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-01 th{padding:10px; text-align:right;}
.table-style-01 td{padding:10px;}


.table-style-02{width:100%;background-color:#ccc}
.table-style-02 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-02 th{text-align:right; padding:8px 10px; vertical-align:top; white-space:nowrap;background:#eee}
.table-style-02 td{ padding:8px 10px; background-color:#fff}

.bt-blue a{color:#fff; display:block; padding:15px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border-bottom:solid 3px #069}
.bt-blue a:hover{background-color:#CCC;border-bottom:none; margin-top:11px!important}

.bt-blue-02 a{color:#fff; display:block; padding:10px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 4px;-moz-border-radius:4px;border-radius:4px}
.bt-blue-02 a:hover{background-color:#CCC}

.bt-orange a{color:#fff; display:block; padding:15px 10px; text-align:center; background:#F90;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border:solid 1px #fff;
	background: -moz-linear-gradient(top ,#F90, #F60);
    background: -webkit-gradient(linear, left top, left bottom, from(#F90), to(#F60));
    background: linear-gradient(to bottom, #F90, #F60);
}
.bt-orange a:hover{background:#F60}


body{-webkit-text-size-adjust: 100%;background-color: #f5f5f5}


#wrapper{background-color: #fff; max-width: 1600px; margin: 0 auto}

.inner{width:100%; max-width: 1380px; margin:0 auto; position:relative; padding: 0 20px}

@media screen and (min-width: 1600px) {

#wrapper{border-left:solid 1px #ddd;border-right:solid 1px #ddd}

}
@media screen and (max-width: 1024px) {

.inner{padding: 0 10px}

}

/** ***********************************************

Header blue: #333399  Red: #de1c24

*********************************************** **/
header{position: relative}



header .lv-01{width:100%}
header .lv-01 .col-01{width: 50%; vertical-align: top; padding: 5px 20px }
header .lv-01 .col-02{width: 50%; text-align: right; vertical-align: top; padding: 5px 20px}



header .lv-01 h1{font-size: 10px; font-weight: normal; display: inline}
header .lv-01 h1:after{content:" / "}
header .lv-01 h2{font-size: 10px; font-weight: normal; display: inline}

#logo{max-width: 180px; margin: 10px 0}
#logo a:hover img{opacity: .8}

#lang{font-size: 12px; margin-bottom: 20px; position: relative; z-index: 999999}
#lang span.on{color: #999}
#lang ul{background-color: #fff; position: absolute; top:20px; right:0; background-color: #ddd; padding: 1px; padding-bottom: 0; box-shadow: 2px 2px 1px #666;z-index: 999999; display: none}
#lang ul li a{display: block; width: 150px; padding: 10px; font-size: 14px; text-align: center; margin-bottom: 1px; background-color: #fff}




header .lv-01 .s-box{width: 320px; float:right}
header .lv-01 .s-box .txt{font-size: 12px;border: solid 1px #ddd; padding: 2px 10px; width: 280px; height: auto; letter-spacing: .5px; height: 30px; vertical-align: top}
#bt-submit-01{background-color: #333399; border:none; color:#fff; font-size: 14px; width: 30px; height: 30px; text-align: center; vertical-align: top}


@media screen and (max-width: 872px) {

header .lv-01 .s-box{display: none}
header .lv-02 .col-01{width: 50%}

} 

@media screen and (max-width: 500px) {

header .lv-01 .col-01{width: 60%}
header .lv-01 .col-02{width: 40%; padding: 5px 0}

} 

/** Global Menu **/
nav{background-color: #000;}
#g-navi{position: relative; top:0; left: 0; z-index: 9999; text-align: center;}

#g-navi li{display: inline-block; margin: 0; padding: 14px 14px}
#g-navi li a{color:#fff; font-size: 15px}
#g-navi li a:hover{color:#ccc}
#g-navi li.on{background-color: #eee}

#g-navi.active{position: fixed; top:0; left: 0; width: 100%; background-color: #000}
#g-navi.active li a{color:#fff; font-size: 14px;}
#g-navi.active li.on a{color:#333}
#g-navi.active #sub-navi li a{color:#333}

/** POP UP  Menu **/


#sub-navi{position: absolute; top:150px; left: 0; width: 100%; background-color: #eee; box-shadow: 0px 3px 3px #999; padding: 30px; min-height: 300px; display: none; text-align: left; z-index: 9999}
#sub-navi.active{top:48px; position: fixed}

#sub-navi a{color:#333}
#sub-navi a:hover{color:#ccc}

#sub-navi .cols-5{font-size:0;letter-spacing: -.5em; max-width: 1480px; margin: 0 auto}
#sub-navi .cols-5 .col{font-size:14px; display: inline-block; vertical-align: top; width :20%!important;letter-spacing: normal;padding: 0 10px}

#sub-navi .bt{width: 100%; background-color: #fff; padding: 20px; display: block; text-align: right; font-weight: bold}
#sub-navi .col-01 .bt{background-position: left 20px top; background-size: contain}
#sub-navi .col-02 .bt{background-position: left 20px top; background-size: contain}
#sub-navi .col-03 .bt{background-position: left 20px top; background-size: contain}
#sub-navi .col-04 .bt{background-position: left 20px top; background-size: contain}
#sub-navi .col-05 .bt{background-position: left 20px top; background-size: contain}
#sub-navi ul{margin-top: 20px}
#sub-navi li{padding: 0 10px 5px!important; display: block; text-align: left}
#sub-navi li a{font-size: 12px }


@media screen and (max-width: 1024px) {

#sub-navi .cols-5 .col{font-size:13px;padding: 0 5px}
#sub-navi .bt{padding: 15px;font-size: 14px}

} 
@media screen and (max-width: 872px) {

#g-navi {display: none}

} 



/** ***********************************************

SP MENU

*********************************************** **/


#sp-navi{width: 86%; height: 100%; position: fixed;top:0; left: -86%; background-color: #fff; z-index: 999999; overflow: auto;}
#sp-navi.active{left:0}
.sp-layer{display: none; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.8); width: 100%; height: 100%; z-index: 10}

#sp-navi li{position: relative}
#sp-navi li.has-sub i.fa-caret-down{position: absolute; top:12px; right: 5%}

#sp-navi > li > a{display: block; padding: 10px 20px; text-align: left; color:#333; font-size: 16px; width: 100%; border-bottom: solid 1px #ddd}
#sp-navi .has-sub a{display: block;padding: 10px 30px; text-align: left; color:#fff; font-size: 16px; width: 100%; border-bottom: solid 1px #ddd; background-color: #333;}

#sp-navi .sp-sub{display: none}
#sp-navi .sp-sub a{display: block;padding: 10px 30px; text-align: left; color:#333; font-size: 16px; width: 100%; border-bottom: solid 1px #ddd; background-color: #eee}


#sp-search{width: 100%;padding: 20px; background-color: #f5f5f5; position: relative}
#sp-search input{width: 80%; border:none; font-size: 14px; background-color: #f5f5f5}
#sp-search button{font-size: 20px; border:none; background-color: #f5f5f5; position: absolute; top:50%; right:5%; margin-top: -18px}




#bt-nav{position:fixed; top:40px; right:40px; z-index:9999;display: none}
#bt-nav .item-01{border-top:solid 2px #000;width:30px; display:block}
#bt-nav .item-02{border-top:solid 2px #000;width:30px; display:block; margin-top:8px}
#bt-nav .item-03{border-top:solid 2px #000;width:30px; display:block; margin-top:8px}


#bt-nav.on .item-01{
	-moz-transform: rotate(-40deg);
	-webkit-transform: rotate(-40deg);
	-o-transform: rotate(-40deg);
	-ms-transform: rotate(-40deg);
	transform: rotate(-40deg);
	-webkit-transform-origin:right;
	transform-origin:right;
	border-top:solid 2px #fff;
}

#bt-nav.on .item-02{width:0}

#bt-nav.on .item-03{width:30px;
	-moz-transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	-ms-transform: rotate(40deg);
	transform: rotate(40deg);
	-webkit-transform-origin:right;
	transform-origin:right;
	border-top:solid 2px #fff;
}


@media screen and (max-width: 872px) {

#bt-nav{display: block;top:40px; right:30px}

}

@media screen and (max-width: 500px) {

#bt-nav{top:40px; right:20px}

}

/** ***********************************************

Top -  Cover Image

*********************************************** **/


#top-slide{width: 100%; overflow: hidden; background-color: #f5f5f5}
#top-slide ul{position: relative}
#top-slide li{width: 100%; display: inline-block; vertical-align: top; position: relative}

#top-slide .txts{text-align: center; width: 100%; position: absolute; top:150px; left: 0; color:#FFFFFF}
#top-slide .txts p{width: 645px; margin: 0 auto; font-size: 24px; text-shadow: 1px 1px 1px #333}
#top-slide .txts .bt{color: #fff; background-color:#333399; width: 280px; font-size: 16px; text-align: center; padding: 15px; display: block; position: relative; margin: 50px auto 0; border-radius: 3px}
#top-slide .txts .bt i{position: absolute; top:50%; margin-top: -7px; right: 10px}
#top-slide .txts .bt:hover{background-color:#de1c24 }


#top-slide img{width: 100%; height: auto}
#top-slide .slick-prev{position: absolute; top:50%; left: 10px; z-index: 999; font-size: 40px; margin-top: -40px; color:#eee}
#top-slide .slick-next{position: absolute; top:50%; right: 10px; z-index: 999; font-size: 40px; margin-top: -40px; color:#eee}
.slick-slide a:focus{outline: none}

.slick-dots{text-align: center; position: absolute; bottom:30px; left: 0; z-index: 999}
.slick-dots li{
    display: inline-block;
    width: 10px!important;
    height: 10px!important;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
	background-color:#eee;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
}
.slick-dots button{
    display: block;
    width: 10px!important;
    height: 10px!important;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li.slick-active{background-color:#de1c24}


@media screen and (max-width: 1200px) {

#top-slide .txts{top:100px}

} 

@media screen and (max-width: 1000px) {

#top-slide .txts{top:50px}

}

@media screen and (max-width: 840px) {

#top-slide .txts{top:50px}
#top-slide .txts p{width: 80%; font-size: 20px}
#top-slide .txts .bt{width: 280px; font-size: 16px;  padding: 15px; margin: 30px auto 0;}

}

@media screen and (max-width: 725px) {

#top-slide .txts{top:50px}
#top-slide .txts p{display: none}
#top-slide .txts .bt{width: 280px; font-size: 16px;  padding: 15px; margin: 40px auto 0;}
#top-slide .slick-prev{display: none!important}
#top-slide .slick-next{display: none!important}
}

@media screen and (max-width: 500px) {

#top-slide .txts{top:50px}
#top-slide .txts p{display: none}
#top-slide .txts .bt{width: 50%; font-size: 14px;  padding: 10px; margin: 0 auto}


}

/** ***********************************************

Top -  News

*********************************************** **/

#top-news{text-align: center;padding:30px 0; background-color: #f5f5f5}

#top-news h3{ font-size: 20px; font-weight: normal; margin-bottom: 30px; display: inline-block; vertical-align: middle; text-align: center; padding-right:100px}

#top-news .wrap-news {width:700px;  display: inline-block; vertical-align: middle}
.news-list li{padding-bottom: 10px; border-bottom:solid 1px #333; margin-bottom: 10px; text-align: left}
.news-list li a{font-size: 16px; color:#333}
.news-list li a:hover{text-decoration: underline}
.news-list li span{display: block; font-size: 12px; color:#666}
.news-list li span .icon-new{font-style: normal; color: #fff; background-color:#de1c24; padding: 0 5px; font-size: 10px; margin-left: 5px}

#top-news ul{margin-bottom: 20px}
#top-news .view-all{font-size: 14px}


@media screen and (max-width: 872px) {

#top-news .news-list {width:auto; padding: 0 20px}
#top-news h3{padding-right:0px}
#top-news .wrap-news {width:100%}

} 




/** ***********************************************

Top -  Categories

*********************************************** **/

#top-cat{padding: 50px 0; background-image: url(../images/top/bg-pd.jpg); background-position: top left -10%; background-size: contain}
#top-cat .inner{letter-spacing: -.5em; text-align: center}
#top-cat .col-01{width: 65%;letter-spacing:normal}
#top-cat .col-02{width: 25%;letter-spacing:normal; padding-left: 50px; text-align: left}

#top-cat h3{text-align: center; font-size: 20px; font-weight:normal; padding: 0 0 30px 0;}

#top-cat .list-01{font-size: 0;}
#top-cat .list-01 li{display: inline-block; position: relative; border:solid 1px #eee; padding: 10px; background-color: #fff; vertical-align: top; text-align: center; margin: 10px; margin-top: 0}
#top-cat .list-01 li h4{font-size: 16px; position: absolute; bottom:0; left: 0;  text-align: center; font-weight: bold; width: 100%; background-color: #000; color:#fff; padding: 10px 0}
#top-cat .list-01 li a{color:#333; display:table-cell;height: 330px; width: 240px; vertical-align: middle; padding-bottom: 40px }
#top-cat .list-01 li a:hover img{opacity:.8}
#top-cat .list-01 li img{width: auto; height: auto; max-height: 280px}
#top-cat .list-01 li:last-child img{height: auto;width: 80%}



#top-cat .wrap-sh{padding: 20px; background-color: #333399; overflow: hidden; color:#fff}
#top-cat .wrap-sh p{font-weight: bold; font-size: 16px; margin-bottom: 10px}
#top-cat .wrap-sh p span{font-weight: normal; margin-left: 3px; font-size: 12px}

#top-cat .txt-input{margin-bottom: 15px; padding: 10px; font-size: 14px; border:solid 1px #ddd; background-color: #fff; position: relative; color:#333}
#top-cat .txt-input i{position: absolute; top:12px; right: 0px;display: block; border-left:solid 1px #ddd; padding: 0 10px}

.txt-input .list-select{margin-top: 10px; display: none; max-height: 250px; overflow: auto}
.txt-input .list-select li{padding: 5px 5px}
.txt-input .list-select li:hover{background-color: #eee}

#top-cat .txt-input .txt{width: 180px; padding: 5px; border:none; font-size: 14px; background-color: #fff}

#bt-submit-02{background-color: #333399; border:none; color:#fff; font-size: 16px; width: 100%; padding: 10px 0; text-align: center;vertical-align: top; margin-top: 20px; border:solid 1px #fff}
#bt-submit-02:hover{background-color: #fff; color:#333399}




@media screen and (max-width: 1352px) {

#top-cat .col-02{padding-left: 20px}
#top-cat .list-01 li{width: 30%; text-align: center}
#top-cat .list-01 li a{width: inherit}
#top-cat .list-01 li:last-child img{width: 80%; }

} 


@media screen and (max-width: 1177px) {

#top-cat{padding: 30px 0; background-position: top left -20%;}

#top-cat .list-01 li h4{font-size: 14px}

#top-cat .wrap-sh{padding: 20px}
#top-cat .wrap-sh p{font-size: 14px; margin-bottom: 5px}
#top-cat .wrap-sh p span{font-size: 10px}
#top-cat .txt-input{margin-bottom: 10px; padding: 5px; font-size: 14px}
#top-cat .txt-input i{position: absolute; top:8px}
#bt-submit-02{font-size: 16px; padding: 8px 0}

} 
@media screen and (max-width: 980px) {

#top-cat{padding: 30px 0 50px;background-position: top left 0; background: none}
#top-cat .col-01{width: 100%; padding-bottom: 30px; display: block}
#top-cat .col-02{width: 80%; margin: 0 auto; display: block; padding-left: 0}

} 


@media screen and (max-width: 650px) {


#top-cat .list-01 li{ margin: 10px 0; margin-top: 0}

}


@media screen and (max-width: 500px) {

#top-cat .list-01 li{width: 48%}
#top-cat .col-02{width: 100%}

}


/** ***********************************************

Top -  Banners

*********************************************** **/


#bns{background-color: #000; padding: 30px 0; text-align: center; font-size: 0; letter-spacing: -5em}
#bns li{display: inline-block;width: 28%;margin: 0 10px;position: relative; font-size: 12px; letter-spacing: normal}
#bns li a{display: block; color:#fff}
#bns li h3{font-size: 30px; text-shadow: 1px 1px 1px #333;position: absolute; width: 100%; top:50%; margin-top: -30px; font-weight: normal}

#bns li a:before{content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.2); position: absolute; top:0; left: 0;
background:rgba(0,0,0,1.00) ; 
background: -webkit-linear-gradient(-30deg, rgba(0,0,0,.8) , rgba(0,0,0,0) );
background: linear-gradient(-30deg, rgba(0,0,0,.8) , rgba(0,0,0,0) );
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
#bns li:hover a:before{background:rgba(0,0,0,.3) ; }


.bt-red{color: #fff; background-color:#e25a24; width: 200px; text-align: center; padding: 10px; display: block; position: relative}
.bt-red i{position: absolute; top:50%; margin-top: -7px; right: 10px}
.bt-red:hover{color:#fff;background-color: #ccc;}

#top-banners .bn-01 .bt-red{margin: 30px auto 0}



@media screen and (max-width: 1100px) {

#bns li{width :30%;margin: 0 5px}

} 


@media screen and (max-width: 500px) {

#bns li{width :100%;margin: 0;margin-bottom: 5px; height: 200px; overflow: hidden}

}


/** ***********************************************

Top -  Slik Info

*********************************************** **/

#top-cp-info{padding: 30px; text-align: center}
#top-cp-info h3{font-size: 30px}
#top-cp-info p{font-size: 14px; margin-bottom: 30px}
#top-cp-info address{font-size: 14px; display: block; font-style: normal; line-height: 200%}
#top-cp-info span{font-size: 14px; display: block}
#top-cp-info hr{width: 70px;height: 1px; border:none; background-color: #ddd; margin: 30px auto}
#top-cp-info .cols-3{width: 180px; margin: 10px auto}
#top-cp-info .cols-3 li{width : 33.33333% ;   width : -webkit-calc(100% / 3) ;width : calc(100% / 3) ; padding: 10px 5px}
#top-cp-info .cols-3 li a:hover img{opacity: .8}
#top-cp-info .bt-red{margin: 20px auto 0}



/** ***********************************************

Footer

*********************************************** **/

footer{background-color: #eee; text-align: center; padding: 30px 0; border-bottom:solid 8px #000}

#f-navi{}
#f-navi li{display: inline-block; margin: 10px}
#f-navi li a{color:#333; font-size: 14px}
#f-navi li a:hover{color:#ccc}
footer .p01{margin-top: 30px; font-size: 12px}
#f-logo{width: 140px; margin: 10px auto 0}

#f-sub-navi{margin-top: 30px}
#f-sub-navi li{display: inline-block; margin: 10px}
#f-sub-navi li a{color:#333; font-size: 12px; text-decoration: underline}
#f-sub-navi li a:hover{color:#ccc}

#copyright{font-size: 10px; margin-top: 20px}






/** ***********************************************

Detail  blue: #333399  Red: #c8164e

*********************************************** **/

.cover{width: 100%; height: 132px; background-color: #f5f5f5; background-size: cover; background-position: center; position: relative;}
.cover a{color:#eee}
.cover h3{font-size: 40px; font-weight: normal; letter-spacing: 1.5px; text-align: center; width: 100%; color: #fff; z-index: 10; position: relative; text-shadow: 2px 2px 2px #333}
.cover p{text-align: center;padding-top: 20px; z-index: 10; position: relative; text-shadow: 2px 2px 2px #333}
.cover .layer{width: 100%; height: 132px; background-color: rgba(0,0,0,0); position: absolute; top:0; left: 0; z-index: 1}

@media screen and (max-width: 500px) {

#technology .cover{background-position: left}

}


#news-cover{border-top:solid 1px #ddd}
#news-cover h3{padding-top:32px;color: #333;  text-shadow: 0px 0px 0px #f5f5f5}
#news-cover .layer{background-color: rgba(0,0,0,0)}


#b-navi{padding: 4px 0 6px; background-color: #eee; border-bottom:solid 1px #ddd;}
#b-navi li{display: inline-block; color:#666; font-size: 12px}
#b-navi li:after{content: " / "; margin-right: 5px}
#b-navi li a{color:#333}
#b-navi li a:hover{opacity:.8}


@media screen and (max-width: 500px) {

#b-navi li{font-size: 10px}

}



#detail-main{padding: 50px; background-color: #fff}

#detail-main h3.title{font-size: 40px; font-weight: normal; margin-bottom: 30px}

#detail-main .desc{font-size: 16px; line-height: 180%}

#detail-main .desc ul{margin-top: 1em}
#detail-main .desc ul li{list-style:disc; list-style-position: outside; margin:0 20px 1em;}

#detail-main .col-01{padding-right: 20px; position: relative; z-index: 10; min-height: 500px; width: 42%}
#detail-main .col-02{padding-left: 20px; width: 55%;}

#pd-image{overflow: hidden!important; background-color: #fff}
#pd-image ul{position: relative}
#pd-image li{text-align: center; display: inline-block; vertical-align: middle; position: relative}
#pd-image li a{color:#333}
#pd-image li p{width:100%; text-align: center; position: absolute; bottom:0; padding: 3px; left: 0; background-color: rgba(255,255,255,1.00)}
#pd-image img{width: auto; height: auto; max-width: 100%; max-height: 500px}

#pd-image .slick-prev{position: absolute; top:50%; left: 10px; z-index: 1000; font-size: 30px; margin-top: -30px; color:#ddd}
#pd-image .slick-next{position: absolute; top:50%; right: 10px; z-index: 1000; font-size: 30px; margin-top: -30px; color:#ddd}
#pd-image .slick-prev:hover{color:#333}
#pd-image .slick-next:hover{color:#333}

#pd-thumbs{overflow: hidden; margin: 0 auto; text-align: center}
#pd-thumbs ul{position: relative;margin-top: 30px; }
#pd-thumbs li{display: inline-block; vertical-align: top; border:solid 1px #eee; width: 80px!important; height: 80px!important;margin:0 5px; cursor: pointer; cursor:hand}
#pd-thumbs li.slick-current{border:solid 1px #c8164e}
#pd-thumbs img{width: auto; height: auto; max-width: 100%; max-height: 100%}

#detail-main .tags{padding-top: 30px}
#detail-main .tags a{font-size: 14px}


@media screen and (max-width: 1024px) {

#detail-main{padding: 30px; background-color: #fff}
#detail-main .col-01{padding-right: 20px; min-height: 500px; width: 50%}
#detail-main .col-02{padding-left: 20px; width: 50%}

#detail-main h3.title{font-size: 34px; margin-bottom: 20px}
#pd-image img{max-height: 400px}
#pd-thumbs li{width: 50px!important; height: 50px!important}

}


@media screen and (max-width: 800px) {

#detail-main{padding: 10px}
#detail-main .col-01{padding-right: 0px; width: 100%; min-height: inherit; padding-bottom: 20px}
#detail-main .col-02{padding-left: 0px; width: 100%}
#detail-main .tags a{font-size: 12px}
#detail-main .desc a:first-child{font-size: 12px}
#detail-main h3.title{font-size: 34px; margin-bottom: 20px; border-bottom:solid 1px #333}
#detail-main .desc{font-size: 14px; padding:0 10px}

}



/** tab **/

#detail-tab{padding: 50px 0 30px}
#detail-tab .inner{max-width:900px}

#tab-menu{text-align: left; border-bottom:solid 1px #000}
#tab-menu li{display: inline-block; vertical-align: top}
#tab-menu li a{color:#999; display: block; padding: 14px 30px 0; font-size: 20px; background-color: #fff; border:solid 1px #fff; border-bottom:none}
#tab-menu li a.selected{color:#333; border-bottom:none; position: relative}
#tab-menu li a.selected:after{content: ""; display: block; width: 100%; border-bottom:solid 3px #c8164e; margin-top: 10px}
#tab-menu li a:hover{color:#333}
#detail-tab .panel{padding: 30px; min-height: 300px}
#detail-tab .panel p{width: 100%; line-height: 180%; font-size: 16px}


#detail-rec-series{background-color: #fff; padding: 30px; text-align: center; border-top:solid 1px #ddd}
#detail-rec-series h3{margin-bottom: 50px; font-weight: normal; font-size: 24px}
#detail-rec-series li{background-color: #fff; width: 25%; padding: 5px; overflow: hidden; display: inline-block; text-align: center}
#detail-rec-series li img{max-height: 200px}
#detail-rec-series li p{width:100%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-top: 10px}


@media screen and (max-width: 800px) {

#detail-rec-series h3{margin-bottom: 30px; }
#detail-rec-series li{width: 33.3333333%}

}

@media screen and (max-width: 600px) {

#detail-rec-series h3{font-size: 20px}
#detail-rec-series .list-item-hr{overflow-x: hidden; overflow-y:hidden; padding-bottom: 20px}
#detail-rec-series .list-item-hr li{width:33.33333%; display: inline-block}
#detail-rec-series .list-item-hr li img{max-width: 100px; max-height: 100px}

}




#detail-other-series{background-color: #f5f5f5; padding: 30px; text-align: center; border-top:solid 1px #ddd}
#detail-other-series h3{margin-bottom: 50px; font-weight: normal; font-size: 24px}

#detail-other-series li{border:solid 1px #ddd; background-color: #fff; width: 19%; padding: 5px; overflow: hidden; display: inline-block}
#detail-other-series li .wrap-img{display: table-cell; vertical-align: middle;height: 200px}
#detail-other-series li img{max-height: 180px}
#detail-other-series li p{width:100%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-top: 5px; font-size: 14px}
#detail-other-series a.bt{display: inline-block; background-color: #ddd; padding: 8px 20px; border-radius: 100px; font-size: 14px; color:#333; margin-top: 20px}
#detail-other-series a.bt:hover{background-color: #ccc}

@media screen and (max-width: 800px) {

#detail-other-series h3{margin-bottom: 30px}

}

@media screen and (max-width: 700px) {

#detail-other-series{padding: 30px 0}
#detail-other-series h3{font-size: 20px}
#detail-other-series ul{margin-bottom: 20px}
#detail-other-series li{width: 48%;}
#detail-other-series li:nth-of-type(5){display: none}

}


#tab-01 table{width: 100%; background-color: #fff}
#tab-01 tr{border-bottom:solid 1px #ddd!important; padding: 8px 13px!important}
#tab-01 td{font-size: 16px;padding: 10px; text-align: center}

#tab-01 tr:nth-of-type(2n){background-color: #eee!important}

.video iframe{width: 100%; height: 450px}

.feat-list{padding-top: 30px}
.feat-list li{font-size: 0; letter-spacing: -5em; margin-bottom: 30px; padding-bottom: 29px;  border-bottom:solid 1px #ddd;}
.feat-list li:last-child{border-bottom:none}
.feat-list .wrap-img{display: inline-block; vertical-align: top; width: 35%; font-size: 12px; letter-spacing: normal}
.feat-list .wrap-img img{width: 100%; height: auto}
.feat-list .wrap-img a:hover img{opacity: .8}
.feat-list .wrap-txts{display: inline-block; vertical-align: top; width: 65%; font-size: 14px; letter-spacing: normal; padding: 0 20px}
.feat-list .wrap-txts h5{font-size: 18px; margin-bottom: 10px}

#bt-dl{display: block;max-width: 300px; padding: 10px; text-align: center; font-size: 18px; color:#fff; margin: 50px auto;border-radius: 3px;
background:rgba(161,0,2,1.00);
background: -webkit-linear-gradient(to top, rgba(193,39,45,1.00), rgba(225,28,36,1) );
background: linear-gradient(to top, rgba(193,39,45,1.00), rgba(225,28,36,1));
position: relative
}

#bt-dl span{display: block; font-size: 12px; margin-top: 5px}

#bt-dl:hover{opacity:.6}

@media screen and (max-width: 1024px) {

#detail-tab{padding: 30px 0}
#detail-tab .inner{max-width:inherit}
#tab-menu{text-align: center}
#tab-01 td:nth-of-type(1){font-size: 13px!important; padding-right: 20px!important; width:200px!important;}
#tab-01 td:nth-of-type(2){font-size: 14px!important;padding-left: 20px}
}


@media screen and (max-width: 800px) {

#tab-menu li a{padding: 14px 10px 0; font-size: 16px}
#detail-tab .panel{padding: 20px 10px}
#tab-01 td:nth-of-type(1){font-size: 13px!important; padding-right: 20px!important; width:200px!important;}
#tab-01 td:nth-of-type(2){font-size: 14px!important;padding-left: 20px}

}


@media screen and (max-width: 500px) {

#detail-tab .panel p{line-height: 160%; font-size: 14px}

.feat-list{padding: 0px 20px}
.feat-list li{margin-bottom: 20px; padding-bottom: 19px}
.feat-list .wrap-img{display: block; width: 100%; font-size: 12px; letter-spacing: normal}
.feat-list .wrap-txts{display: block;width: 100%; font-size: 14px; letter-spacing: normal; padding: 10px 0}
.feat-list .wrap-txts h5{font-size: 16px; margin-bottom: 10px}

}



/** ***********************************************

Series

*********************************************** **/

#list-cover{width: 100%; height: 300px; background-color: #fff}
#list-cover h3{padding-top:110px}
#list-cover .desc{color:#fff; text-align: left; width: 800px; margin: 0 auto; padding-top: 20px}
#list-cover .desc p{text-align: center;font-size: 18px}
#list-cover .layer{height: 300px; background-color: rgba(0,0,0,.4); }
#list-cover.noimg .layer{background-color: rgba(0,0,0,0);}
#list-cover.noimg h3{color:#333}
#list-cover.noimg p{color:#333}


#list-sec-01{padding: 30px 0 150px; background-color: #eee}


#list-cover-02{width: 100%; background-color: #fff; border-top:solid 1px #ddd}
#list-cover-02 .inner{padding: 40px 50px 0; background-size: auto 600px; background-position: top -40px right 10%;height: 300px; text-align: left;}
#list-cover-02 h3{font-size: 40px;margin-bottom: 20px; font-weight: normal}
#list-cover-02 .desc{color:#333; text-align: left; width: 100%; max-width: 800px; font-size: 16px; text-shadow: 1px 1px 1px #eee}



#series6 #list-cover-02 .inner,
#series3 #list-cover-02 .inner,
#Head #list-cover-02 .inner,
#Accessories #list-cover-02 .inner{background-size: auto 400px;background-position: center right}

@media screen and (max-width: 1200px) {

#list-cover-02 .inner{padding: 40px 50px 0; background-size: auto 300px; background-position: top 20px right 0px;height: 300px; text-align: left;}
#list-cover .desc{color:#fff; text-align: center; width: 80%; margin: 0 auto; padding-top: 20px}

}

@media screen and (max-width: 900px) {

#list-cover{width: 100%; height: auto; background-color: #fff}
#list-cover h3{padding:80px; font-size: 34px}

#list-cover-02 .inner{background-position: top 20px right -50px;}
#list-cover-02 .desc{font-size: 16px}
#list-cover-02 h3{font-size: 30px;margin-bottom: 0px}

}
@media screen and (max-width: 500px) {

#list-cover h3{padding:50px; font-size: 24px}
#list-cover-02 .inner{background-image:none!important; height: auto;padding: 20px;}
#list-cover-02 h3{font-size: 24px;margin-bottom: 0px}
#list-cover-02 .desc{font-size: 14px; padding-top: 10px}

}

.list-products-01{font-size:0; letter-spacing: -.5em;border-left:solid 1px #ddd ; clear:both}
.list-products-01 li{display: inline-block; vertical-align: top; font-size: 14px;width: 20%; text-align: center; border-right:solid 1px #ddd; position: relative;letter-spacing: normal; padding: 60px 10px 20px;border-bottom:solid 1px #ddd; background-color: #fff; overflow: hidden;min-height: 400px}

.list-products-01 li .wrap-img{display: table-cell; vertical-align: middle; width:100%; height: 240px; overflow: hidden; text-align: center}
.list-products-01 li img{width: auto; max-height: 220px;max-width: inherit;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.list-products-01 li img:hover{
	-webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
.list-products-01 li p.name{width:100%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: absolute; top:0 ;left: 0; background-color: #000; color:#fff; padding: 5px; z-index: 9; font-size: 15px}


.list-products-01 li a p.spec{color:#333; position: relative; z-index: 99; text-align: center; font-size: 12px}
.list-products-01 li a p.spec span:nth-of-type(1){text-align: left; display: inline-block; width: 100px}
.list-products-01 li a p.spec span:nth-of-type(2){font-weight: bold!important;display: inline-block; text-align: left; width: 70px}

.list-products-01 li a:hover{opacity:.8}


#pager{padding: 40px 0}
#pager a{display: inline-block; padding: 10px; vertical-align: top; background-color: #fff; border:solid 1px #ddd}
#pager span.current{display: inline-block; padding: 10px; vertical-align: top; background-color: #000; color:#fff; border:solid 1px #000}


@media screen and (max-width: 1200px) {

.list-products-01 li{width: 25%}

}

@media screen and (max-width: 900px) {

.list-products-01 li{width: 33.333333%}

}
@media screen and (max-width: 700px) {

.list-products-01 li{width: 50%;min-height: 200px}
.list-products-01 li a p.spec{display: none}
.list-products-01 li img{width: auto; max-height: 240px}

}
@media screen and (max-width: 500px) {

.list-products-01 li .wrap-img{width:100%; height: 150px}
.list-products-01 li{width: 50%;min-height: 200px}
.list-products-01 li a p.spec{display: none}
.list-products-01 li img{width: auto; max-height: 150px}
.list-products-01 li p.name{font-size: 13px}

}

#list-series li{margin-bottom: 5px;}
#list-series li a{display: block; color:#333; padding: 30px 50px; background-color: #f5f5f5; width: 100%; height: 300px; overflow: hidden; position: relative}

#list-series li p.name{font-size: 40px;margin-bottom: 20px}
#list-series li p.name i{margin-left: 10px; font-size: 30px}

#list-series li p.desc{font-size: 16px;width: 60%}
#list-series li img{position: absolute; right: 0; top:0;
-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#list-series li a:hover img{
-webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}




#list-series-01 ul{font-size: 0;letter-spacing: -.5em}
#list-series-01 li{display: inline-block; width : 33.33333% ;   width : -webkit-calc(100% / 3) ;width : calc(100% / 3) ; border:solid 5px #fff;
letter-spacing: normal;font-size:14px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	vertical-align: top;
	margin-bottom: 20px
}
.ie #list-series-01 li{ width : 33.33333333%}
#list-series-01 li:hover{border:solid 5px #eee}
#list-series-01 li a{display: block; color:#333; padding: 20px; background-color: #fff; width: 100%; overflow: hidden; position: relative}
#list-series-01 li p.name{font-size: 26px;margin-bottom: 20px; position: relative; z-index: 2; text-shadow: 1px 1px 1px #eee}
#list-series-01 li p.name i{margin-left: 10px; font-size: 30px}
#list-series-01 li p.desc{font-size: 14px;width: 60%; position: relative; z-index: 2; min-height: 150px}

#list-series-01 li img{position: absolute; right: 10px; top:10px; height: 250px;z-index: 1;
-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#list-series-01 li a:hover img{
-webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}



@media screen and (max-width: 1200px) {

#list-series-01 li{width : 50% }
.ie #list-series-01 li{ width : 50%}

}

@media screen and (max-width: 900px) {

#list-series-01 li{width : 100% }
.ie #list-series-01 li{ width : 100%}
#list-series-01 li p.desc{font-size: 14px;width: 70%; min-height: 100px}
#list-series-01 li img{position: absolute; right: 10px; top:10px; height: 200px}

}
@media screen and (max-width: 500px) {

#list-series-01 li{margin-bottom:0}
#list-series-01 li img{top:20px}

}


#search-list{}
#search-list > li{font-size: 14px; display: inline-block; border:solid 1px #ddd; padding: 10px;background-color: #fff; position: relative;z-index: 9991;}
#search-list .list-select{display: none;position: absolute; top:40px; left: 0; background-color: #fff; width: 200px; box-shadow: 1px 1px 1px 1px #ddd}
#search-list .list-select li{display: block; padding: 10px; border-bottom: 1px solid #ddd; font-size: 14px; text-align: left}
#search-list .list-select li:hover{background-color: #eee}



#sorter{display: inline-block;border:solid 1px #ddd; padding: 10px; margin: 10px 0 30px; position: relative; z-index: 9990; font-size: 14px; text-align: center;background-color: #fff}
#sorter .list-select{display: none; position: absolute; top:40px; left: 0; background-color: #fff; width: 300px; box-shadow: 1px 1px 1px 1px #ddd}
#sorter .list-select li a{color:#333;display: block; padding: 10px; border-bottom: 1px solid #ddd; font-size: 14px; text-align: left}
#sorter .list-select li a:hover{background-color: #eee}
#sorter .selected{font-weight: bold}



#filter{display: block}
#filter-menu{display: none}

.filter-layer{width: 100%; height: 100%; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.8); z-index: 10; display: none}
.filter-close{font-size: 24px; color:#fff; position: fixed; top:5px; right: 10px; z-index: 111; display: none}

@media screen and (max-width: 900px) {

#filter{display: none; position: fixed; left: 10%; top:5%; width: 80%; height: 90%; background-color: #fff; z-index: 9999; overflow: auto}
#search-list > li{font-size: 13px; display: block; border:none; border-bottom:solid 1px #ddd}
#search-list .list-select{display: none;margin-top:10px;position: inherit; top:inherit; left: 0; background-color: #fff; width: 100%; box-shadow:0 0 0 0 #eee}
#search-list .list-select li{display: block; padding: 8px; background-color: #eee; border-bottom: 1px solid #ddd; font-size: 13px; text-align: left}


#filter-menu{display: block; font-size: 14px; font-weight: bold; margin-bottom: 20px; width: 100px; float:left}
#sorter{display: block; width: 60%; border:none; padding: 0px; margin: 0; margin-bottom: 20px;font-size: 13px;float:right;background-color: #eee}

#sorter .list-select{display: none; position: absolute; top:20px; right: 0; background-color: #fff; width: 100%; box-shadow: 0px 0px 0px 0px #ddd}
#sorter .list-select li a{color:#333;display: block; padding: 10px; border-bottom: 1px solid #ddd; font-size: 13px; text-align: left}




}



/** ***********************************************

Products

*********************************************** **/

#products a{color:#333}
#products a:hover{color:#ccc}

#products .cols-5{font-size:0;letter-spacing: -.5em}
#products .cols-5 .col{font-size:14px; display: inline-block; vertical-align: top; width :20%!important;letter-spacing: normal;padding: 0 10px; border-right:solid 1px #ddd; min-height:500px}
#products .cols-5 .col:last-child{border-right:none}

#products .bt{width: 100%; background-color: #fff; padding: 20px; display: block; text-align: right; font-weight: bold; font-size: 16px}
#products .col-01 .bt{background-position: left 20px top; background-size: contain}
#products .col-02 .bt{background-position: left 20px top; background-size: contain}
#products .col-03 .bt{background-position: left 20px top; background-size: contain}
#products .col-04 .bt{background-position: left 0px top; background-size: contain}
#products .col-05 .bt{background-position: left 20px top; background-size: contain}

#products ul{margin-top: 20px}
#products li{padding: 0 10px 8px!important; display: block; text-align: left}
#products li a{font-size: 15px}

.ballbase{font-weight: bold; background-color: #333399; color:#fff; padding: 10px; width: 100px; text-align: center; border-radius: 3px}

.tagged{font-size: 24px; margin-bottom: 40px}

#products .cols-5 .col ul{height: 400px; overflow: auto}

@media screen and (max-width: 1024px) {

#products .cols-5 .col{width :33.333333%!important;width : -webkit-calc((100%) / 3) !important; width : calc((100%) / 3)!important;border-bottom:solid 1px #ddd;padding-top: 10px}
#products .cols-5 .col:last-child{border-right:solid 1px #ddd; }
#products li a{font-size: 13px}

} 

@media screen and (max-width: 675px) {

#products .cols-5 .col{width : 50%!important; min-height: 300px}
#products .cols-5 .col ul{height: 300px; overflow: auto}

} 

@media screen and (max-width: 500px) {

#products .cols-5 .col{width : 100%!important; min-height: inherit; border-right: none}
#products .cols-5 .col ul{display: none}
#products .cols-5 .col:last-child{border-right:none}

} 


/** ***********************************************

Page

*********************************************** **/



.sec-common{min-height: 300px; padding: 30px 0}
.sec-common h3.title{font-size: 30px; font-weight: bold;border-bottom:solid 1px #ddd; margin-bottom: 10px; padding-bottom: 5px}



#news .sec-common{width:800px; margin: 0 auto}
#news .date{font-size: 12px; color:#999}

#page .sec-common{width:800px; margin: 0 auto}
#technology .sec-common{width:800px; margin: 0 auto}

.entry{padding: 20px 0 40px}
.entry p{text-align: justify}
.entry ul{padding: 1em}
.entry ul li{list-style: disc outside; margin-left: 10px; padding-left: 10px; margin-bottom: 1em}
.entry img{max-width: 100%; max-height: 600px; width: auto; height: auto}


@media screen and (max-width: 800px) {

#news .sec-common{width:100%}
#page .sec-common{width:100%}
#technology .sec-common{width:100%}

} 


#corporate-info .sec-common{}

#bg-about{max-width: 1024px; min-height: 800px;  margin: 40px auto;background-image: url(../images/page/bg-about.png); background-size: 400px; background-position: left top ; padding-left: 450px; }

#bg-about p{font-size: 18px; margin-top: 2em; line-height: 200%; }
#bg-about p:first-child{padding-top: 40px}


@media screen and (max-width: 1024px) {

#bg-about{background-size: 250px; padding-left: 300px; }
#bg-about p:first-child{padding-top: 20px}

} 

@media screen and (max-width: 700px) {

#bg-about{background: none; min-height: inherit; padding: 0px 20px; }

} 

@media screen and (max-width: 500px) {

#bg-about{padding: 0px 10px; }
#bg-about p{font-size: 16px; margin-top: 2em; line-height: 180%; }
#bg-about p:first-child{padding-top: 0px}

} 

/** ***********************************************

Distributor List

*********************************************** **/

#distributors .sec-common .inner{max-width: 900px; padding-bottom: 100px}
#distributors #tab-menu{text-align: center; margin-bottom: 30px}
#distributors #tab-menu li a{font-size: 16px;padding: 14px 10px 0;}

#distributors .panel{overflow-x: auto;-webkit-overflow-scrolling: touch;}
#distributors .dt-list{background-color: #ddd; border-spacing: 1px; margin: 0 auto; width: 96%; min-width: 800px}
#distributors .dt-list tr:nth-of-type(1n){background-color: #fff}
#distributors .dt-list tr:nth-of-type(2n){background-color: #eee}

#distributors .dt-list th{background-color: #000; color:#fff; text-align: center; padding: 10px; font-size: 13px}
#distributors .dt-list td{padding: 10px; font-size: 13px}
#distributors .dt-list th:nth-of-type(4){white-space: nowrap}
#distributors .dt-list td:nth-of-type(4){white-space: nowrap}

#distributors a.bt-login{color:#fff;display: block; margin: 0 0 20px auto; background-color:#29abe2;  border-radius: 3px;width: 180px; font-size: 16px; text-align: center; padding: 15px;}
#distributors a.bt-login:hover{background-color: #ccc}

.wrap-login{display: none;width: 300px; height: 300px; position: fixed; top:50%; left: 50%; margin-top: -150px; margin-left: -150px; z-index: 99999; background-color: #fff; border-radius: 3px; padding: 20px}
.bg-layer{display: none; width: 100%; height: 100%; position: fixed; top:0; left: 0;  background-color: rgba(0,0,0,.8); z-index: 99998}

.wrap-login p{font-size: 14px; margin-top: 10px}
.wrap-login input{width: 100%; padding: 3px; height: 30px;font-size: 14px}
.wrap-login button{background-color:#0071bc; color:#fff; border:none; font-size: 16px; text-align: center; padding: 5px 20px; border-radius: 3px; margin-top: 20px}
.wrap-login button:hover{background-color: #ccc}
.wrap-login .bt-close{position: absolute; top:5px; right:5px; font-size: 20px}


@media screen and (max-width: 900px) {

#distributors .dt-list{cursor:col-resize}
#distributors #tab-menu li a{font-size: 14px;padding: 14px 5px 0;}
#distributors a.bt-login{margin: 0 auto 20px auto}
} 

@media screen and (max-width: 500px) {

#distributors #tab-menu{padding-bottom: 30px}
#distributors a.bt-login{width: 160px; font-size: 14px; padding: 10px;}

} 


#support .sec-common .inner{max-width: 800px}
#support .note{text-align: center; padding-top: 0px; padding-bottom: 30px}
#support h3.p-title{font-size: 24px; text-align: center; padding: 20px}
#cat-list{padding: 20px; text-align: center}
#cat-list li{width: 25%; padding: 10px}
#cat-list li span{display: block; font-size: 12px}
#cat-list li a:hover img{opacity: .8}
#cat-list li img{max-height: 240px}

#support .block-01{border-top:solid 1px #ddd; padding: 20px 0}
#support .block-02{border-top:solid 1px #ddd; padding: 20px 0; min-height: 200px}
#support .pull{font-size: 16px; border:solid 1px #ddd; padding: 5px 15px; width: 200px; margin: 30px auto; position: relative; border-radius: 3px}
#support .pull i{position: absolute; top:50%; right: 10px; margin-top: -8px; display: block; padding-left: 10px; border-left:solid 1px #ddd}
#support .pmenu{position: relative}
#support .pmenu ul{width: 200px; max-height:250px; overflow-y: auto;  position: absolute; top:40px; left: 50%; margin-left: -100px; background-color: #fff;border:solid 1px #ddd; border-bottom:none; display: none}
#support .pmenu ul li{border-bottom: solid 1px #ddd;font-size: 13px; padding: 10px; cursor:pointer; curosr:hand}

#support .wrap-dl{background-color: #f5f5f5; padding: 20px; width: 300px; margin: 0 auto; text-align: center; display: none}
#support .bt-dl{background-color:#b90c0c; color:#fff; padding: 5px;display: block; margin-top: 10px; border-radius: 3px}
#support .bt-dl span{display: block; font-size: 10px; margin-top: 5px}


@media screen and (max-width: 900px) {

#cat-list li{width: 33.33333%}
} 

@media screen and (max-width: 500px) {

#cat-list li{width: 50%}

} 

.at-below-post{margin-top: 2em}

#pager-single{text-align: center; padding: 40px 0 }