@charset "utf-8";

@import url('lib/animated.css');
@import url('lib/jquery-ui-1.10.4.custom.min.css');
@import url('lib/swiper.css');

/* ==============================
 * header
 * ============================== */
#headerWrap { position:fixed; top:0; left:0; z-index:2; width:100%; height:166px; border-bottom:1px solid #f2f2f2; background:rgba(255,255,255,0.95); transition: all .3s ease;}
#header { position:relative; width:100%; max-width:1400px; height:110px; padding:0 10px; margin:0 auto; transition: all .3s ease;}
#header .logo { position:absolute; top:50%; transform:translateY(-50%);}
#header .logo a { display:block; width:118px; height:53px; font-size:0; background:url('../images/common/logo.png') no-repeat;}
#header nav { display:flex; padding-left:480px; padding-top:30px; transition:all .3s ease;}
#header nav ul { display:flex; display:-ms-flex; align-items:center;}
#header nav > ul > li { margin-right:80px; transition:all .3s ease;}
#header nav > ul > li > a { display:block; padding-bottom:30px; line-height:50px; transition:all .3s ease;}
#header nav > ul > li > a:hover { font-weight:bold;}
#header nav .lang { margin-left:auto; margin-right:80px; font-size:0;}
#header nav .lang a { display:inline-block; line-height:50px; font-size:12px; color:#999999;}
#header nav .lang a + a:before { content:''; display:inline-block; width:1px; height:9px; margin:0 7px; vertical-align:middle; background:#e6e7e7;}
#header nav .lang a.on { font-weight:bold; color:#111;}
#header .btnAll { position:absolute; top:50%; right:10px; width:50px; height:50px; transform:translateY(-50%);}
#header .btnAll:before { content:''; display:block; position:absolute; top:50%; left:0; width:50px; height:5px; margin-top:-10px; background:#000; transition:all .3s ease;}
#header .btnAll:after { content:''; display:block; position:absolute; top:50%; left:0; width:50px; height:5px; margin-top:6px; background:#000; transition:all .3s ease;}
#header .btnAll span { position:absolute; top:50%; left:0; font-size:13px; opacity:0; text-align:center; color:#111; transform:translateY(-50%); transition:all .3s ease;}

#header .btnAll:hover:before { margin-top:-17px;}
#header .btnAll:hover:after { margin-top:13px;}
#header .btnAll:hover span { opacity:1;}

#header .subNav { visibility:hidden; position:absolute; top:110px; opacity:0; transform:translateY(10px); transition:all .3s ease;}
#header .subNav ul {}
#header .subNav li { margin-right:20px;}
#header .subNav li a { line-height:60px; font-size:15px; color:#a6a6a6;}
#header .subNav li.on a,
#header .subNav li a:hover { color:#000;}

/* #header nav > ul > li:hover .subNav { visibility:visible; opacity:1; transform:translateY(0px)} */

#header nav > ul > li:nth-child(1) .subNav {}
#header nav > ul > li:nth-child(2) .subNav { margin-left:-100px;}
#header nav > ul > li:nth-child(3) .subNav { margin-left:0px;}
#header nav > ul > li:nth-child(4) .subNav { margin-left:-100px;}
#header nav > ul > li:nth-child(4) .subNav a { display:inline-block;}

#header nav > ul > li.on > a { font-weight:bold;}
#header nav > ul > li.on .subNav { visibility:visible; opacity:1; transform:translateY(0px)}

#header nav ul.over {}
#header nav ul.over li.on > a { font-weight:normal;}
#header nav ul.over .on .subNav { visibility:hidden; opacity:0; transform: translateY(10px);}
#header nav ul.over .on.active > a,
#header nav ul.over .active > a { font-weight:bold;}
#header nav ul.over .active .subNav { visibility:visible; opacity:1; transform:translateY(0px)}

.headerBg { visibility: hidden; position:fixed; top:166px; left:0; width:100%; height:0px; border-bottom:1px solid #f2f2f2; box-shadow:0 3px 5px rgba(0,0,0,0.05); background:rgba(255,255,255,0.95); transition: all .3s ease;;}
.headerBg.active { visibility: visible; height:70px;}

.allMenuWrap { visibility:hidden; transition:all .3s ease;}
.allMenuWrap .bg { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.9)}
.allMenuBox { opacity:0; position:fixed; top:0%; left:0; right:0; height:100%; background:url('../images/common/bg_allmenu.jpg') no-repeat; transition:all .3s ease; transform:translateY(-100%);}
.allMenuBox .innerBox { display:flex; height:100%; overflow-y:auto;}
.allMenuBox .menu { flex:1 1 auto; padding-top:50px; padding-left:120px; margin:auto auto;}
.allMenuBox .menu > div { position:relative; margin-bottom:50px;}
.allMenuBox .menu h2 a { font-size:24px; color:#fff; font-weight:bold;}
.allMenuBox .menu ul { position:absolute; top:0; left:300px; font-size:0;}
.allMenuBox .menu li { display:inline-block; margin-right:55px;}
.allMenuBox .menu li a { font-size:16px; color:#fff;}
.allMenuBox .menu li a:hover { font-weight:bold;}
.allMenuBox .menu li.on a { text-decoration: underline;}
.allMenuBox .lang { position:absolute; top:30px; left:20px; font-size:0;}
.allMenuBox .lang a { display:inline-block; line-height:50px; font-size:12px; color:#999;}
.allMenuBox .lang a + a:before { content:''; display:inline-block; width:1px; height:9px; margin:0 7px; vertical-align:middle; background:rgba(255,255,255,0.1);}
.allMenuBox .lang a.on { font-weight:bold; color:#fff;}
.allMenuBox .btnClose { position:absolute; top:40px; right:20px; width:31px; height:31px; font-size:0; background:url('../images/common/btn_allmenu_close.png') no-repeat; transition:all .3s ease;}
.allMenuBox .btnClose:hover { transform:rotate(180deg);}

.allMenuWrap.on { visibility:visible; transition:all .3s ease;}
.allMenuWrap.on .allMenuBox { opacity:1; transform:translateY(0); transition:all .3s ease .3s;}

#headerWrap.scrollAction { height:126px;}
#headerWrap.scrollAction #header { height:70px;}
#headerWrap.scrollAction #header nav { padding-top:0;}
#headerWrap.scrollAction #header nav > ul > li > a { padding-bottom:0; line-height:70px;}
#headerWrap.scrollAction #header nav .lang { margin-top:10px;}
#headerWrap.scrollAction #header .subNav { top:70px;}
#headerWrap.scrollAction .headerBg { top:126px;}

/* ==============================
 * footer
 * ============================== */
#footerWrap { background:url('../images/common/bg_footer.png') repeat-x center top;}
#footerWrap .innerBox { height:390px;}
#footerWrap .innerBox:before { content:''; display:block; clear: both; height:1px;}
#footerWrap h1 { width:247px; height:60px; margin-top:80px; margin-left:30px; font-size:0; background:url('../images/common/footer_logo.png') no-repeat;}
#footerWrap .footerLinkGroup { position:absolute; top:80px; right:30px; font-size:0;}
#footerWrap .footerLinkGroup .linkList { display:inline-block; position:relative; margin-left:20px;}
#footerWrap .footerLinkGroup .linkList > a { display:block; position:relative; width:220px; border-bottom:2px solid #fff; line-height:40px; color:#fff; font-family: 'NotoSans'; font-size:13px;}
#footerWrap .footerLinkGroup .linkList > a:after { content:''; display:block; position:absolute; top:50%; right:0px; width:11px; height:6px; margin-top:-3px; background:url('../images/common/icon_footer_arrow.png') no-repeat; transition:all .3s ease;}
#footerWrap .footerLinkGroup .linkList > a.on:after { transform:rotate(180deg);}
#footerWrap .footerLinkGroup .linkList ul { display:none; position:absolute; z-index:1; bottom:40px; left:0; width:100%; border:1px solid #28282e; background:#fff;}
#footerWrap .footerLinkGroup .linkList ul li {}
#footerWrap .footerLinkGroup .linkList ul li a { display:block; padding-left:10px; line-height:30px; color:#28282e; font-size:13px; font-family: 'NotoSans'; transition:all .2s ease;}
#footerWrap .footerLinkGroup .linkList ul li a:hover { color:#fff; background:#28282e}
#footerWrap .link { position:absolute; top:270px; right:75px; width:420px;}
#footerWrap .link a { float:left; display:block; width:140px; font-size:12px; color:#fff; font-family: 'NotoSans'; line-height:2;}
#footerWrap .address { margin-left:30px; margin-top:135px; font-size:14px; color:#ffffff; font-family: 'NotoSans';}
#footerWrap .copy { margin-left:30px; margin-top:10px; font-family: 'NotoSans'; font-size:12px; color:#8a8a8a; font-weight:300;}
#footerWrap .btnPageTop { display:block; width:100%; height:70px; line-height:70px; text-align:center; color:#fff; font-family: 'NotoSans'; font-size:12px; background:#292937;}
#footerWrap .btnPageTop:after { content:''; display:inline-block; width:11px; height:13px; margin-left:15px; vertical-align:middle; background:url('../images/common/btnTop.png') no-repeat;} 
#footerWrap .facebook { position:absolute; bottom:80px; right:20px; font-size:14px; color:#ffffff; font-weight:bold;}
#footerWrap .facebook:after { content:''; display:inline-block; width:50px; height:50px; margin-left:15px; vertical-align: middle; background:url('../images/common/ico_facebook.png') no-repeat center center /100%;}


@media screen and (max-width: 1400px) {
	#header nav { position:absolute; top:0; right:100px; padding-left:0;}
	#header nav > ul > li { margin-right:40px;}
	#header nav > ul > li:nth-child(4) .subNav { right:0;}
	#header nav .lang { margin-right:0;}
	#header .subNav li a { font-size:14px;}
	
	#footerWrap .link { overflow:hidden; position:static; width:auto; margin-top:60px; margin-left:30px;}
	#footerWrap .link a { width:auto; margin-right:30px;}
	
	#footerWrap .address { margin-top:60px;}
}

@media screen and (max-width: 1200px) {
	#header nav { display:none;}
	.headerBg { display:none;}
}

@media screen and (max-width: 1023px) {
	#headerWrap { height:70px;}
	#header{ height:70px;}
	#header .logo a { width:100px; height:45px; background-size:100%;}
	#header .btnAll { width:38px; height:38px;}
	#header .btnAll:before { width:38px; height:4px;}
	#header .btnAll:after { width:38px; height:4px;}
	#header .btnAll span { font-size:0;}
	
	#header .btnAll:hover:before { margin-top:-10px;}
	#header .btnAll:hover:after { margin-top:6px;}

	.allMenuBox .menu { padding-left:10px; padding-top:60px;}
	.allMenuBox .menu > div { margin-bottom:40px;}
	.allMenuBox .menu h2 a { padding:20px 0 10px; font-size:20px;}
	.allMenuBox .menu ul { display:flex; position:relative; left:0;}
	.allMenuBox .menu li { display:block; margin-right:30px; margin-top:10px;}
	.allMenuBox .btnClose { width:20px; height:20px; top:20px; right:20px; background-size:cover;}
	.allMenuBox .lang { top:10px; left:30px; right:auto;}

	#footerWrap .innerBox { height:auto;}
	#footerWrap h1 { width:120px; height:40px; margin-left:0; margin-top:40px; background-size:100%;}
	#footerWrap .footerLinkGroup { position:static; margin-top:30px; margin-bottom:55px;}
	#footerWrap .footerLinkGroup .linkList { margin-left:0px; margin-right:10px;}
	#footerWrap .footerLinkGroup .linkList > a { width:150px; line-height:25px; font-size:12px;}
	#footerWrap .link { margin-top:13px; margin-left:0;}
	#footerWrap .link a { width:33.333%; margin-right:0; font-size:12px;}
	#footerWrap .address { margin-left:0; margin-top:30px; font-size:12px;}
	#footerWrap .copy { margin-left:0; margin-bottom:40px; margin-top:20px; font-size:10px;}
	#footerWrap .btnPageTop { height:50px; line-height:50px;}

	#footerWrap .facebook { bottom:0px; right:20px; font-size:12px;}
	#footerWrap .facebook:after { width:40px; height:40px;}
}



@media screen and (max-width: 640px) { 
	.allMenuBox .lang { left:20px;}
	.allMenuBox .menu { padding-left:0;}
	.allMenuBox .menu h2 a { display:block; border-bottom:1px solid rgba(255,255,255,0.8);}
	.allMenuBox .menu ul { display:block;}
	.allMenuBox .menu li { margin-right:0; margin-bottom:15px;}
	.allMenuBox .menu li a { display:block;}

	#footerWrap .facebook { position:static; bottom:0px; right:20px; font-size:12px;}
}