@charset "utf-8";
@import url("./base.css");
@font-face {
	font-family: "Klavika-MediumCond";
	src: 
	url("../fonts/Klavika-MediumCond.ttf") format("truetype"),
	url("../fonts/Klavika-MediumCond.eot") format("embedded-opentype"),
	url("../fonts/Klavika-MediumCond.svg") format("svg");
}

body{font-family: 'Klavika-MediumCond';}
/*header*/
header{z-index: 3;position: sticky;top: 0;height: 80px;background-color: #121212;transition: .5s;}
header > .w1400{display: flex;justify-content: space-between;align-items: center;}
/*logo*/
header .logo{}
header .logo img{max-width: 160px;max-height: 30px;transition: .5s;}
/*移动端导航按钮*/
header .menu-btn{display: none;z-index: 1;position: absolute;right: 0;top: 50%;width: 20px;height: 18px;cursor: pointer;transform: translateY(-50%);}
header .menu-btn span{display: block;height: 2px;background-image: linear-gradient(90deg,#00F2FE,#1D41F1);transition: .3s;}
header .menu-btn span:nth-child(2){margin: 6px 0;}
/*导航*/
header .nav-box .nav-1st{display: flex;}
header .nav-box .nav-1st > li{position: relative;display: inline-block;vertical-align: top;padding: 0 30px;}
header .nav-box .nav-1st > li > a{position: relative;display: block;padding: 0 .3em;font-size: 20px;line-height: 80px;color: #fff;white-space: nowrap;text-transform: capitalize;transition: .5s;}
header .nav-box .nav-1st > li > a::after{content: '';position: absolute;left: 0;right: 0;top: calc(50% + 1em);height: 2px;background-image: linear-gradient(90deg,#00F2FE,#1D41F1);transform: scaleX(0);transform-origin: right bottom;transition: transform .3s ease-in-out;}
header .nav-box .nav-1st > li:hover > a::after{transform: scaleX(1);transform-origin: left bottom;}
header .nav-box .nav-1st > li.on > a::after{transform: scaleX(1);}
header .nav-box .nav-2nd{display: none;z-index: 2;position: absolute;left: 50%;top: 100%;width: 100%;min-width: 140px;padding: 8px 0;background-color: #fff;border-radius: 4px;transform: translateX(-50%);box-shadow: 0 4px 20px rgba(0,0,0,.15);}
header .nav-box .nav-2nd > li{position: relative;}
header .nav-box .nav-2nd > li > a{z-index: 1;position: relative;display: block;padding: 10px;line-height: 16px;text-align: center;color: #0c0c0c}
header .nav-box .nav-2nd > li > a::before{content: '';z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-image: linear-gradient(90deg,#00F2FE,#1D41F1);transform: scaleX(0);transform-origin: left;transition: .3s;}
header .nav-box .nav-2nd > li > a:hover{color: #fff;}
header .nav-box .nav-2nd > li > a:hover::before{transform: scaleX(1);}
header .nav-box .nav-2nd-full-screen{display: none;position: fixed;left: calc(50% - 700px);right: calc(50% - 700px);top: 80px;background-color: #fff;border-radius: 0 0 20px 20px;overflow: hidden;box-shadow: 0 4px 8px rgba(0,0,0,.2);}
header .nav-box .nav-product-wrap{display: flex;height: 50vh;}
header .nav-box .nav-product-wrap .tabs{flex: 0 0 240px;background-color: #121212;}
header .nav-box .nav-product-wrap .tabs .item{position: relative;display: block;padding: 1.5em 3.5em 1.5em 3em;font-size: 18px;line-height: 1.2;color: #fff;transition: .3s;}
header .nav-box .nav-product-wrap .tabs .item::before{content: '';position: absolute;left: 0;right: 0;bottom: 0;height: 1px;background-image: linear-gradient(90deg,#00F2FE,#1D41F1);}
header .nav-box .nav-product-wrap .tabs .item:after{content: '';position: absolute;right: 2em;top: 50%;width: 8px;height: 8px;border-top: 1px solid currentColor;border-right: 1px solid currentColor;transform: translate(-50%,-50%) rotate(45deg);}
header .nav-box .nav-product-wrap .tabs .item:first-child{border-top: 0;}
header .nav-box .nav-product-wrap .tabs .item.on{background-color: #fff;color: #121212;}
header .nav-box .nav-product-wrap .tabs-content{flex: 100%;box-sizing: border-box;padding: 20px 100px;border-left: 1px solid #eee;overflow: hidden;}
header .nav-box .nav-product-wrap .tabs-content .item{display: none;}
header .nav-box .nav-product-wrap .tabs-content .item.show{display: block;}
header .nav-box .nav-product-wrap .tabs-content .item .list{column-count: 3;column-gap: 2em;column-fill: auto;height: calc(50vh - 40px);}
header .nav-box .nav-product-wrap .tabs-content .item .list li a{position: relative;display: inline-block;vertical-align: top;padding: .6em;color: #121212;transition: .3s;}
header .nav-box .nav-product-wrap .tabs-content .item .list li a::after{content: '';position: absolute;left: 0;right: 0;bottom: 0;height: 2px;background-image: linear-gradient(90deg,#00F2FE,#1D41F1);transform: scaleX(0);transform-origin: left;transition: .3s;}
header .nav-box .nav-product-wrap .tabs-content .item .list li a:hover{color: #1D41F1;}
header .nav-box .nav-product-wrap .tabs-content .item .list li a:hover::after{color: #1D41F1;transform: scaleX(1);}
/*链接按钮*/
header .link-btn{z-index: 1;position: relative;padding: 0 1.5em;background-image: linear-gradient(90deg,#121212,#121212), linear-gradient(90deg,#00F2FE,#1D41F1);background-clip: padding-box, border-box;background-origin: padding-box, border-box;border: 1px solid transparent;border-radius: 18px;line-height: 36px;white-space: nowrap;color: #fff;}
header .link-btn::after{content: '';display: inline-block;vertical-align: middle;width: 12px;height: 12px;margin: -.25em 0 0 .8em;background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgb3BhY2l0eT0iLjAxIiBkPSJNLjUuNWgxOXYxOUguNXoiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBjeD0iOSIgY3k9IjkiIHI9IjgiLz48cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTUgMTVsNCA0Ii8+PC9nPjwvc3ZnPg==') center no-repeat;background-size: 100% 100%;}
/*搜索按钮*/
header .search-btn{width: 60px;height: 60px;background: rgba(255,255,255,.25) url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgb3BhY2l0eT0iLjAxIiBkPSJNLjUuNWgxOXYxOUguNXoiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBjeD0iOSIgY3k9IjkiIHI9IjgiLz48cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTUgMTVsNCA0Ii8+PC9nPjwvc3ZnPg==') center no-repeat;background-size: 33% 33%;border-radius: 50%;cursor: pointer;transition: .5s;}
/*弹窗内容-搜索栏*/
.popup-top-search{position: relative;margin: 30px;}
.popup-top-search .text-input{box-sizing: border-box;width: 100%;height: 40px;padding: 0 50px 0 10px;border: 1px solid #eee;}
.popup-top-search .sub-btn{position: absolute;right: 0;top: 0;width: 40px;height: 40px;background: #24569E url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgb3BhY2l0eT0iLjAxIiBkPSJNLjUuNWgxOXYxOUguNXoiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBjeD0iOSIgY3k9IjkiIHI9IjgiLz48cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTUgMTVsNCA0Ii8+PC9nPjwvc3ZnPg==') center no-repeat;background-size: 20px 20px;}

/*footer*/
footer{}
footer .w1400{display: flex;justify-content: space-between;align-items: center;height: 160px;}
/*logo*/
footer .logo img{max-width: 160px;max-height: 30px;filter: brightness(0) invert(1);}
/*底部导航*/
footer .bottom-nav .nav-1st{display: flex;}
footer .bottom-nav .nav-1st > li{margin: 0 30px;}
footer .bottom-nav .nav-1st > li > a{display: block;color: #fff;transition: .3s;}
footer .bottom-nav .nav-1st > li > a:hover{transform: translateY(-.2em);}
/*分享栏*/
footer .share-wrap .item{margin-left: 20px;border: 0;}
footer .share-wrap .item .icon{width: 100%;height: 100%;filter: none;}


/*笔记本1920*1080显示放大比例为125%，实际分辨率为1920/1.25=1536*/
@media screen and (max-width: 1550px){
	
}

/*中屏PC，分辨率1366*/
@media screen and (max-width: 1440px){
	/*header*/
	header .nav-box .nav-1st > li{padding: 0 20px;}
	header .nav-box .nav-1st > li > a{font-size: 16px;}
	header .nav-box .nav-2nd-full-screen{left: 3%;right: 3%;}
	header .nav-box .nav-product-wrap .tabs{flex: 0 0 200px;}
	header .nav-box .nav-product-wrap .tabs .item{padding: 1em 3em 1em 2em;font-size: 16px;}
	header .nav-box .nav-product-wrap .tabs .item:after{right: 1.2em;}
	header .nav-box .nav-product-wrap .tabs-content{padding: 15px 60px;}

	/*footer*/
	footer .w1400{height: 100px;}
	footer .bottom-nav .nav-1st > li{margin: 0 20px;}
	footer .share-wrap .item{width: 24px;height: 24px;}
}

/*小屏PC，分辨率1280*/
@media screen and (max-width: 1300px){
	
}

/*pad横屏，分辨率1024*/
@media screen and (max-width: 1024px){
	/*header*/
	header{height: 60px;}
	header .logo img{max-width: 120px;max-height: 30px;}
	header .menu-btn{display: block;}
	.nav-box{display: none;}
	header .link-btn{padding: 0 1em;margin-right: 50px;line-height: 28px;}
	header .link-btn::after{width: 10px;height: 10px;margin: -0.25em 0 0 .4em;}
	/*手机菜单-语言栏*/
	.mm-menu .icon{vertical-align: middle;width: 14px;height: 14px;margin: -.25em .4em 0 0;filter: brightness(0) invert(.5);}

	/*footer*/
	footer .w1400{height: 60px;}
	footer .logo img{max-width: 120px;max-height: 30px;}
	footer .bottom-nav{display: none;}
}

/*phone和pad竖屏，分辨率820*/
@media screen and (max-width: 820px){
	
}