@charset "utf-8"; * { margin: 0; padding: 0; font-size: 14px; // color: RGBA(0, 0, 0, 0.65); font-family: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; } .clear1{clear:both;display:none;} ul { list-style: none; font-size: 0; } .ie_low_versio display: block; height: 70px; background: #FA8D19; color: white; line-height: 70px; position: fixed; width: 100%; top: 0; left: 0; z-index: 999999999; } .ie_low_version > div { padding: 0 40px; } .ie_low_version span { float: right; display: block; width: 60px; height: 26px; line-height: 26px; background: #FFFFFF; color: black; text-align: center; font-size: 14px; margin-top: 23px; cursor: pointer; } .ie_low_version a { color: white; margin: 0 2px; } .ie_low_version + div { margin-top: 70px; } a { text-decoration: none; } a:active { text-decoration: none; outline: none; } a:focus { outline: none; outline-offset: 0; } a:hover { text-decoration: none; outline: none; } a:visited { text-decoration: none; outline: none; } a:link { text-decoration: none; outline: none; } a:hover { text-decoration: none; color: #fa8d19 } *, p, span, ol, ul, div { margin: 0; padding: 0; } main { min-height: calc( 100vh - 140px); } .transitionBottom { opacity: 0.2; filter: alpha(opacity=0) \9; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: -webkit-transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98), opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98); transition: transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98), opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98); } .transitionBottom.transition_active { opacity: 1; filter: alpha(opacity=100) \9; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .transitionLeft { opacity: 0.2; filter: alpha(opacity=0) \9; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); -webkit-transition: -webkit-transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98), opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98); transition: transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98), opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98); } .transitionLeft.transition_active { opacity: 1; filter: alpha(opacity=100) \9; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .swiper-slide { overflow: hidden !important; } .simple_text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .center-area{ max-width: 1200px; width:95%; margin: 0 auto;} .centerArea { width: 95%; max-width: 1600px; margin: 0 auto; //padding:0 16px;} .inner_centerArea { width: 100%; max-width: 1200px; padding: 0 16px; margin: 0 auto; } .displayInfo_centerArea { max-width: 796px; margin: 0 auto; } header nav > ul > li.selected > a:after{ content: ""; width: 100%; height: 4px; background:#fca01a; position: absolute; top: 91.5%; left: 0%; transition: all .4s; border-radius: 6px 0 6px 0; } .wrap { position: relative; overflow: hidden; } .underline { position: relative; } .underline:after { content: ""; width: 0; height: 4px; background: #fca01a; position: absolute; top: 95%; left: 50%; transition: all .4s; } .underline:hover:after { left: 0%; width: 100%; } header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } header.header_show { box-shadow: 0 2px 16px 0 rgba(84, 75, 65, 0.15); } header .headerContainer { position: relative; height: 78px; background: #ffffff; z-index: 111; } header .centerArea { position: relative; } .headerArea{ height:100%; /* padding:0 16px;*/ } header .logo { float: left; height: 100%; /*padding-left: 2.5%;*/ } header .logo a { display: block; width: 302px; height: 100%; padding: 26px 0; background: url("../images/yuexiu-logo.png") no-repeat left center; background: -webkit-image-set(url("../images/yuexiu-logo.png") 1x, url("../images/yuexiu-logo-2x.png") 2x) no-repeat left center; } header nav { transition: all 500ms; position: absolute; top: 0; left: 50%; margin-left: -377px; } header nav .phone_link { display: none; } header nav > ul { max-width: 550px; padding-top: 27px; margin: 0 auto; } header nav > ul > li { padding: 0 18px 0 28px; float: left; height:51px; text-align: center; /* position: relative; */ background: url("../images/oblique_line.png") no-repeat 0 7px; background: -webkit-image-set(url("../images/oblique_line.png") 1x, url("../images/oblique_line.png") 2x) no-repeat 0 7px; } header nav > ul > li.selected > a { color: #FA8D19; } header nav > ul > li:first-child { background: none; } header nav > ul > li.openPhoneNav ul { display: none; } header nav > ul > li > a { display: block; color: #333230; font-weight: 500; font-size: 16px; /* height: 77px; line-height: 50px;*/ height: 51px; line-height: 26px; box-sizing: border-box; position: relative; } /* header nav > ul > li > a:link{ color: #FA8D19; }*/ header nav > ul > li > a:active{ color: #FA8D19; } header nav > ul > li > a:focus{ color: #333230; } header nav > ul > li > a:after { content: ""; width: 0; height: 4px; background: #fca01a; position: absolute; top: 91.5%; left: 50%; transition: all .4s; border-radius: 6px 0 6px 0; } header nav > ul > li:hover > a:after { left: 0%; width: 100%; } header nav > ul > li ul { display: none; position: absolute; bottom: -52px; left: 0; height: 0; width: 1200px; text-align: left; z-index: 60; overflow: hidden; } header nav > ul > li ul li { display: inline-block; margin-right: 3%; line-height: 52px; text-align: center; } header nav > ul > li ul li a { display: block; height: 100%; color: white; font-size: 16px; position: relative; } header nav > ul > li ul li a:link{//color:white;} header nav > ul > li ul li a:active{color:white;} header nav > ul > li ul li a:focus{color:white;} header nav > ul > li ul li a:after { content: ""; width: 0; height: 4px; background: #ffffff; position: absolute; bottom: 0; left: 50%; transition: all .4s; border-radius:6px 0 6px 0;} header nav > ul > li ul li a:hover:after { left: 0%; width: 100%; } header nav > ul > li ul li:hover a { color: #ffffff; } header nav > ul > li.show_ul ul { display: block; height: 52px; } header .bg_nav { width: 100%; height: 0px; background:rgba(139,109,77,1); position: absolute; top: 78px; left: 0; z-index: 50; transition: all 0.4s; } header.show_bg_nav .bg_nav { height: 52px; } header .bg_phone { display: none; } header .link { display: block; float: right; height: 100%; padding-left: 80px; /* padding-right: 2.5%;*/ line-height: 78px; /* background: url("../images/bg_line.png") no-repeat left center;*/ /* background: -webkit-image-set(url("../images/bg_line.png") 1x, url("../images/bg_line-2x.png") 2x) no-repeat left center;*/ } header .link ul { /*width: 140px;*/ position: relative; } header .link ul li { float: left; } header .link .search { height: 78px; padding-right: 20px; margin-right: 16px; cursor: pointer; background: url("../images/search.png") no-repeat left center; background: -webkit-image-set(url("../images/search.png") 1x, url("../images/search-2x.png") 2x) no-repeat left center; background-size: 78%; } header .link .search:hover { background: url(../images/search_hover.png) no-repeat left center; background-size: 78%; } header .link .search .searchBox { display: none; border-radius: 2px 4px 4px 2px; position: absolute; top: 86px; right:0; background-color: #ffffff; z-index: 200; } header .link .search .searchBox.show { display: block; } header .link .search .searchBox form { height: 42px; line-height: 42px; margin-right:80px;} header .link .search .searchBox form input { width: 320px; height: 42px; padding: 10px 24px; font-size: 14px; line-height: 32px; outline: none; border: 1px solid rgba(250,141,25,1); border-radius:2px; background: none; color: rgba(0, 0, 0, 0.25); } header .link .search .searchBox form input.searchBtn{ width: 80px; background: #fa8d19; border-radius: 2px; color: #ffffff; font-size: 14px; line-height: 18px; position: absolute; right: 0; top: 0; } header .link .language { margin-right: 16px; color: rgba(0, 0, 0, 0.45); } header .link .language .chinese.selected{color:#FA8D19;font-size:14px;} header .link .language .simplified.selected{color:#FA8D19;font-size:14px;} header nav .phone_link .version .chinese ,.simplified{font-size:12px;} header nav .phone_link .version .chinese.selected{color:#FA8D19;font-size:14px;} header nav .phone_link .version .simplified.selected{color:#FA8D19;font-size:14px;} header nav .phone_link .version .english.selected{color:#FA8D19;} header .link .language .english{margin-left:0;} header .link .language{color: #CCC6C0;} header .link .language a { color: #CCC6C0; // font-size: 14px; } header .link .language .simplified , .chinese{ font-size: 12px; } header .link .language .english{ font-size: 14px;} header .link .language a:hover { color: RGBA(245, 166, 35, 1); } header .link .bar { height: 78px; padding-right: 20px; /*margin-right: 16px;*/ cursor: pointer; background: url("../images/bar.png") no-repeat left center; background: -webkit-image-set(url("../images/bar.png") 1x, url("../images/bar-2x.png") 2x) no-repeat left center; } header .link .bar.open { background: url("../images/close.png") no-repeat left center; background: -webkit-image-set(url("../images/close.png") 1x, url("../images/close-2x.png") 2x) no-repeat left center; } header .hamburger { display: none; } footer { border-top:1px solid #F2F0ED; padding: 11.5px 0; background:#F5F4F2; } footer .f-container { position: relative; } footer .footer_con { text-align: right; color: rgba(0, 0, 0, 0.45); font-weight: 500; padding-left: 200px; } footer .footer_con .box1 span { margin-right: 20px; font-size: 12px; color: #999590; } footer .footer_con .box2 { font-size: 12px; color: #999590; } footer .icon-footer { position: absolute; display: inline-block; } footer .icon-footer li:last-child{float:none;} footer .icon-footer li { float: left; cursor: pointer; line-height: 40px; } footer .icon-footer .text { margin-right: 16px; font-size: 12px; font-weight: 400; color: #999590; } footer .icon-footer .footer-line{ display: inline-block; height: 14px; width: 1px; /* color: #999590; */ background: rgba(204,198,192,1); margin-left: 24px; } footer .icon-footer .foot-link{ display:inline-block; margin-left:24px; border-radius: 14px; border:1px solid rgba(153,149,144,1); padding: 2px 12px 0 12px; margin-top: 10px; transition:all 0.5s;} footer .icon-footer .foot-link:hover i{ background: url("../images/guanwang.png") no-repeat center; background: -webkit-image-set(url("../images/guanwang.png") 1x, url("../images/guanwang-2x.png") 2x) no-repeat center; background-position-y: 1px; } footer .icon-footer .foot-link:hover {background:#999590;} footer .icon-footer .foot-link:hover a{color:#fff;} footer .icon-footer .foot-link a{ transition:all 0.5s; font-size:12px; font-weight:400; color:#999590; padding-left:6px; vertical-align: text-bottom; } footer .icon-footer .foot-link i{ transition:all 0.5s; display: inline-block; width: 14px; height: 14px; background: url("../images/footer-globel.png") no-repeat center; background: -webkit-image-set(url("../images/footer-globel.png") 1x, url("../images/footer-globel-2x.png") 2x) no-repeat center; background-position-y: 1px; } footer .icon-footer .wechat { width: 24px; height: 40px; margin-right: 16px; position: relative; background: url("../images/wechat.png") no-repeat center; background: -webkit-image-set(url("../images/wechat.png") 1x, url("../images/wechat-2x.png") 2x) no-repeat center; z-index: 1; } footer .icon-footer .wechat span { display: none; width: 168px; height: 178px; position: absolute; top: -168px; left: -72px; background: url("../images/wechat-code.png") no-repeat center; background: -webkit-image-set(url("../images/wechat-code.png") 1x, url("../images/wechat-code-2x.png") 2x) no-repeat center; } footer .icon-footer .weibo { width: 24px; height: 40px; background: url("../images/weibo.png") no-repeat center; background: -webkit-image-set(url("../images/weibo.png") 1x, url("../images/weibo-2x.png") 2x) no-repeat center; } footer .icon-footer .weibo:hover { background: url("../images/weibo-hover.png") no-repeat center; background: -webkit-image-set(url("../images/weibo-hover.png") 1x, url("../images/weibo-hover-2x.png") 2x) no-repeat center; } footer .icon-footer .weibo a{ width: 24px; height: 40px; display: block;} #side_mask { position: fixed; top: 0; width: 100%; height: 100%; background-color: #000; z-index: 110; display: none; filter: alpha(opacity=20); -moz-opacity: .2; opacity: 0.2; } .side_box { width: 440px; position: absolute; top: 0; right: -360px; height: 3000px; z-index: 110; padding: 98px 40px 0 40px; -webkit-transition: all 500ms; transition: all 500ms; opacity: 0; visibility: hidden; background: rgba(139, 109, 77, 0.9775); } .side_box h4 { color: white; padding-left: 30px; line-height: 28px; margin-bottom: 36px; font-weight: 600; font-size:16px; background: url("../images/globe.png") no-repeat left center; } .side_box > ul > li { float: left; width: 110px; height: 330px; background: url("../images/line_white.png") no-repeat 100% 5px; } .side_box > ul > li:first-child + li { width: 130px; padding-left: 27px; } .side_box > ul > li:first-child + li li { } .side_box > ul > li:first-child + li + li { padding-left: 30px; background: no-repeat; } .side_box > ul > li:first-child + li + li + li + li { padding-right: 20px; } .side_box > ul > li:first-child + li + li + li + li + li { padding-left: 27px; width: 130px; } .side_box > ul > li:first-child + li + li + li + li + li+li { padding-left: 20px; } .side_box > ul > li:last-child { background: no-repeat; /* padding-left: 20px;*/ } .side_box > ul > li.clear { clear: both; width: 100%; height:0; margin-top: 18px; margin-bottom: 18px; } .side_box > ul > li a { color: rgba(255, 255, 255, 1); font-weight: 400; font-size: 14px; } .side_box > ul > li > a:hover{text-decoration: underline;} .side_box > ul > li > a { font-weight: 600; font-size: 14px; } .side_box > ul > li ul { padding-top: 10px; } .side_box > ul > li ul li { text-align: left; padding-top: 10px; } .side_box > ul > li ul li ul { display: none; } .side_box > ul > li > ul > li > a:hover{text-decoration: underline;} .open_side_bar #side_mask { display: block; } .open_side_bar .side_box { right: 0; opacity: 1; visibility: visible; } .inner .banner { position: relative; height: 160px; background: url("../images/banner_inner.jpg") no-repeat center; background-size: cover; /* margin-top: 104px;*/ margin-top: 78px; } .inner .banner-esg{ background: url("../img_esg/banner-esg.png") no-repeat center; } .inner .banner .text { color: RGBA(255, 255, 255, 0.5); font-size: 24px; letter-spacing: 8px; font-weight: 300; text-align: right; position: relative; top: 110px; text-transform: uppercase; } .inner .banner.banner_cp { height: 160px; } .inner .linkContainer { position: relative; border-bottom: 1px solid #e9e9e9; } .inner .linkContainer .inner_centerArea { margin-bottom: -1px; } .inner .linkContainer .breadCrumb { float: left; line-height: 66px; padding: 0; margin-bottom: 0; background: transparent; } .inner .linkContainer .breadCrumb a { font-size: 14px; color: #666360; } .inner .linkContainer .breadCrumb a:hover { color:#666360; } .inner .linkContainer .breadCrumb span .fa { width: 14px; height: 14px; padding: 0 12px; display:inline-block; // background: url("../images/caret-right.png") no-repeat center; // background: -webkit-image-set(url("../images/caret-right.png") 1x, url("../images/caret-right-2x.png") 2x) no-repeat center; color:#ccc6c0; font-size:12px; } .inner .linkContainer .menu { float: right; } .inner .linkContainer .menu > ul > li.selected > a{color:#FA8D19;} .inner .linkContainer .menu > ul > li { float: left; padding: 0 16px; position: relative; } .inner .linkContainer .menu > ul > li:last-child{padding-right:0; } .inner .linkContainer .menu > ul > li:last-of-type { padding-right: 0; } .inner .linkContainer .menu > ul > li:hover > a:after { left: 0%; width: 100%; } .inner .linkContainer .menu > ul > li a { display: block; height: 66px; line-height: 66px; color: #666360; font-size: 16px; position: relative; } .inner .linkContainer .menu > ul > li a:hover { color: #fa8d19; } .inner .linkContainer .menu > ul > li a:after { content: ""; width: 0; height: 4px; background: #FA8D19; position: absolute; bottom: 0; left: 50%; transition: all .4s; border-radius: 6px 0 6px 0; } .inner .linkContainer .menu > ul > li.selected > a:after { left: 0%; width: 100%; } .inner .linkContainer .menu > ul > li.selected > ul { display: block; background: #f9f7f5; z-index: 99; } .inner .linkContainer .menu > ul > li.show_ul > ul { display: block; z-index: 100; // background:rgba(139,109,77,0.04);} .inner .linkContainer .menu > ul > li.hide_ul > a:after { left: 50%; width: 0; } .inner .linkContainer .menu > ul > li.hide_ul ul { display: none; } .inner .linkContainer .menu > ul > li ul { display: none; position: absolute; min-width: 200px; width: 20000px; height: 60px; // z-index: -1; z-index: 1; right: -6000px; padding-left: 0; padding-right: 6000px; text-align: right; background:#f9f7f5;} .inner .linkContainer .menu > ul > li ul li { display: inline-block; margin-left: 18px; } .inner .linkContainer .menu > ul > li ul li ul { display: none; } .inner .linkContainer .menu > ul > li ul li a { display: inline-block; position: relative; height: 60px; line-height: 60px; } .inner .linkContainer .menu > ul > li ul li a:after { content: ""; width: 0; height: 4px; background: #FA8D19; position: absolute; top: 95%; left: 50%; transition: all .4s; border-radius: 6px 0 6px 0; } .inner .linkContainer .menu > ul > li ul li a:hover:after { left: 0%; width: 100%; } .inner .linkContainer .menu > ul > li ul li.selected > a:after { left: 0%; width: 100%; } .inner .linkContainer .menu .bg_submenu { height: 0; position: absolute; top: 66px; width: 20000px; left: -6000px; background-color: #f9f7f5; transition: all 0.4s; } .inner .linkContainer .menu.show_bg_subMenu .bg_submenu { height: 60px; } .inner .linkContainer .phone_currentColumn { display: none; } .inner .linkContainer .phone_braedCrumb { display: none; } .inner .linkContainer .phone_breadCrumb { display: none; } .inner .loadMore { display: block; width: 100%; text-align: center; background-color: #ffbf5f; } .inner .loadMore .fa { display: inline-block; font-size: 50px; color: #ffffff; } .open_nav header { position: fixed; } .open_nav.inner .linkContainer .phone_currentColumn { position: absolute; } @font-face { font-family: 'dincond-medium-webfont'; src: url("../lib/dincond-medium-webfont.woff2"); } .Training.Programs .center { padding-top: 110px; } .Corporate.Governance .center { padding-top: 60px; } .ESGReport .center { padding-top: 110px; } .Operational.Strategy .center { padding-top: 110px; } .Party.Building .center { padding-top: 60px; } .the.Organizations .center { padding-top: 110px; } .Corporate.News .center .newsDetail { padding: 48px 0 60px 80px; } .zhuzhai .banner { height: 350px; } .inner .banner .text.product { text-align: center; top: 144px; } .inner .banner .text.product .en { font-size: 20px; font-weight: 300; color: white; line-height: 28px; letter-spacing: 11px; text-transform: uppercase; } .inner .banner .text.product .cn { font-size: 24px; font-weight: 400; color: white; line-height: 33px; } #back-to-top { display: none; width: 50px; height: 50px; cursor: pointer; position: fixed; right: 8px; bottom: 50px; background: url("../images/back-to-top.png") no-repeat center; background: -webkit-image-set(url("../images/back-to-top.png") 1x, url("../images/back-to-top-2x.png") 2x) no-repeat center; } #back-to-top:hover { background: url("../images/back-to-top-hover.png") no-repeat center; background: -webkit-image-set(url("../images/back-to-top-hover.png") 1x, url("../images/back-to-top-2x.png") 2x) no-repeat center; } header.en.show_bg_nav .bg_nav { height: 104px; } header.en nav > ul { position: relative; } header.en nav > ul > li { position: static; } header.en nav > ul > li.show_ul ul { width: 900px !important; height: 104px; bottom: -104px; } header.en .bg_nav { transition: all 0.2s; } /* header nav > ul > li:nth-child(5) ul { right: -300px; left: auto; text-align: right; } */ body header nav > ul > li:nth-child(5) ul { /* right: -188%;*/ left: -155px; } @media screen and (max-width: 768px){ header .logo a{ display: block; width: 250px; height: 100%; padding: 26px 0; background: url(../images/yuexiu-logo-phone.png) no-repeat left center; background: -webkit-image-set(url(../images/yuexiu-logo-phone.png) 1x, url(../images/yuexiu-logo-phone2x.png) 2x) no-repeat left center; background-size: contain; } footer .icon-footer .foot-link{margin:0 0 8px 0;} footer .icon-footer .text{float:none;margin-right: 0;line-height: 16px;} footer .icon-footer .wechat{margin-left:22%;} main { min-height: calc( 100vh - 102px - 241px); } footer .icon-footer .foot-link:hover i{ background: url("../images/footer-globel.png") no-repeat center; background: -webkit-image-set(url("../images/footer-globel.png") 1x, url("../images/footer-globel-2x.png") 2x) no-repeat center; background-position-y: 1px; } footer .icon-footer .foot-link:hover {background:none;} footer .icon-footer .foot-link:hover a{color:#999590;} } @media screen and (min-width:992px){ footer .icon-footer .wechat:hover { background: url("../images/wechat-hover.png") no-repeat center; background: -webkit-image-set(url("../images/wechat-hover.png") 1x, url("../images/wechat-hover-2x.png") 2x) no-repeat center; } footer .icon-footer .wechat:hover span { display: block; } } @media screen and (max-width:992px){ footer .icon-footer .footer-line{display:none;} .clear1{display:block;} } .transitionLable { -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-transition: opacity 1s cubic-bezier(0.5, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0, 0.7, 0.1, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0, 0.7, 0.1, 1); transition: transform 1s cubic-bezier(0, 0.7, 0.1, 1), opacity 1s cubic-bezier(0.5, 0, 0.2, 1); transition: transform 1s cubic-bezier(0, 0.7, 0.1, 1), opacity 1s cubic-bezier(0.5, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0, 0.7, 0.1, 1); opacity: 0; } .transitionLable.active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } /*# sourceMappingURL=common.css.map */