@charset "utf-8";
.sub-menu { display: none;  border-bottom: 1px solid #ddd}
.sub-menu > .at-container > ul { justify-content: left; width:100%; max-width: 825px; margin:0; padding:0; color:#333; }
.sub-menu > .at-container > ul > li { width:calc((100% - 60px) / 3 ); border-right:1px solid #ddd;}
.sub-menu > .at-container > ul > li:first-of-type { width:60px !important;  border-left:1px solid #ddd; border-right:1px solid #ddd;}
.sub-menu > .at-container > ul > li > a > i { font-size:25px; color:#fff; }
.sub-menu > .at-container > ul > li:first-of-type > a { display:block; position: relative; height:100%; width:100%; background: #08a0e0; }
.sub-menu > .at-container > ul > li:first-of-type > a:after { content:'\e900'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: xeicon; font-size: 25px; color: #fff; }

@media all and (max-width:768px) {
.sub-menu { display:none; }
.sub-menu > .at-container > ul > li { width:50%; }
}

.sub-menu .select-container { position: relative; }
.sub-menu .select-container:after { content:'\e943'; display:block;  position:absolute;  right:20px; top:50%; transform: translateY(-50%);  transition: all .2s; font-family: xeicon; line-height: 0;}
.sub-menu .select-container.active:after { transform:rotate(180deg); }
.sub-menu .select-checkbox { display: none; }
.sub-menu .select-label { display: block;  padding: 0 0 0 20px; margin:0; height: 60px; line-height: 60px; font-size:18px; cursor:pointer; position:relative; color:#333; }
.sub-menu .select-wrap { display: none;  position: absolute; z-index: 20; margin-left:-1px; width: 100%; background:#f9f9f9;   border:1px solid #ddd;  box-sizing: content-box;}
.sub-menu .select-container.active .select-wrap { display: block;}

.sub-menu .select-wrap .select { list-style: none; padding: 0; margin: 0; }

.sub-menu .select-wrap ul.select li { border-bottom:1px solid #ddd; }
.sub-menu .select-wrap ul.select li:last-of-type { border:none; }  
/* .sub-menu .select-checkbox:checked ~ .select-wrap { display: block; } */

.sub-menu select::-ms-expand { display: none;  }
.sub-menu .select a { display: block; text-decoration: none; color: inherit; padding:10px 20px; }
.sub-menu .select a:hover, .select a.on { background: #ededed; }


@media (max-width:768px){
    .sub-menu > .at-container > ul { flex-wrap: wrap;}
    .sub-menu > .at-container > ul > li { width: calc((100% - 60px) / 2) ;}
    .sub-menu > .at-container > ul > li:nth-of-type(4) { width: 100% !important; border-top: 1px solid #ddd;}    
    .sub-menu > .at-container > ul > li .select-label {height: 50px;  font-size: 16px; line-height: 50px;}
}


@media all and (max-width:480px){	
	.sub-menu .select-label { font-size:16px; padding-left:15px; }
	.sub-menu .select-label:before { left:7px; width:8px; }
	.sub-menu .select a { padding:8px 15px; }		
	.sub-menu > .at-container > ul > li:first-of-type { display:none; }
	.sub-menu > .at-container > ul > li:not(:first-of-type)  { width:50%; }	
}
@media all and (max-width:400px){
	.sub-menu .select-label { font-size:14px; padding-left:10px; }
	.sub-menu .select a { padding:8px 10px; font-size:15px;}	
	.sub-menu .select-container:after { right:7px; }
}