@charset "utf-8";

.friendship-mode{padding-top: 15px; padding-top: 20px\0; padding-bottom: 35px; border-top: 1px solid #d9e6f7;}
.friendship-mode .container{position: relative;}
.friendship-mode .container .gov{position: absolute; top: 40%; left: 0; width: 16%; margin-top: -20px; text-align: center;}
.friendship-mode .container .gov a{display: inline-block;}
.friendship-mode .container .gov a i{display: inline-block; vertical-align: middle; margin-right: .3125em; width: 36px;}
.friendship-mode .container .gov a font{display: inline-block; vertical-align: middle; line-height: 50px;}
@media (max-width:1200px) {
.friendship-mode .container .gov{width: 20%;position: relative;margin-top: 0; width: auto; text-align: left;}
}
@media (max-width:768px) {
.friendship-mode .container .gov{position: relative; margin-top: 0; width: auto; text-align: left;}
}
.friendships{margin-right: 16%; margin-left: -15px; font-size: 15px;}
.friendships .select{position: relative; float: left; width: 25%; margin-top: 15px}
.friendships .select dt{position: relative; z-index: 11; margin-right: 15px; margin-left: 15px; height: 34px; border: 1px solid #d9e6f7; line-height: 34px; padding-left: 10px; cursor: pointer; padding-right: 12px; background-color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.friendships .select dt:hover,
.friendships .select dt.cur{border:1px solid #409dfe; box-shadow:0 0 3px #409dfe;}
.friendships .select dt i{position: absolute; top: 50%; right: 10px; line-height: 1em; margin-top: -.5em; color: #999;}
.friendships .select dd{position: absolute; right: 15px; left: 15px; top: 35px; z-index: 99; display: none; background: #fff; border: 1px solid #d9e6f7;}
.friendships .select dd ul{padding: 4px; max-height: 224px; overflow: auto;}
.friendships .select dd ul li a{line-height: 1.25em; display: block; padding: 6px 8px;}
.friendships .select dd ul li a:hover{background-color: #f5f5f5;}

@media (max-width:1480px) {
.friendships{margin-left: -10px;}
.friendships .select dt{margin-right: 10px; margin-left: 10px;}
.friendships .select dd{right: 10px; left: 10px;}
}
@media (max-width:1200px) {
.friendships{margin-right: 20%; margin-left: -8px;}
.friendships .select dt{margin-right: 7px; margin-left: 8px;}
.friendships .select dd{right: 7px; left: 8px;}
.friendships .select{width: 50%;}
}
@media (max-width:768px) {
.friendships{margin-right: -7px;}
}
@media (max-width:480px) {
.friendships{margin-right:0; margin-left:0;}
.friendships .select{width: 100%; margin-top: 15px;}
.friendships .select dt{margin-right: 0; margin-left: 0;}
.friendships .select dd{position: static;}
.friendships .select dd ul{max-height: 148px;}
}

.friendlinks{position: relative; margin-right: -15px; margin-left: 16%; font-size: 18px;}
.friendlinks .select{float: left; width: 25%; margin-top: 15px}
.friendlinks .select dt{position: relative; z-index: 11; margin-right: 15px; margin-left: 15px; height: 34px; border: 1px solid #d9e6f7; line-height: 34px; padding-left: 10px; cursor: pointer; padding-right: 12px; background-color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.friendlinks .select dt:hover,
.friendlinks .select.on dt{border:1px solid #409dfe; box-shadow:0 0 3px #409dfe; z-index: 100;}
.friendlinks .select dt i{position: absolute; top: 50%; right: 10px; line-height: 1em; margin-top: -.5em; color: #999;}
.friendlinks .select dd{position: absolute; right: 15px; left: 15px; bottom: 35px; z-index: 99; display: none; padding: 10px; background: #fff; border: 1px solid #d9e6f7;}
.friendlinks .select dd ul li{float: left; width: 25%;}
.friendlinks .select dd ul li a{line-height: 1.25em; display: inline-block; padding: 6px 8px;}
@media (max-width:1480px) {
.friendlinks{margin-left: -10px;}
.friendlinks .select dt{margin-right: 10px; margin-left: 10px;}
.friendlinks .select dd{right: 10px; left: 10px;}
}
@media (max-width:1200px) {
.friendlinks{/*margin-right: 20%;*/ margin-left: -8px;}
.friendlinks .select{position: relative; width: 50%;}
.friendlinks .select dt{margin-right: 7px; margin-left: 8px;}
.friendlinks .select dd{right: 7px; left: 8px;}
.friendlinks .select dd ul{max-height: 168px; overflow: auto;}
.friendlinks .select dd ul li{width: 100%;}
.friendlinks .select dd ul li a{display: block;}
.friendlinks .select dd ul li a:hover{background-color: #f7f7f7;}
}
@media (max-width:768px) {
.friendlinks{margin-right: -7px;}
}
@media (max-width:480px) {
.friendlinks{margin-right:0; margin-left:0;}
.friendlinks .select{width: 100%; margin-top: 15px;}
.friendlinks .select dt{margin-right: 0; margin-left: 0;}
.friendlinks .select dd{position: static; padding: 0}
.friendlinks .select dd ul{padding: 10px; max-height: 148px;}
}