@charset "utf-8"; .header { width: 100%; box-sizing: border-box; text-align: center; position: relative; margin: 0 auto; z-index: 10; height: 100%; /* background: -webkit-linear-gradient(rgba(0,0,0,0.6), transparent); background: -o-linear-gradient(rgba(0,0,0,0.6), transparent); background: linear-gradient(rgba(0,0,0,0.6), transparent); */ } .header .main-w { height: 100%; width: 1480px; max-width: 90%; } .logo { display: inline-block; max-height: 4vw; width: 8vw; position: absolute; top: 3vw; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); } .logo img { width: 100%; display: block; } .nav_xl_a { position: absolute; cursor: pointer; z-index: 999; display: block; width: 36px; height: 36px; text-align: center; left: 50%; margin-left: -18px; bottom: 7vw; border: 1px solid #dfdfdf; box-sizing: border-box; background: url(/images/menu.png) center no-repeat; } .a1 { background: #e62129; border-radius: 50%; } .a1:before, .a1:after { content: ''; width: 60%; border-radius: 50%; height: 3px; background: #fff; display: inline-block; transition: .4s all ease; } .a1:before, .a1:after { left: 25%; top: 50%; position: absolute; width: 50%; border-radius: 0; height: 2px; } .a1:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .a1:after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } .MenuList_f1, .MenuList_c1 { z-index: 11; text-align: center; display: inline-block; vertical-align: middle; width: 100%; font-size: 16px; font-weight: bold; color: #333; position: relative; } .MenuList_f1 .stmenu h3, .MenuList_b1 .MenuItems>li h3 { font-size: inherit; font-weight: bold; } .MenuList_f1 .stmenu a, .MenuList_c1 .drop { display: block; } .MenuList_f1 .stmenu, .MenuList_c1 .MenuItems>li { display: block; margin-bottom: 1vw; -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; position: relative; } .MenuList_f1 .drop, .MenuList_c1 .drop { display: block; padding: 0.8vw 0; position: relative; } .MenuList_f1 .drop span, .MenuList_c1 .drop { line-height: 1.5; display: block; overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .MenuList_f1 .child { display: none; position: absolute; left: 50%; top: 84px; width: 160px; z-index: 2; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); } .MenuList_c1 .MenuItems>li { position: static; } .MenuList_f1 .child span { height: auto; font-size: 14px; padding: 5px 1vw; line-height: 28px; display: block; } .MenuList_c1 .drop+div { display: none; position: absolute; left: 9vw; top: 0; bottom: 0; z-index: 2; text-align: left; width: 180px; padding-left: 4.5vw; } .MenuList_c1 .drop+div li { color: #505050; margin-bottom: 1vw; position: relative; } .MenuList_c1 .drop+div li a { padding: 0.8vw 0; display: block; font-weight: normal; position: relative; z-index: 2; } .MenuList_c1 .drop+div li:last-child { margin-bottom: 0; } .MenuList_c1 .drop+div li:after { content: ''; width: 0; left: 2em; height: 20%; background: #ffff00; display: block; transition: .6s all ease; position: absolute; top: 40%; } .ceng { position: fixed; width: 50%; right: 0; top: 0; background: url(/images/bgm-2.jpg) no-repeat; background-size: cover; height: 100%; z-index: 3; opacity: 1; } #menu { position: fixed; left: 0; opacity: 1; z-index: 5; width: 50%; height: 100%; box-sizing: border-box; background: url(/images/bgm-1.jpg) #fff right bottom no-repeat; background-size: 50% auto; } #menu .L { width: 10vw; border-right: 1px solid #d4d4d4; } #menu .R { position: absolute; bottom: 3vw; left: 13.5vw; } .lang li { display: inline-block; float: left; } .name p { display: inline-block; margin-right: 0.8em; } .ceng, #menu { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; } .ceng.hide { opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } #menu.hide { opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .choose_lang { width: 90%; height: 50px; position: absolute; bottom: 3vw; text-align: center; line-height: 50px; font-size: 16px; color: #333; cursor: pointer; } .choose_lang:hover, .choose_lang.on { background-color: rgb(230, 33, 41); color: #fff; } .lang_box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-left: 10%; box-sizing: border-box; z-index: 1; display: none; } .lang_box .box_con { width: 20%; height: 100%; padding-top: 8vw; background: url(/images/bgm-1.2.jpg) #fff right bottom no-repeat; background-size: 200% auto; box-sizing: border-box; } .lang_box .box_con .box_item { width: 200px; display: block; font-size: 16px; font-family: "Arial"; color: rgb(51, 51, 51); position: relative; z-index: 2; text-align: center; margin-bottom: 16%; } .lang_box .box_con .box_item a:hover, .lang_box .box_con .box_item a.on { color: #e62129; } .lang_box .box_con .box_item a:hover::after, .lang_box .box_con .box_item a.on::after { content: ''; position: absolute; background-color: rgb(255, 255, 0); right: 17%; top: 10px; width: 74px; height: 8px; z-index: -1; } .footer .loc { background: url(../images/loc2.png) left center no-repeat; background-size: contain; padding-left: 4.5em; box-sizing: border-box; background-size: 3.5em; } .footer .loc a { display: block; } .footer { box-sizing: border-box; padding: 5.2vw 0 2vw 0; background: url(../images/fbg_14.jpg) #e62129 bottom left no-repeat; background-size: 100% auto; } .footer .link { box-sizing: border-box; } .footer .link li { float: left; width: 33.3%; display: block; } .footer .link1 li:last-child { display: none; } .footer .link2 li { margin-right: 0.8em; width: auto; } .footer .link2 li:first-child:before { display: none; } .footer .link2 li:before { content: "|"; margin-right: 0.6vw; display: none; } /* .footer .link2 li:last-child:before{display: none;} */ .footer .link2 li:nth-child(2):before { display: none; } .footer .copyright { box-sizing: border-box; padding: 20px 0; } .footer .copyright p, .copyright a { display: inline-block; } @media screen and (min-width: 1025px) { .MenuList_f1 .child a:hover span { color: #e62129; } .MenuList_f1 .stmenu:hover .drop, .MenuList_c1 .MenuItems>li:hover { color: #fff; background-color: #e62129; } .MenuList_f1 .stmenu.on>h3 { color: #e62129; } .MenuList_f1 .menu .on:after { content: ''; width: 50%; border-radius: 2px; height: 3px; background: #e62129; display: inline-block; position: absolute; bottom: 0; left: 25%; } .MenuList_c1 .drop+div li a:hover, .lang li a:hover { color: #e62129; } .MenuList_c1 .drop+div li:hover:after { width: 60%; } .footer a:hover { color: #ffff00; } .MenuList_b1 .stmenu a:hover { color: #e62129; } } @media screen and (min-width: 800px) { .fix-L { width: 10%; position: fixed; height: 100%; z-index: 2; left: 0; top: 0; border-right: 1px solid #d4d4d4; } } @media screen and (max-width: 1440px) { .MenuList_f1 .drop span { font-size: 14px; } } @media screen and (max-width: 1024px) { .fix-L { width: 100%; height: 80px; position: fixed; left: 0; top: 0; z-index: 10; background: none; } .logo { left: 5%; max-height: 40px; width: 18vw; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .logo img { max-height: 100%; max-width: 100%; width: auto; } .header .main-w { max-width: 94%; } .header { position: fixed; width: 100%; top: 0; left: 0; z-index: 99; height: 80px; background: #fff; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .nav_xl_a { right: 5%; left: auto; margin-left: 0; top: 22px; } #menu .logo { display: none; } .MenuList_f1, .MenuList_c1 { font-size: 14px; } .MenuList_f1 { display: none; width: 45%; height: calc(100% - 80px); position: fixed; right: 0; top: 80px; margin-right: 0; padding: 2vw 4% 0 4%; box-sizing: border-box; bottom: 0; overflow-y: scroll; overflow-x: hidden; background: rgba(0, 0, 0, 0.9); z-index: 5; text-align: left; } .header.open { background: rgba(0, 0, 0, 0.9); } .MenuList_f1 .child { position: static; -webkit-transform: none; width: 100%; border-radius: 0; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .MenuList_f1 .child li { margin-right: 0; background: none; box-sizing: border-box; } .MenuList_f1 .child span { padding: 10px 0; color: #fff; line-height: 1.5; height: auto; } .MenuList_f1 .child:after { content: ""; display: block; clear: both; } .MenuList_f1 .stmenu { display: block; padding: 0; width: 100%; position: relative; border-bottom: 1px solid #333; } .MenuList_f1 .drop { padding: 0; } .MenuList_f1 .drop span { font-size: 18px; padding: 10px 0; position: relative; height: auto; line-height: 1.5; } .MenuList_f1 .fa .drop span:after, .MenuList_f1 .fa .drop span:before { content: ''; display: block; width: 0.8em; height: 1px; z-index: 0; transition: .4s all ease; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%); /*rotate(45deg)*/ background-color: #fff; } .MenuList_f1 .fa .drop span:before { width: 1px; height: 0.8em; right: 1.2em; } .MenuList_f1 .on .drop span { background: none; color: #38ae37; } .MenuList_f1 .cur.stmenu .drop span:after { transform: translateY(-50%) rotate(45deg); } .MenuList_f1 .cur.stmenu .drop span:before { transform: translateY(-50%) rotate(45deg); } .copyright { line-height: 1.5; } .footer .slogo.fl { display: none; } .footer .txt { float: left; } .footer .txt li, .footer .txt li:nth-child(3n) { width: 47.5%; margin-right: 5%; } .footer .txt li:nth-child(2n) { margin-right: 0; } .MenuList_b1 { display: none; } } @media screen and (max-width: 640px) { .header { height: 14vw; /* box-shadow: 0px 5px 5px rgba(0,0,0,0.1); */ } .lang_box{ padding-left:0; } .lang_box .box_con{ left: 0; width: 60%; } .choose_lang{ right: calc(5% + 10vw + 3vw); left: auto; margin-left: 0; top: 2vw; height: 10vw; line-height: 9.5vw; box-sizing: border-box; width: auto; text-transform: lowercase; background: none; color: #e62129; border: 1px solid #DFDFDF; padding: 0 2.5vw; font-size: 15px; } .MenuList_f1, .MenuList_c1 { font-size: 4.2vw; } .MenuList_f1 { top: 14vw; padding: 6vw 0; } .MenuList_f1 .drop { padding: 0; } .MenuList_f1 .drop span { font-size: 4.2vw; padding: 1vw 0; line-height: 1.8; } .nav_xl_a { width: 10vw; height: 10vw; top: 2vw; } .logo { height: 8vw; width: 65vw; } .logo img { width: auto; } .a1:before, .a1:after { height: 2px; } .ceng { width: 30%; } .choose_lang{ /* display: none; */ } #menu { font-size: 3.8vw; width: 70%; border-right: 1px solid #d4d4d4; } #menu .L:before { display: none; } #menu .L { width: 95%; padding-left: 3vw; box-sizing: border-box; padding-top: 21vw; border: none; } #menu .R { left: 3vw; width: 91%; } .MenuList_c1 { text-align: left; font-size: 4.2vw; /*font-weight: normal; max-height: 100vw;overflow-y: scroll; */ } .MenuList_c1 .MenuItems>li { margin-bottom: 0.5em; } .MenuList_c1 .drop { width: 50vw; } .MenuList_c1 .fa .drop:after, .MenuList_c1 .fa .drop:before { content: ''; display: block; width: 0.8em; height: 1px; z-index: 0; transition: .4s all ease; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%); /*rotate(45deg)*/ background-color: #e62129; } .MenuList_c1 .fa .drop:before { width: 1px; height: 0.8em; right: 1.2em; } .MenuList_c1 .on span { background: none; color: #38ae37; } .MenuList_c1 .cur .drop:after { transform: translateY(-50%) rotate(45deg); } .MenuList_c1 .cur .drop:before { transform: translateY(-50%) rotate(45deg); } .MenuList_c1 .drop+div { font-size: 3.8vw; padding-left: 0; text-align: left; position: static; padding-top: 0.6em; width: 100%; border-bottom: 1px solid #d4d4d4; padding-bottom: 0.8em; /* position: fixed;left: 55vw;background: #fff;padding-top: 22vw;box-sizing: border-box;height: 100%;bottom: auto;padding-bottom: 6vw; */ } .MenuList_c1 .drop+div li { display: inline-block; margin-right: 1em; width: auto; } .footer .L { float: none; width: 100%; } .footer .R { float: none; width: 100%; } .footer .copyright p, .copyright a { display: inline; } }