.header_box { position: relative; margin: 0 auto; width: 13rem; height: 0.8rem; font-size: 0.14rem; } .header_box .header_left { float: left; cursor: pointer; } .header_box .header_left > img { display: inline-block; margin-top: 0.24rem; margin-right: 0.08rem; height: 0.32rem; } .header_box .header_left > img.header_logo { width: 0.39rem; } .header_box .header_left > img.header_title { width: 1.35rem; } .header_box .header_left .left_white { display: inline-block; } .header_box .header_left .left_gray { display: none; } .header_box .header_right { float: right; } .header_box .header_right > .header_nav_item { position: relative; float: left; margin-left: 0.55rem; height: 0.8rem; line-height: 0.8rem; cursor: pointer; } .header_box .header_right > .header_nav_lang { position: relative; float: left; margin-left: 0.55rem; height: 0.8rem; line-height: 0.8rem; cursor: pointer; } .header_box .header_right > .header_nav_item > div::after { content: ""; width: 0; position: absolute; background: #2d8cf0; height: 0.04rem; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .header_box .header_right > .header_nav_item:hover > div::after, .header_box .header_right > .header_nav_item.selected > div::after { width: 100%; } .header_box .header_right > .header_nav_lang .nav_language_en { background-color: #2d8cf0; position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%) translateY(50%); -webkit-transform: translateX(-50%) translateY(50%); padding: 0.06rem 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; visibility: hidden; opacity: 0; z-index: 100; text-align: center; font-size: 0.14rem; line-height: 0.4rem; color: #fff; border-radius: 0.08rem; } .header_box .header_right > .header_nav_lang:hover .nav_language_en { display: block; visibility: visible; transform: translateX(-50%) translateY(0%); -webkit-transform: translateX(-50%) translateY(0%); opacity: 1; } .header_box .header_right > .header_nav_lang:hover .nav_language_en::after { border-left: 0.07rem solid transparent; border-right: 0.07rem solid transparent; border-top: 0.09660254rem solid #2d8cf0; width: 0; height: 0; content: ""; position: absolute; top: -0.08rem; left: 50%; transform: translateX(-50%) rotate(180deg); -webkit-transform: translateX(-50%) rotate(180deg); } .header_box .header_right > .header_nav_lang:hover .nav_language_en a { color: #fff; display: block; padding: 0; margin: 0 0.12rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; text-decoration: none; }