@charset "utf-8";
/* page-header */
    .page-header {
        position: fixed;
        z-index: 200;
        width: 100%;
        top: 0; left: 0;
    }
    .pn-global {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
        padding: 8px 0;
        text-align: right;
		font-size: 12px;
		line-height: 1;
        background-color: #e8e8e8;
        background-color: rgba(232, 232, 232, 0.83);
        border-bottom: 1px solid #babbbd;
    }
    .pn-global a {
        display: inline-block;
        padding: 0 8px;
        color: #373737;
        font-size: inherit;
        line-height: inherit;
        border-right: 1px solid #cacac8;
    }

	.pn-global a.pn-lang {
		float:left;
	}
	.pn-global a.pn-lang:nth-child(2),
    .pn-global a:last-child { border-right: 0; }

    .page-nav {
        position: relative;
        background-color: #e8e8e8;
        background-color: rgba(250, 250, 250, 0.8);
    }
    .page-nav .home-link,
    .pn-util {
        position: absolute;
        left: 50%; top: 29px;
    }
    .page-nav .home-link {
        margin: 0 0 0 -500px;
        width: 156px; 
		height: 66px;
		line-height: 62px;
    }
    .page-nav .icon-menu { display: none; }
    .pn-menu {
        margin: 0 250px 0 176px;
    }
    .pn-item {
        float: left;
        width: 20%;
        position: relative;
    }
    .pn-item > .link {
        display: block;
        color: #333;
        font-size: 1.4em;
        text-align: center;
        line-height: 66px;
    }
    .pn-sub-menu {
        position: absolute;
        width: 100%;
        z-index: 100;
        padding: 10px 0;
    }
    .pn-sub-item .link {
        display: block;
        color: #fff;
        font-size: 1.15em;
        line-height: 2;
        text-align: center;
    }
    .pn-util {
        bottom: 15px;
        margin: 15px 0 0 285px;
        width: 215px;
    }
    .pn-util .search-btn {  display: none;  }
    .page-nav .icon-wish {
        width: 36px; height: 36px;
        background-size: 100% auto;
    }
	.pn-util-search { 
		display: inline-block; 
		height: 36px;
		line-height: 36px;
		background-color: transparent;
		background-color: rgba(0, 0, 0, 0);
		transition: background 0.5s;
        vertical-align: top;
	}
    .pus-wrapper {
        overflow: hidden;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        display: inline-block;
        position: relative;
        width: 110px;
        height: 36px;
        margin: 0 0 0 5px;
        padding: 0 40px 0 18px;
        background-color: #fff;
        /* background-color: rgba(255, 255, 255, 0.4); */
        border-radius: 18px;
		box-shadow: 0 0 1px #ccc;
    }
    .pn-util-search .icon-search {
        position: absolute;
        top: 0; bottom: 0; right: 0;
        width: 40px;
        background-size: auto 18px;
    }
    .pn-util-search .keyword {
        display: block;
        width: 100%; height: 36px;
        font-size: 11px;
        line-height: 36px;
        background-color: transparent;
        border: 0;
        outline: none;
    }
    .pn-bg-js {
        display: none;
        position: absolute;
        left: 0;
        width: 100%;  height: 200px;
        z-index: 99;
        background-color: #262626;
        background-color: rgba(38, 38, 38, 0.65);
    }

    .page-nav-js {
        overflow: hidden;
		box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
    }
/*-page-header */
@media screen and (max-width: 1040px) {
    .pn-menu { margin-right: 100px; }
    .page-nav .home-link {
        left: 10px;
        margin-left: 0;
    }
    .pn-util {
        left: auto; right: 0;
        width: 90px;
    }

    .pn-util .search-btn {
        cursor: pointer;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        display: inline-block;
        width: 36px; height: 36px;
        margin-left: 5px;
    }
    .pn-util-search {
        display: none;
		position: fixed;
		z-index: 300;
		top: 0; right: 0; bottom: 0; left: 0;
		height: auto;
		text-align: center;
		background-color: #ccc;
		background-color: rgba(0, 0, 0, 0.85);
    }
	.pus-wrapper {
		top: 104px;
		width: 230px;
	}
}
@media screen and (max-width: 1000px) {
    .pn-util {
        left: auto;
        right: 0;
        margin-left: 0;
    }
}
@media screen and (max-width: 880px) {
    .page-nav .home-link {
      /*   width: 121px; */
    }
    .pn-menu { /* margin-left: 130px; */}
	.pn-item > .link{
		font-size:15px;	
	}
}
@media screen and (max-width: 768px) {
    .page-nav-js {
        overflow: initial;
    }
    .page-nav {
        height: 45px;
        background-color: rgba(232, 232, 232, 0.65);
        box-shadow: 0 1px 1px #d9d9d9;
    }
    .page-nav .icon-menu {
        display: block;
        position: absolute;
        left: 0; top: 0;
        width: 40px; height: 45px;
        background-size: auto 17px;
    }
    .page-nav .icon-menu.close {
        left: 100%;
        width: 40px;
    }
    .page-nav .home-link {
        top: 0; left: 45px;
        width: 156px;
		height: 45px;
        margin-top: 0;
        line-height: 42px;
    }
    .page-nav .home-link > img {
        height: auto;
        line-height: inherit;
    }
    .pn-util {
        top: 0;
        margin-top: 5px;
    }
    .pn-mask {
        display: none;
        overflow-y: auto;
        position: fixed;
        z-index: 101;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: #333;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .pn-mask .pn-sidebar {
        position: absolute;
        width: 60%;
        min-width: 280px;
        min-height: 400px;
        top: 0; bottom: 0;
        background-color: #555;
        background-color: rgba(0, 0, 0, 0.7);
        box-shadow: 0 0 5px 5px #111 inset;
    }
    .pn-global {
        position: relative;
        padding: 50px 0 0;
        background-color: rgba(0, 0, 0, 0.3);
        border-bottom: 0;
    }
    .pn-global a {
        display: block;
        float: left;
        width: 50%;
        padding: 0 0 0 2.1em;
        color: #fff;
        font-size: 1em;
        line-height: 3;
        text-align: left;
        border-top: 1px solid #333;
        border-right: 0;
    }
    .pn-global a:nth-child(3n),
    .pn-global a:nth-child(4n) {
        border-top: 0;
    }
    .pn-global a.account {
        position: absolute;
        top: 10px; left: 1.7em;
        width: 5em;
        padding: 0;
        font-size: 1.2em;
        line-height: 2;
        border: 0;

    }
    .pn-global a.register {
        right: 2em; left: auto;
        font-size: 1em;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    .pn-menu {
        margin: 0;
        padding-bottom: 20%;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .pn-item {
        float: none;
        width: auto;
        border-top: 1px solid #1a1a1a;
        border-bottom: 1px solid #000;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .pn-item > .link,
    .pn-sub-item .link {
        padding-left: 2em;
        color: #ccc;
        letter-spacing: 0;
        line-height: 3;
        text-align: left;
    }
    .pn-item > .link { font-size: 1.2em; }
    .pn-item > .link:hover {
        border-left: 2px solid #888;
        box-shadow: 0 0 15px 3px #202020 inset;
    }
    .pn-sub-menu {
        position: relative;
        padding: 0;
        background-color: rgba(0, 0, 0, 0.5);
        border-top: 1px solid #111;
    }
    .pn-sub-item {
        border-top: 1px solid #000;
        border-bottom: 1px solid #1a1a1a;
    }
    .pn-sub-item:first-child { border-top: 0; }
    .pn-sub-item:last-child { border-bottom: 0; }
    .pn-sub-item .link { padding-left: 3em; }
    .pn-sub-item .link:hover { border-left: 2px solid #888; }
    .pn-bg-js {display: none;}
}