@charset "utf-8"; body.active { overflow: hidden; } .mo_headerCon { display: none; } .mo_childCon { display: none; } .mo_langu{display:none} .mo_right{ display: flex; align-items: center; position: absolute; right: 4%; top: 0; width: 16%; justify-content: flex-end; height: 13.33vw;} .mo_left{ position: absolute; top: 0; left: 4%; height: 13.33vw; display: flex; align-items: center; width:70%; } .mo_left a{ width: 40%; max-width: 170px; } .mo_left a img{ width: 100%; } .mo_left > div{ color: #333333; border-left: 1px solid rgba(0,0,0,0.1); padding-left: 10px; margin-left: 10px; } @media only screen and (max-width: 850px) { #c_static_001_P_9035-1669022716907 { display: none; } .mo_headerCon { display: block; } .mo_headerHeight { display: block; } * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; } } .mo_headerCon { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 99; height: 13.33vw; background: rgba(255, 255,255, 1); overflow-y: hidden; max-height: none; transition: background 0.36s cubic-bezier(0.32, 0.08, 0.24, 1), height 0.56s cubic-bezier(0.52, 0.16, 0.24, 1); } .mo_headerCon.active { height: 100%; background: #fff; } .mo_header { height: 13.33vw; z-index: 2; } .mo_nav { position: relative; float: left; position: relative; z-index: 2; width: 25px; height:20px; cursor:pointer; } .mo_nav .nav_btn { height:20px; cursor: pointer; position: relative; overflow: hidden; width: 100%; } .mo_nav .nav_btn span { display: block; height: 2px; width: 100%; background: #b7b7b7; border-radius: 2px; position: absolute; top: 50%; right: 0px; transition: all 0.5s ease; transform: translateY(-50%); } .mo_nav .nav_btn:after { content: ""; position: absolute; right: 0px; top: 0px; display: block; width: 100%; height: 2px; background: #b7b7b7; border-radius: 2px; -webkit-transition: top 0.3s ease 0.2s, -webkit-transform 0.3s ease-out; transition: top 0.3s ease 0.2s, -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out, top 0.3s ease 0.2s; transition: transform 0.3s ease-out, top 0.3s ease 0.2s, -webkit-transform 0.3s ease-out; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .mo_nav .nav_btn:before { content: ""; position: absolute; right: 0px; bottom: 0px; display: block; width: 100%; height: 2px; background: #b7b7b7; border-radius: 2px; -webkit-transition: top 0.3s ease 0.2s, -webkit-transform 0.3s ease-out; transition: top 0.3s ease 0.2s, -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out, top 0.3s ease 0.2s; transition: transform 0.3s ease-out, top 0.3s ease 0.2s, -webkit-transform 0.3s ease-out; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .active .mo_nav .nav_btn:after, .active .mo_nav .nav_btn:before{ background: rgb(0, 81, 191); } .mo_nav .nav_btn.active span { opacity: 0; } .mo_nav .nav_btn.active:after { width: 100%; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out 0.2s; transition: top 0.3s ease, -webkit-transform 0.3s ease-out 0.2s; transition: top 0.3s ease, transform 0.3s ease-out 0.2s; transition: top 0.3s ease, transform 0.3s ease-out 0.2s, -webkit-transform 0.3s ease-out 0.2s; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 50%; } .mo_nav .nav_btn.active:before { width: 100%; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out 0.2s; transition: top 0.3s ease, -webkit-transform 0.3s ease-out 0.2s; transition: top 0.3s ease, transform 0.3s ease-out 0.2s; transition: top 0.3s ease, transform 0.3s ease-out 0.2s, -webkit-transform 0.3s ease-out 0.2s; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 50%; } .mo_logo { float: left; width: 100%; padding-left: 50px; padding-right: 50px; height: 13.33vw; text-align: center; overflow: hidden; } .mo_logo img { width: 60px; margin-top: 12px; } .mo_search { width: 5vw; max-width: 34px; position: relative; z-index: 2; margin-right: 3.4vw; } .mo_search svg { width: 100%; height: auto; } .mo_langu { float: right; width: 20px; margin-top: 12px; margin-right: 24px; margin-left: -50px; position: relative; z-index: 2; } .mo_langu svg { width: 100%; } .mo_navCon { visibility: hidden; position: absolute; left: 0px; top: 13.33vw; right: 0px; bottom: 0px; background: #fff; width: 100%; backdrop-filter: blur(6px); } .mo_navCon ul { width: 86%; margin: 10px auto; } .mo_footer { width: 86%; margin: 90px auto; } .mo_footer_H1{ display: flex; justify-content: center; align-items: center; font-size: 24px; color: #0051bf; font-weight: 600; } .mo_footer_H1 span{ font-size: 14px; margin-right: 6px; } .mo_footer_H2{ font-size: 16px; color: #777777; text-align: center; } .mo_footer_H3{ display: flex; justify-content: center; align-items: center; } .mo_footer_H3 span{ margin: 0 10%; font-size: 16px; color: #777777; margin-top: 60px; } .navlist2_ul{ display: none; } .mo_navCon ul li { border-bottom: 1px solid rgba(237, 237, 237,0.7); } .mo_navCon ul li:last-child{ border-bottom: none; } .mo_navlist_icon{ transition: 0.4s; transform: rotate(90deg); } .mo_navlist{ width: 100%; display: flex; justify-content: space-between; align-items: center; height:48px; } .navlist2_ul{ display: flex; flex-wrap: wrap; } .navlist2_ul li{ width: 50%; border: none !important; } .mo_navCon ul li a { display: block; height: 48px; line-height: 48px; width: 100%; color: #333333; font-weight: 600; font-size:14px; } .navlist2_ul li a { color: #999999 !important; } .mo_navCon ul li a:hover { color: #4660ff; } .mo_navCon.active { visibility: visible; } .mo_searchNav { opacity: 0; position: absolute; top: -44px; left: 0px; width: 100%; background: rgba(0, 0, 0, 1); z-index: 2; } .mo_s_btn { position: relative; float: left; width: 20px; margin-top: 12px; margin-left: 24px; margin-right: -50px; position: relative; z-index: 2; } .mo_s_btn svg { width: 100%; } .mo_s_input { float: left; width: 100%; padding-left: 50px; padding-right: 50px; height: 13.33vw; text-align: center; overflow: hidden; display: none; } .mo_s_input input { border: 0px; background: #fff; width: 100%; height: 13.33vw; color: #ccc; } .mo_s_clock { float: right; width: 16px; margin-top: 13px; margin-right: 26px; margin-left: -50px; position: relative; z-index: 2; } .mo_s_clock svg { width: 100%; } .mo_searchNav.active { opacity: 1; top: 0px; } .mo_searchCon { visibility: hidden; position: absolute; left: 0px; top: 44px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.9); width: 100%; backdrop-filter: blur(6px); } .mo_searchCon dl { width: 86%; margin: 10px auto; } .mo_searchCon dl dt { font-size: 12px; color: #ccc; height: 30px; } .mo_searchCon dl dd { border-bottom: 1px solid #ededed; } .mo_searchCon dl dd a { display: block; height: 48px; line-height: 48px; color: #fff; } .mo_searchCon dl dd a:hover { color: #4660ff; } .mo_searchCon.active { visibility: visible; } .mo_languNav { opacity: 0; position: absolute; top: -44px; left: 0px; width: 100%; background: rgba(0, 0, 0, 1); z-index: 2; } .mo_languNav.active { opacity: 1; top: 0px; } .mo_languCon { visibility: hidden; position: absolute; left: 0px; top: 44px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.9); width: 100%; backdrop-filter: blur(6px); } .mo_languCon.active { visibility: visible; } .mo_languCon .mo_languDl { color: #fff; width: 86%; margin: 0px auto; } .mo_languCon .mo_languDl a { color: #fff; overflow: hidden; } .mo_languCon .mo_languDl dt { color: #999999; margin-top: 30px; } .mo_languCon .mo_languDl dd { padding: 15px 0; border-bottom: 1px solid #ededed; } .mo_languCon .mo_languDl dd span { float: left; } .mo_languCon .mo_languDl dd b { float: right; font-weight: normal; color: #999999; } @media screen and (min-width: 769px) { .mo_right, .mo_left, .mo_headerCon , .mo_header , .mo_logo , .mo_navCon, .mo_s_input, .mo_s_input input { height: 100px; } .mo_nav{ max-width: 34px; } .mo_nav .nav_btn{ max-height: 34px; } } @media screen and (max-width: 768px) { .mo_left{ font-size: 12px; } }