/*-----------------------------------------------------

    Title :  2016
    Usage :  common styles
    Edited:  2016-10-03

-------------------------------------------------------

    1. reset
    2. fonts
    3. typography
    4. default
    5. containers
    6. Skip Links
    7. banner
       7.1. logo
       7.2. site navigation
       7.3. search
       7.4. user
       7.5. category
    8. main content
    9. content info
   10. responsive (1358px)
   11. responsive (1138px)

-------------------------------------------------------*/



/*  1. reset
-------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

body {
	font-size: 62.5%;
	line-height: 1.2;
	-webkit-text-size-adjust: none;
	}

h1, h2, h3, h4, h5, h6,
input, select, button, textarea,
small {
	font-size: 100%;
	}

li {
	list-style: none;
	}

strong {
	font-weight: 700;
	}

img {
	vertical-align: top;
	}

img, abbr, fieldset, iframe {
	border: none;
	}

abbr {
	text-decoration: none;
	}

img, video {
	max-width: 100%;
	height: auto;
	}

iframe {
	max-width: 100%;
	}

object {
	outline: none;
	}

dfn {
	font-style: normal;
	}

mark {
	background: none;
	}

sup, sub {
	position: relative;
	vertical-align: baseline;
	font-size: 75%;
	line-height: 0;
	}

sup {
	top: -0.5em;
	}

sub {
	bottom: -0.25em;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}

kbd, samp,
input, select, textarea, button {
	color: inherit;
	font-weight: inherit;
	font-family: inherit;
	outline: none;
	box-shadow: none;
	}

textarea {
	-webkit-appearance: none;
	border-radius: 0;
	}

input[type="text"],
input[type="email"],
input[type="tel"] {
	-webkit-appearance: none;
	border-radius: 0;
	}

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
	}

input[type="search"] {
	-webkit-appearance: none;
	border-radius: 0;
	}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	}

input[type="search"]::-ms-clear {
	display: none;
	}

textarea {
	vertical-align: top;
	overflow: auto;
	}

[placeholder]::-webkit-input-placeholder {
	color: inherit;
	}

[placeholder]:focus::-webkit-input-placeholder {
	color: transparent;
	}

[placeholder]::-moz-placeholder {
	opacity: 1;
	}

[placeholder]:focus:-moz-placeholder {
	color: transparent;
	}

[placeholder]:focus::-moz-placeholder {
	color: transparent;
	}

button {
	cursor: pointer;
	overflow: visible;
	}

button::-moz-focus-inner {
	padding: 0;
	border: none;
	}



/*  2. fonts
-------------------------------------------------------*/

@font-face { /* Font Awesome */
	font-style: normal;
	font-weight: 400;
	font-family: "Font Awesome";
	src: url(../fonts/font-awesome.ttf) format("truetype"),
	     url(../fonts/font-awesome.eot?#iefix) format("embedded-opentype");
	}



/*  3. typography
-------------------------------------------------------*/

body {
	font-family: Arial, Helvetica, Tahoma, Verdana, DFLiHei, "華康儷黑", "Microsoft YaHei New", "Microsoft JhengHei", "微軟正黑體", "MHei", "Lucida Grande", "Lucida Sans Unicode", "STHeiti Light", "冬青黑体简体中文", "STXihei", sans-serif;
}

a {
	color: inherit;
	text-decoration: none;
	}

a:hover,
a:focus {
	color: #ff7800;
	background-color: transparent;
	}



/*  4. default
-------------------------------------------------------*/

/*  overwrite slick's default style to prevent sliders from becoming blurry for WebKit browsers  */

.webkit .slick-slider .slick-track,
.webkit .slick-slider .slick-list
{
	-webkit-transform: none;
	   -moz-transform: none;
	    -ms-transform: none;
	     -o-transform: none;
	        transform: none;
}



/*  5. containers
-------------------------------------------------------*/

body {
	background: #ededed;
	}



/*  7. banner
-------------------------------------------------------*/

#banner {
	min-width: 1000px;
	}

#banner .bg {
	position: relative;
	background: #f76b09 url(../images/bg_banner_bg.jpg?ver=2) repeat-x center top;
	}

#banner .bg .center {
	margin: 0 auto;
	width: 1000px;
	height: 84px;
	}



/*  7.1. logo
-------------------------------------------------------*/

#banner .bg .center h1 a {
	float: left;
	margin: 19px 0 0 15px;
	width: 178px;
	height: 45px;
	overflow: hidden;
	text-indent: -5000px;
	background: url(../images/sprite.png?ver=2) no-repeat;
	}



/*  7.2. site navigation
-------------------------------------------------------*/
/* Modified */
#sitenav {
	float: left;
	margin: 28px 0 0 50px;
	background: #fff;
	}

#sitenav ul li {
	position: relative;
	float: left;
	margin-right: -1px;
	width: 55px;
	height: 37px;
	}

#sitenav ul li:nth-child(1) {
	z-index: 5;
	}

#sitenav ul li:nth-child(2) {
	z-index: 4;
	}

#sitenav ul li:nth-child(3) {
	z-index: 3;
	}

#sitenav ul li:nth-child(4) {
	z-index: 2;
	}

#sitenav ul li:nth-child(5) {
	z-index: 1;
	}

#sitenav ul li:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: #c2c3c5;
	}

#sitenav ul li a {
	position: relative;
	display:  -ms-flexbox;
	display: -webkit-flex;
	display:         flex;
	     -ms-flex-align: center;
	-webkit-align-items: center;
	        align-items: center;
	        -ms-flex-pack: center;
	-webkit-align-content: center;
	      justify-content: center;
	padding: 0 0 2px 1px;
	height: 100%;
	color: #ef5508;
	font-size: 15px;
	letter-spacing: 0.1em;
	}

#sitenav ul li      a:hover,
#sitenav ul li.curr a {
	color: #fff;
	font-weight: 700;
	background: #f98209;
	}



/*  7.3. search
-------------------------------------------------------*/
/* modified*/

#banner .bg .center form {
	position: relative;
	float: left;
	margin: 28px 0 0 28px;
	width: 208px;
	height: 37px;
	background: #fff;
	border-radius: 3px;
	}

#banner .bg .center form div {
	height: 100%;
	}

#banner .bg .center form::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 15px);
	height: 100%;
	}

#banner .bg .center form div label {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 15px;
	height: 100%;
	color: #fa820a;
	font-size: 17.18px;
	line-height: 35px;
	}

#banner .bg .center form div input {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 42px 0 84px;
	width: 100%;
	height: 100%;
	color: #b7b6b6;
	font-size: 12px;
	background: none;
	border: none;
	}

#banner .bg .center form div button {
	position: absolute;
	top: 0;
	right: 0;
	width: 42px;
	height: 100%;
	font-size: 0;
	text-align: left;
	border: none;
	background: none;
	}

#banner .bg .center form div button::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 25px;
	background: url(../images/sprite.png?ver=2) no-repeat 0 -55px;
	}



/*  7.4. user
-------------------------------------------------------*/
/* modified */
#banner .bg .center .user {
	float: right;
	margin: 34px 20px 0 0;
	max-width: 70px;
	overflow: hidden;
	line-height: 30px;
	text-overflow: ellipsis;
	color: #ffffff;	
	}

#banner .bg .center .user a {
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.2em;
	}
/* modified*/
#banner .bg .center .user a:after {
	content: "";
	position: relative;
	top: -3px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 2px;
	width: 24px;
	height: 23px;
	background: url(../images/sprite.png?ver=2) no-repeat 0 -90px;
	}



/*  7.5. category
-------------------------------------------------------*/

#categ {
	width: 100%;
	padding: 0 15px;
	background: #fff;
	}

#categ ul {
	margin: 0 auto;
	max-width: 970px;
	font-size: 0;
	white-space: nowrap;
	}

#categ ul li {
	display: inline-block;
	color: #565455;
	}

/* modified */

#categ ul li a {
	position: relative;
	display:  -ms-flexbox;
	display: -webkit-flex;
	display:         flex;
	     -ms-flex-align: center;
	-webkit-align-items: center;
	        align-items: center;
	padding: 0 6px 2px 6px;
	height: 46px;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-decoration: none;
	}

#categ ul li.curr a {
	color: #ff7800;
	}

#categ ul li.curr a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: #ff7800;
	}

#categ ul li a span.orange{
	color:#ff7800;
}


/*  8. main content
-------------------------------------------------------*/

#main {
	position: relative;
	margin: 0 auto;
	padding: 15px 0 30px;
	width: 1340px;
	}

#main .ad {
	margin: 0 auto;
	text-align: center;
	}

#main::after {
	content: "";
	clear: both;
	display: block;
	}



/*  9. content info
-------------------------------------------------------*/

#contentinfo {
	position: absolute;
	top: -5000px;
	left: -5000px;
	}


/*  Extra - More adjustment  */

span.beta{
	position: relative;
	color: #ffffff;
	float: left;
	font-size: 11px;
	margin-left: -23px;
	margin-top: 17px;
}

#userpanel.panel.logined{
	float: right;
	margin-top: 40px;
	margin-right: 100px;
	color: #ffffff;
	font-size: 15px;
}

#userpanel.panel.notlogin{
	float: right;
	margin-top: 40px;
	margin-right: 100px;
	color: #ffffff;
	font-size: 15px;
}

#userpanel.panel a{
	color: #ffffff;
}

#userpanel.panel a.visited{
	color: #ffffff;
}

#userpanel.panel.logined .lang{
	margin-right: 10px;
}
	
#banner .bg .center .user a.username{
	font-size: 15px;
}
#banner .bg .center .user a.username:after{
	background: none;
	width: 0px;
	height: 0px;
}

#banner .avatar{
	float: right;
	margin: -30px 40px 0px 0px;
}

#banner .avatar .default{
	border-radius: 22px;
	width: 45px;
	height: 45px;
	border: 2px solid  #ffffff;
}

#banner .avatar a:hover,
#banner .avatar a hover{
	opacity: 0.8;
    filter: alpha(opacity=80);
}

/* . competition bar in the competition page
-------------------------------------------------------*/

#competition-sec{
	margin-bottom: 10px;
}

#competition-sec .nav{
	display: inline-block;
	width: 100%;
}

#competition-sec .nav ul{
	font-size: 0;
	}

#competition-sec .nav ul li {
	display: inline-block;
	margin-left: 12px;
	position: relative;
	width: 145px;
	text-align: center;
	}

#competition-sec .nav ul li:first-child{
	margin-left: 0px;
	width: 200px;
	font-size: 14px;
}
	
#competition-sec .nav ul li:last-child{
	float: right;
	margin-right: 8px;
}

#competition-sec .nav ul li a {
	display: block;
	padding: 3px 8px;
	color: #fff;
	letter-spacing: 0.07em;
	text-decoration: none;
	font-size: 16px;
	}

#competition-sec .nav ul li:first-child a{
	color: #0f63bb;
}

#competition-sec .nav ul li:first-child a:hover{
	color: #0c4a8b;
	/* text-decoration: underline; */
}

#competition-sec .nav ul li:last-child a{
	background: #f76b09;
}

#competition-sec .nav ul li:last-child a:hover{
	background: #e0620b;
}


#competition-sec .banner{
	margin: 0px 0px 10px 10px;
}



/* 10. responsive (1358px)
-------------------------------------------------------*/

@media (max-width: 1358px) {

/*  7. banner  *

#banner {
	min-width: 1120px;
	}

#banner .bg .center {
	width: 1120px;
	}


/*  7.2. search  *

#banner .bg .center form {
	margin-left: 51px;
	width: 522px;
	}


/*  7.3. user  *

#banner .bg .center .user {
	margin-left: 56px;
	}


/*  7.4. site navigation  *

#sitenav ul {
	max-width: 976px;
	}


/*  8. main content  */

#main {
	width: 1120px;
	}

}



/* 11. responsive (1138px)
-------------------------------------------------------*/

@media (max-width: 1138px) {

/*  7. banner  *

#banner {
	min-width: 1000px;
	}

#banner .bg .center {
	width: 1000px;
	}


/*  7.2. search  *

#banner .bg .center form {
	margin-left: 51px;
	width: 420px;
	}


/*  7.3. user  *

#banner .bg .center .user {
	margin-left: 28px;
	}


/*  7.4. site navigation  *

#sitenav ul {
	max-width: 856px;
	}

#sitenav ul li:not(:last-child) {
	margin-right: 35px;
	}


/*  8. main content  */

#main {
	width: 1000px;
	}

}