a {text-decoration:none;}

* {  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

.fLeft{float:left}
.fRight{float:right}
.txtL {text-align:left}
.txtC {text-align:center}
.txtR {text-align:right}
.semibold {font-weight:500}
.bold {font-weight:600}
.italic {text-decoration:italic}
.underline {text-decoration:underline}
.through {text-decoration:line-through}
.red {color:red}

.fade {transition:0.3s; -webkit-transition:0.3s }
.clear {width:100%; overflow:hidden}
.width50 {width:48%}

.tableTr {width:100%; overflow:hidden}
.tableTr > div {float:left}

.titleLine {clear:both; display:block; margin:20px auto; width:70px; height:1px; background-color:#00a0e9;}

.imgThumb {overflow:hidden; text-align:center}
.imgThumb img {display:block; width:100%; vertical-align:middle}
.imgThumb.vertical {width:auto; height:100%}
.imgThumb:hover .imgHover, .imgThumb:hover .videoHover {opacity:1}
.imgHover, .videoHover {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; background-color:rgba(0,0,0, .5); background-repeat:no-repeat; background-position:center center; transition:0.3s; -webkit-transition:0.3s}
.imgHover {background-image:url('../images/icons/zoom.png')}
.videoHover {background-image:url('../images/icons/play.png')}
.insideCenter {text-align:center}
.insideCenter > * {display:inline-block}

.btnStyleA {position:relative; display:inline-block; width:155px; line-height:36px;}
.btnStyleA_text {position:relative; font-size:18px; color:#00a0e9; text-align:center; z-index:2;  transition:0.3s; -webkit-transition:0.3s}
.btnStyleA_bg {position:absolute; top:0; left:0; width:100%; height:100%; border:3px solid #00a0e9; transform:skewX(-26deg); -webkit-transform:skewX(-26deg);  transition:0.3s; -webkit-transition:0.3s; z-index:1}
.btnStyleA:hover .btnStyleA_bg {background-color:#00a0e9}
.btnStyleA:hover .btnStyleA_text {color:#fff}

.btnCate {display:block; width:80%; line-height:43px; border:1px solid #868686; border-radius:9px; font-size:18px; color:#868686; text-align:center; margin-bottom:20px}
.btnCate span {display:inline-block}
.btnCate .cateIcon {position:relative; top:3px; margin-right:5px; width:20px; height:20px; background:url('../images/icons/cateIcon.png') no-repeat}
.btnCate.selected {border-color:#00a0e9; color:#00a0e9}
#btn_category .cateIcon {background-position:0 0px}
#btn_category.selected .cateIcon {background-position:0 -20px}
#btn_filter .cateIcon {background-position:-20px 0px}
#btn_filter.selected .cateIcon {background-position:-20px -20px}



/* flex box */
.flex {display:flex; display:-ms-flexbox; display:-webkit-flex; }
.flexFloatL {flex-direction:row; -ms-flex-direction:row; -webkit-flex-direction:row;}
.flexFloatR {flex-direction:row-reverse; -ms-flex-direction:row-reverse; -webkit-flex-direction:row-reverse;}
.flexWrap {flex-wrap:wrap ;-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.flexStart {justify-content:flex-start; -webkit-justify-content:flex-start;}
.flexHCenter {justify-content:center; -webkit-justify-content:center}
.flexBetween {justify-content:space-between; -webkit-justify-content:space-between;}
.flexEnd {justify-content:flex-end; -webkit-justify-content:flex-end;}
.flexValign {-webkit-align-items:center; -ms-flex-align:center; align-items:center;}

input[type="text"], input[type="password"] {width:100%; height:30px; padding:0 8px; border:1px solid #424242}
textarea {width:100%; height:150px; padding:8px; border:1px solid #424242}

/* For Old Broswer */
.flexFloatL > * {float:left}
.flexFloatR > * {float:right}
img , a {border:0  \9}
* {outline:0}