/*header*/ header #announcement .pg-container { background-color:#ececec} #announcement { z-index:1;} #announcement p { font-size:16px; line-height:1.8} #headright div, #headlogos div { display:block; position:relative;} #body header { position:fixed; top:0; left:0; width:100%; height:86px; z-index:10000; background:#fff; box-sizing: border-box; -webkit-box-shadow: 1px 1px 0px 0px rgba(243, 243, 243, 1); -moz-box-shadow: 1px 1px 0px 0px rgba(243, 243, 243, 1); box-shadow: 1px 1px 0px 0px rgba(243, 243, 243, 1); } #body.sticky header { position: sticky; /* position: -webkit-sticky;*/ height:auto;} #body.sticky main { padding-top:0;} .stub { opacity:0; } a.stub { width:0; overflow:hidden;} .hide { display:none; } .pgpad { padding-left: 5%; padding-right: 5%; } .mid { top:50%; transform:translateY(-50%); } .pcw { width:90%; margin:0 auto; } .fixtop { position:fixed; top:86px; left:0; width:100%; z-index:25} .tabt { width:0; height:0; padding:0; border:0} #body header>div.pgw { height:100%} /* #headiv { z-index:1000; background:#fff; height:86px; text-align:right;} */ #headlogos { position:absolute; top:10%; left:30px; height:80%; width:50%;} #headlogos a.logo { height:100%; /*display:inline-block;*/ float:left; display:block;} #headlogos a.logo.invest { height:72%; margin-top:9px; } #headlogos a.logo>img { height:100%; width:auto; } #headlogos a:last-child.logo>img { border-right:none; } #headlogos s { background:#ececec; margin:0 10px; /*display:inline-block;*/ float:left; display:block; height:100%; width:1px;} #headright { height:100%; display:inline-block; color:#999;} #headright a { color:#333;} #body.highcon #headright a { color:#555; } #headright>div { float:left; height:100%; /*font-size:100%;*/ font-size:16px} #headright>div:first-child+div { border-right:solid 1px #ececec; border-left:solid 1px #ececec;} #headright>div>a { display:block; height:100%; text-decoration:none;} #headright>div>a.stub { height:0; } #headright>div>a>b { font-weight:normal; display:block; padding:0 25px; top:50%; transform:translateY(-50%); position:relative; } #headright>div>a>b>i.fa { transition:all 0.5s ease; margin-left:10px } #headright>div>a>b>i.fa.fa-adjust { font-size:25px; opacity:1; color:#666; } #body.highcon #headright>div>a>b>i.fa.fa-adjust { opacity:0.3; } #headright>div.bars { color:#fff; border-left:1px solid #fff } #headright>div.bars>a { padding:0 30px; color:#fff; } #headright>div.bars i.fa { font-size:24px; top:50%; transform: translateY(-50%); position: relative; transition:all 700ms ease; } /*.smhead #headright>div.bars i.fa { top: 28px; }*/ #headright>div.bars i.fa.fa-times { transform:scale(0,0); position:absolute; left:30px; top: 35%; } #body.openm #headright>div.bars i.fa.fa-times { transform:scale(1,1); } #body.openm #headright>div.bars i.fa.fa-bars { transform:scale(0,0); } #headright i.fa.fa-search { font-size:18px; margin-left:4px} .dsk:hover .fa.fa-search { color:#333;} #headright>div.bars:hover i.fa { color:#333;} #headright .drp { position:absolute; top:100%; left:0; width:100%; background:#eee; display:none; margin-top:1px; z-index:30;} #headright .drp>a { display:block; text-align:center; padding:10px 0; border-bottom:solid 1px #ccc; text-decoration:none } #headright .drp>a:hover { background:#ccc; } #headright .drp>a.stub { padding:0; } #headright .drp>a.sel { background:#aaa; color:#fff; } #headright .drp>a:last-child { border-bottom:none} #body.highcon #headright .drp>a.sel { background:#555; color:#fff; } #headright div.btdrp.open>.drp { display:block; } #headright div.btdrp.open>a>b>i.fa { transform:rotate(180deg); } /* #breadcrumb { margin-top:86px; background:#f3f3f3; padding-top:8px; padding-bottom:8px; font-size:90%; } #breadcrumb a { color:#333; transition: all 0.3s ease-out } #breadcrumb a:hover { color:#faa635;} */ /* desktop wide fix table menu ------------------------------------------------------------ */ #topwtmenu { background:#eee; width:100%; position:absolute; top:100%; left:0; transform:translateY(-150%); transition:all 700ms ease; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; -webkit-box-shadow: 1px 1px 13px 0px rgba(50, 50, 50, 0.26); -moz-box-shadow: 1px 1px 13px 0px rgba(50, 50, 50, 0.26); box-shadow: 1px 1px 13px 0px rgba(50, 50, 50, 0.26);} #body.openm #topwtmenu { transform:translateY(0); } .wtmenu { width:85%; margin-left:15%; font-size:98%; table-layout: fixed; } /* .wtmenu th { font-weight:500; width:calc(25% - 10px); } .wtmenu th.home { font-weight:500; width:40px; } .wtmenu th.home a { color:#FFA746; }*/ .wtmenu th, .wtmenu td { text-align:left; border-left:solid 1px #fff; vertical-align:top; } /* .wtmenu th, .wtmenu td { border-right:solid 1px #fff; } */ .wtmenu th:first-child, .wtmenu td:first-child { border-left:none; } .wtmenu th { padding:20px 30px 10px 30px; width:auto; font-size:110%; text-transform:uppercase; } .wtmenu td { padding:0 30px 30px 50px; } .wtmenu td a { display:block; color:#333; padding-bottom:10px; text-decoration:none; transition: all 0.3s ease-out; } .wtmenu td a::before { content:'\f111'; font-family:FontAwesome; font-style:normal; font-size:40%; font-weight:normal; position:absolute; top:7px; left:-15px; color :#666;} /* .wtmenu th.c1,.wtmenu td.c1 a::before,.notouch .wtmenu td.c1 a:hover { color:#25a; } .wtmenu th.c2,.wtmenu td.c2 a::before,.notouch .wtmenu td.c2 a:hover { color:#C4751F; } .wtmenu th.c3,.wtmenu td.c3 a::before,.notouch .wtmenu td.c3 a:hover { color:#292; } .wtmenu th.c4,.wtmenu td.c4 a::before,.notouch .wtmenu td.c4 a:hover { color:#929; }*/ .wtmenu td a.sub::before { left:10px; } .wtmenu td a.sub { padding-left:25px; font-size:85%; color:#666} /* mobile side menu & ham btn ------------------------------------------------------------ */ #btham { position:absolute; top:0px; right:15px; z-index:1000; padding:15px 13px; background:#ececec; color:#62c398; transform:scaleX(1.2); display:none; } .esfpmask { position:fixed; width:100%; height:0; background:rgba(0,0,0,0.8); top:0; left:0; z-index:4000; opacity:0; transition: opacity 0.2s ease-in; } .esfpushm { position:fixed; top:0; height:100%; background:#2e3438; display:none; overflow:auto; transition: all 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); color:#fff; z-index:8000; } .esfpushm.right { right:-80%; width:80%} #body.openm .esfpushm.right { right:0; top: auto; } .esfpushm.left { left:-80%; width:80% } #body.openm .esfpushm.left { left:0; } .esfpushm>a, .esfpushm nav>a { display:block; padding:15px 20px; color:#fff; /*border-bottom:solid 1px #666;*/ text-decoration:none;} .esfpushm>a.sub { padding-right:50px; } /*top level*/ .esfpushm>a.sub:after { font-family: FontAwesome; content:"\f054"; top:15px; right:10px; position:absolute; transition: transform 200ms ease-in;} .esfpushm>a.sub.open:after { transform:rotate(90deg); } .esfpushm>nav { background:#999; padding-bottom:10px; display:none; } /*Sublevel 1*/ .esfpushm>nav a { padding: 15px 20px 10px 30px; font-size:90%; } .esfpushm>nav a:before { content:'\2022'; position:absolute; top:15px; left:20px; } .esfpushm>nav>nav { } /*Sublevel 2*/ .esfpushm>nav>nav a { padding: 5px 20px 5px 50px; border:none; } .esfpushm>nav>nav>a:before { left:35px; top:5px; } .esfpushm>nav>nav>nav { } /*Sublevel 3*/ .esfpushm>nav>nav>nav a { padding: 5px 20px 5px 70px; opacity:0.75;} .esfpushm>nav>nav>nav>a:before { left:55px; top:5px;} .esfpushm>div.head { background:#FFA746; color:#fff; padding:15px 20px; } .esfpushm>div.head a { color:#fff; margin-right:10px; } #body.highcon .esfpushm>div.head, #body.highcon .esfpushm>div.head a { color:#555; } .esfpushm>div.head>span.lang:after { content:'•'; margin-right:10px; } .esfpushm>nav>nav>nav a:last-child { padding-bottom:15px} /* Special Announcement ==================================================================== */ .announcement { z-index:20; display:block;} .announcement .fa-times { position:absolute; right:40px; top:30px; z-index: 2; font-size:25px; color: #354a5b; cursor:pointer; transition: all 0.3s ease-out;} .announcement .fa-times:hover { color: #51ae9b} .announcement .an-pos { padding:20px 0; width:80%; margin:0 auto;} .announcement h3 { color: #354a5b} .announcement p a { color: #79bd22; transition: all 0.3s ease-out; cursor:pointer;} .announcement p a:hover { color: #51c0a9} #body .announcement h3 { font-size:24px} /* desktop wide fix table menu */ /* ========================================================================== Media ============================================================================= */ @media only screen and (max-width:1400px) { #body.en .wtmenu { width:100%; margin-left:0; } #body.en .wtmenu th { padding: 20px 20px 10px 20px; font-size: 100%; } @media only screen and (max-width:1024px) { #headright>div.bars i.fa { top:40px; } .announcement .an-pos { width:90%} .announcement>.pg-container { padding-left:0;} .announcement .fa-times { right:20px; top:20px; } } @media only screen and (max-width: 767px), only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) { #headiv .space { height:30px} #headiv .dsk { display:none; } #headiv .mob { display:block; } #headiv .mob.inline { display:inline; } #headiv .pgpad { padding-left:5%; padding-right:5%; } #headiv .fixtop { top:60px; } /*header*/ #headiv { height:60px; } #headlogos { left:5%; width:65%;} #headlogos a.logo.invest { height:65%; margin-top:9px;} #body.en #headlogos a.logo.invest { height:50%; margin-top:12px;} } @media only screen and (min-width: 768px) and (max-width: 959px) and (orientation : portrait) { .wtmenu { width:100%; margin-left:0; font-size:85% } .wtmenu th { padding:30px 15px 10px 15px} .wtmenu td { padding:0 15px 30px 33px; font-size:100%} #headright>div.bars i.fa { top:40px; } .wtmenu td a.sub::before { left:5px; top:5px;} .wtmenu td a.sub { padding-left:18px;} } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .wtmenu th { padding:30px 20px 10px 20px} .wtmenu td { padding:0 15px 30px 40px; font-size:95%} } @media only screen and (max-width:767px) { .ddmenu,#topwtmenu { display:none; } /* mobile side menu & mask */ .esfpushm { display:block; } #body.openm .esfpmask { height:100%; opacity:1; } .announcement .fa-times { font-size:20px; right:20px; top:20px; } .announcement>.pg-container { padding-left:0; padding-top:20px} .announcement .an-pos { width:90%} #body .announcement h3 { font-size:18px} header .headlogos { width:calc(100% - 70px);} #headright { width:70px; overflow:hidden;} #headright>div.bars i.fa, .smhead #headright>div.bars i.fa { top:50%; transform:translateY(-50%); /*top:15px;*/ right:5px;} #headright>div.bars i.fa.fa-times { left:25px; transition:none; top: 30%; right: 35px; } .nav-m { display:block} .nav-m ul.nm-login { padding:15px 20px; margin:0; list-style:none; /*background-color:#0972ff;*/ border-bottom:1px solid #2b85ff } .nav-m ul.nm-login li { padding:0; margin:0; list-style:none; display:inline-block;} .nav-m ul.nm-login li:after { content:"•"; padding:0 10px} .nav-m ul.nm-login li:last-child:after { content:""; padding:0} .nav-m ul.nm-lang { padding:15px 20px; margin:0; list-style:none; /*background-color:#0972ff*/ } .nav-m ul.nm-lang li { padding:0 8px; margin:0; list-style:none; display:inline-block;} .nav-m ul.nm-lang li:first-child { padding-left:0} .nav-m ul.nm-lang li:last-child { padding-right:0} .nav-m .nm-social .fa { padding:15px 20px; font-size:30px} } /* ========================================================================== Print ============================================================================= */ @media print { #topwtmenu { display:none; } }