/* ===== key-nav.css: Header, Navigation, Search Popup ===== */

.topad-pic{background-color:var(--main-yellow-color);color:#000000;font-size:15px;position:relative;text-align:center;padding:0px;margin:0px;height:60px;}

.topad-pic img{width:100% !important;height:100%;object-fit: contain;}

.topad-pic .ad-close{position:absolute;width:40px;height:40px;top:5px;right:5px;color:#000;z-index:10000;text-align:center;cursor:pointer;line-height:40px}

.topad-pic .ad-close:hover{color:var(--main-white-color);background-color:var(--main-blue-color)}

.navwidth{margin:auto;position:relative}

header{position:sticky;top:0;z-index:1000;background-color:var(--main-blue-color);/*border-top:6px solid var(--main-yellow-color)*/}

@media screen and (min-width:993px){header{position:sticky;top:0;z-index:1000}
}

nav{height:var(--nav-height);position:relative}

#logo{position:absolute;top:0px;left:0px;height:var(--nav-height);width:260px;padding-top:6px}

#nav-right{display:flex;align-items:center;justify-content:center;cursor:pointer;position:absolute;height:var(--nav-height);width:120px;right:0px;top:0px}

#nav-right{color:var(--main-white-color)}

#nav-right span{padding:8px;margin-right:8px;width:50px;height:50px}

#nav-right span:hover{color:var(--main-yellow-color)}

#nav-tit{font-size:26px}

#search-btn{font-size:34px}

.fixed{position:fixed;top:0;left:0;z-index:1000;width:100%}

.f-nav{width:100%;position:relative;margin:0px;padding:0px;}

.f-nav > li > a,.f-nav li > span{font-family:'open-sans-bold',sans-serif;font-size:18px;display:block;padding-left:15px;color:var(--main-white-color)}

.f-nav > li{position:relative;text-align:left;margin-bottom:0px;}

.f-nav > li > .menu-dropdown-icon{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;right:0;padding-left:0px;width:25px;height:30px;z-index:100}

.f-nav > li > a span{margin-left:5px}

.f-nav > li:hover > a,.f-nav > li:hover > span{color:var(--main-yellow-color)}

@media screen and (min-width:993px){.navwidth{width:100%}
#nav-menu{position:absolute;top:0px;right:100px;width:77%;height:var(--nav-height);padding-left:20px}
.f-nav > li{display:inline-flex;align-items:center;justify-content:center;height:var(--nav-height);padding-right:20px;padding-left:10px}
#nav-tit{display:none}
#nav-right span{}
}

@media screen and (min-width:1400px){.f-nav > li > a,.f-nav li > span{font-size:16px;padding-left:5px}
.f-nav > li{padding-right:20px;padding-left:10px}
}

@media screen and (min-width:1199px) and (max-width:1399px){.f-nav > li{padding-right:25px;padding-left:10px}
.f-nav > li > a,.f-nav li > span{font-size:16px;padding-left:5px}
}

@media screen and (min-width:993px) and (max-width:1200px){.f-nav > li{padding-right:25px;padding-left:5px}
.f-nav > li > a,.f-nav li > span{font-size:14px;padding-left:0px}
}

@media screen and (max-width:992px){
    .navwidth{max-width:100%;}
    #nav-menu{height:400px;overflow-y: auto;position:relative;top:var(--nav-height);width:100%;display:none;background-color:var(--main-blue-color);z-index:1000}
.f-nav > li{width:100%;text-align:left;padding-top:15px;padding-bottom:15px;margin-top:0px;margin-bottom:0px}
.f-nav > li .icon-angle-down{position:absolute;top:0;right:0;width:50px;height:50px}
#nav-right span{display:inline-block}
#nav-tit{display:block}
}

.f-nav > li .s-menu-nomal a,.f-nav > li .s-menu a{color:var(--main-black-color)}

.f-nav > li .s-menu-nomal a{display:block}

.f-nav > li .s-menu-nomal{display:none}

.f-nav > li .s-menu-nomal{padding:0px;margin:0px;z-index:1000}

.f-nav > li .s-menu-nomal > li{padding:10px;margin:0}

.f-nav > li .s-menu-nomal > li:hover{background-color:var(--main-yellow-color);color:var(--main-black-color)}

.f-nav > li > .s-menu-nomal{background-color:var(--main-hui-color)}

@media screen and (min-width:993px){.f-nav > li > .s-menu-nomal{width:250%;position:absolute;left:0;display:none;top:var(--nav-height)}
.f-nav > li:hover .s-menu-nomal{display:block}
.f-nav > li > .s-nomal-fleft{position:absolute;width:600%;left:-180%;display:none}
.f-nav > li > .s-nomal-fleft li{width:33%;float:left}
}

@media screen and (max-width:992px){.f-nav > li > .s-menu-nomal{position:relative;width:100%;display:none;margin-top:15px}
.f-nav > li > .s-menu-nomal li,.f-nav > li > .s-nomal-fleft li{position:relative}
.f-nav > li > .s-nomal-fleft{position:relative;width:100%;display:none;margin-top:15px}
}

.f-nav > li .s-menu > ul{padding:0px;margin:0px}

.f-nav > li .s-menu > ul > li{padding:10px 8px 10px 8px;margin:0}

.f-nav > li .s-menu > ul > li:hover{background-color:var(--main-yellow-color);color:var(--main-black-color)}

.f-nav > li > .s-menu{z-index:1000;background-color:var(--main-hui-color)}

.f-nav > li > .s-menu .sec-left-menu{padding-top:15px;padding-bottom:15px;position:relative}

.f-nav > li > .s-menu .sec-left-menu > ul{padding:0px}

.f-nav > li > .s-menu .sec-left-menu > ul > li{padding:10px 10px 10px 10px;margin:0}

.f-nav > li > .s-menu .sec-left-menu > ul > li .sec-menu-tit{position:relative;width:100%;padding-right:30px}

.sec-menu-tit .icon-angle-right{position:absolute;width:30px;height:30px;top:-4px;right:0;line-height:30px;text-align:center;z-index:100}

.sec-left-menu > ul > li:hover .sec-menu-tit a{font-weight:bold}

.sec-left-menu > ul > li .three-right-menu{top:0;padding:15px 0px 0px 0px;margin:0px;height:100%;display:none}

.three-right-menu ul li{padding:10px;border-bottom:1px solid #ccc}

.three-right-menu ul li:hover{background-color:var(--main-yellow-color);color:var(--main-black-color);border-bottom:1px solid var(--main-yellow-color)}

.three-right-ad{text-align:left;display:none}

.three-right-ad strong{font-size:20px;margin-top:20px;margin-bottom:10px;display:block}

.three-right-ad p{margin-top:15px;margin-bottom:10px;display:block;font-size:14px}

.three-right-ad img{max-width:100%;display:block;margin:25px auto auto auto;height:auto}

.over-menu{overflow-y:auto;height:350px}

@media screen and (min-width:993px){.f-nav > li .s-menu{display:none}
.f-nav > li:hover .s-menu{display:flex}
.f-nav > li > .s-menu{position:fixed;left:14vw;width:72vw}
.f-nav > li > .s-menu .sec-left-menu{width:28vw;min-height:400px;background-color:var(--main-white-color)}
.f-nav > li > .s-menu .sec-left-menu > ul{margin:0 0 0 10%;width:90%}
.sec-left-menu > ul > li .three-right-menu{position:absolute;left:28vw;width:62vw}
.sec-left-menu > ul > li:hover .three-right-menu{display:block}
.three-right-menu ul{width:40vw;overflow-y:auto;height:400px}
.three-right-menu ul li{padding:10px;margin:0 15px 0 15px}
.three-right-ad{width:20vw;position:absolute;top:0;left:68vw;height:100%;padding-left:20px}
.f-nav > li > .s-menu .sec-left-menu > ul > li:hover,.three-choose-bg{background-color:var(--main-yellow-color);color:var(--main-black-color)}
.f-nav > li > .s-menu .sec-left-menu > ul > li:hover a{color:var(--main-black-color)}
}

@media screen and (max-width:992px){.f-nav > li > .s-menu{position:relative;display:none}
.f-nav > li > .s-menu .sec-left-menu{width:100%;background-color:var(--main-yellow-color);margin-top:15px}
.f-nav > li > .s-menu .sec-left-menu > ul{margin:0;width:100%}
.sec-left-menu > ul > li .three-right-menu{position:relative;width:92%;background-color:var(--main-hui-color);margin-top:15px;padding:15px;display:none}
.three-right-menu ul{position:relative;width:100%;margin:0px;padding:0px;overflow-y:auto;max-height:200px}
.three-right-menu ul li{margin:0;padding:10px 0px}
.three-right-ad{display:none}
}

.pop-bg{background-color:rgba(0,0,0,0.8);position:fixed;width:100%;height:100%;z-index:1000;top:0;left:0;display:none}

.search-area{position:relative;/*background-color:var(--main-white-color)*/;border-radius:5px}

.search-area .input-area{border-radius:5px;width:100%;border:0px;height:50px;padding-left:10px}

.search-area .select-area{height:50px;border:0;font-size:14px;line-height:22px;width:150px;border-top-left-radius:5px;border-bottom-left-radius:5px}

.search-area #search-button{position:absolute;height:50px;width:70px;top:0;right:0;font-size:26px;border-top-right-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:center;align-items:center;background-color:var(--main-yellow-color);cursor:pointer}

.search-area #search-button:hover{background-color:var(--main-blue-color);color:var(--main-white-color)}

.search-area .search-close{position:absolute;top:-40px;right:-40px;width:40px;height:40px;display:flex;justify-content:center;align-items:center;color:var(--main-yellow-color);border-radius:40px;cursor:pointer}

.search-area .search-close:hover{color:var(--main-black-color);background-color:var(--main-yellow-color)}

@media screen and (min-width:993px){.search-area{width:50%;display:flex;left:25%;top:20%}
}

@media screen and (max-width:992px){
    .search-area{
        width:84%;display:flex;left:5%;top:20%;
    }
}

@media screen and (max-width:768px){
    .search-area{
        width:84%;display:block;left:5%;top:20%;
    }
    .search-area .select-area, .search-area .input-area{
        width:100%;
        border-radius:5px;
        margin-top:15px;
    }
    .search-area #search-button{
        position: relative;
        width:100%;
        border-radius:5px;
        margin-top:15px;
    }
}