/*common*/ /*#ca5200-->#C75000 for color contrast fixing*/ #mainContent .mod .h1{font-size:38px;line-height:46px;font-weight:normal;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;display: block;} #mainContent .mod .h2{font-size:30px;line-height:36px;font-weight:normal;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;display: block;} #mainContent .mod .h3{font-size:16px;line-height:16px;color:#C75000;font-weight:normal;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;display: block;} #mainContent .mod2 h2{font-size:24px;line-height:28px;font-weight:normal;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;display: block;} #mainContent .sec .h1{font-size:40px;line-height:48px;font-weight:normal;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;display: block;} #mainContent .btn-1{font-size:16px;line-height:16px;font-family:'robotoregular', Arial, 'Microsoft JhengHei', sans-serif, simsun;display:inline-block;vertical-align:middle;} /*header-line*/ #mainContent h2.header-line{font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;font-weight:normal;} #mainContent h2.header-line span{display:inline-block;position:relative;padding:0 100px;} #mainContent h2.header-line span:before, #mainContent h2.header-line span:after{content: " ";width:50px;top:50%;position:absolute;border-bottom:1px solid #2f2f2f;} #mainContent h2.header-line span:before{left:10px;} #mainContent h2.header-line span:after{right:10px;} #mainContent h2.header-line.wt span:before, #mainContent h2.header-line.wt span:after{border-color:#ffffff;} @media only screen and (min-width: 641px) and (max-width: 1020px){ } @media only screen and (min-width: 300px) and (max-width: 640px){ #mainContent h2.header-line span{padding:0 60px;} #mainContent h2.header-line span:before, #mainContent h2.header-line span:after{width:30px;} } /*header-line eol*/ /*header-slash*/ #mainContent h2.header-slash{font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;font-weight:normal;color:#C75000;} /*header-slash eol*/ a.btn-discover, .btn-discover a{text-decoration:none;cursor:pointer;} .btn-discover{position:relative;display:inline-block;/*width:140px;*/min-width:140px;height:45px;padding:0 15px;color:#C75000;font-size:12px;line-height:45px;text-transform:capitalize;text-align:center;border-left:1px solid #ca5200;border-right:1px solid #ca5200;-ms-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} .btn-discover span.icon-btn_arrow{display: inline-block;-ms-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);padding-right:10px;} .btn-discover:hover span.icon-btn_arrow{-webkit-animation-name: animation1;-webkit-animation-duration: 0.45s;-webkit-animation-iteration-count: infinite;animation-name: animation1;animation-duration: 0.8s;animation-iteration-count: infinite;} .btn-discover .border{-webkit-transition: all 0.45s ease-in-out;-moz-transition: all 0.45s ease-in-out;-o-transition: all 0.45s ease-in-out;transition: all 0.45s ease-in-out;} .btn-discover .border1{border-top:1px solid #ca5200;position:absolute;top:0px;left:0px;width:75%;} .btn-discover:hover .border1{width:15%;} .btn-discover .border2{border-top:1px solid #ca5200;position:absolute;top:0px;right:0px;width:15%;} .btn-discover:hover .border2{width:75%;} .btn-discover .border3{border-bottom:1px solid #ca5200;position:absolute;bottom:0px;left:0px;width:15%;} .btn-discover:hover .border3{width:75%;} .btn-discover .border4{border-bottom:1px solid #ca5200;position:absolute;bottom:0px;right:0px;width:75%;} .btn-discover:hover .border4{width:15%;} .btn-discover span.title{line-height: 45px !important;} .btn-discover.gy2{color:#575757;border-color:#575757;} .btn-discover.gy2 .border1, .btn-discover.gy2 .border2, .btn-discover.gy2 .border3, .btn-discover.gy2 .border4{border-color:#575757;} .btn-discover .icon-btn_close{margin-right:10px;} .btn-discover span[class^="icon-"]{display:inline-block;vertical-align:middle;} .btn-discover-or{color: #ffffff;background-color: #C75000;/*#ca5200;*/} .btn-discover-wt{color: #C75000;background-color: #ffffff;} .btn-discover-gn{color: #427532;background-color: #ffffff;} /*Discover Button in MouseOver Mod Box*/ ul.mod li.mod-item > a span.mod-img-box .btn-discover{} ul.mod li.mod-item > a span.mod-img-box .btn-discover:before{font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; content:"\e920";position:absolute;display:inline-block;color:#fff;font-size:66px;top:-30px; } ul.mod li.mod-item > a span.mod-img-box .btn-discover .border1, ul.mod li.mod-item > a span.mod-img-box .btn-discover:hover .border1{width:12%;} ul.mod li.mod-item > a span.mod-img-box .btn-discover .border2, ul.mod li.mod-item > a span.mod-img-box .btn-discover:hover .border2{width:12%;} ul.mod li.mod-item > a span.mod-img-box .btn-discover .border3, ul.mod li.mod-item > a span.mod-img-box .btn-discover:hover .border3{width:50%;} ul.mod li.mod-item > a span.mod-img-box .btn-discover .border4, ul.mod li.mod-item > a span.mod-img-box .btn-discover:hover .border4{width:50%;} @media only screen and (min-width: 1021px) and (max-width: 1499px){ #mainContent .mod .h1{font-size:26px;line-height:30px;} #mainContent .mod .h2{font-size:24px;line-height:28px;} } @media only screen and (min-width: 300px) and (max-width: 640px){ .btn-discover{min-width:120px;height:35px;line-height:35px;padding: 0 8px;} .btn-discover span.title {line-height: 35px !important;} } @media only screen and (min-width: 641px) and (max-width: 1020px){ } @media only screen and (min-width: 300px) and (max-width: 640px){ #mainContent .para-1, .popup-box .para-1{font-size:14px;line-height:18px;} #mainContent .mod .h1{font-size:16px;line-height:20px;} #mainContent .mod .h2{font-size:16px;line-height:20px;} #mainContent .mod .h3{font-size:12px;line-height:12px;} #mainContent .mod2 h2{font-size:18px;line-height:20px;} #mainContent .sec .h1{font-size:20px;line-height:24px;} #mainContent .btn-1{font-size:12px;line-height:12px;} } /*common*/ /*ppl overview*/ p.sub-headline{padding: 50px 50px;max-width: 1024px;text-align: center;margin: 0 auto;} ul.mod{list-style: none;font-size: 0px;} ul.mod li.mod-item{display: inline-block;width: 50%;position: relative;overflow: hidden;} ul.mod li.mod-item span.mod-middle-box > *{-ms-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} ul.mod li.mod-item > a{display: block;font-size: 0px;text-decoration: none;color: inherit;} ul.mod li.mod-item > a > span{width: 50%;display: inline-block;background-color: #ffffff;vertical-align: top;position: relative;} ul.mod li.mod-item > a > span.splitter{position: absolute;top: 50%;left: 50%;width: auto;font-size: 58px;background: transparent;color: #ca5200;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} ul.mod li.mod-item > a > span.splitter > span{display: inline-block;} ul.mod li.mod-item > a span.mod-content-box{border: 1px solid #dddddd;box-sizing: border-box;text-align: center;} ul.mod li.mod-item > a span.mod-content-box > img{width: 100%;} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box{position: absolute;top: 50%;left: 10px;right:10px;-ms-transform: translate(0%, -50%);-webkit-transform: translate(0%, -50%);transform: translate(0%, -50%);/*width:60%;*/width:70%;max-width: 265px;margin: 0 auto;} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box h3{} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box h2{margin-top: 12px;} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box img{margin-top: 10px;width: 70px;} ul.mod li.mod-item > a span.mod-img-box{overflow: hidden;} ul.mod li.mod-item > a span.mod-img-box img.mod-thumb{width: 100%;} ul.mod li.mod-item > a span.mod-img-box span.hover{display: block;position: absolute;top:0;left:0;right:0;bottom:0;background-image: url(../images/ppl/overview/hover_bg.png);-ms-transform: translate(0%, 100%);-webkit-transform: translate(0%, 100%);transform: translate(0%, 100%);-ms-transform: translate3d(0, 100%, 0);-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} ul.mod li.mod-item > a span.mod-img-box span.hover .btn-discover{border-color: #ffffff;color: #ffffff;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} ul.mod li.mod-item > a span.mod-img-box span.hover .btn-discover .border{border-color: #ffffff;} /*ul.mod li.mod-item > a:hover span.mod-img-box span.hover{-ms-transform: translate(0%, 0%);-webkit-transform: translate(0%, 0%);transform: translate(0%, 0%);}*/ ul.mod li.mod-item.full-size > a img.full-size-bg{width: 100%;-ms-transform-origin: center;-webkit-transform-origin: center;transform-origin: center;} ul.mod li.mod-item.full-size > a img.full-size-bg-wt{position: absolute;left: 0px;top: 0px;height: 100%;} ul.mod li.mod-item.full-size > a span.mod-middle-box{width: auto;background-color: transparent;border: 0px;text-align: left;position: absolute;top: 50%;left: 40px;-ms-transform: translate(0%, -50%);-webkit-transform: translate(0%, -50%);transform: translate(0%, -50%);} ul.mod li.mod-item.full-size > a span.mod-middle-box .btn-discover{margin-top: 17px;color: #ffffff;background-color: #C75000;} @media only screen and (min-width: 1500px){ ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box{width: 265px;} } @media only screen and (min-width: 641px) and (max-width: 1020px){ p.sub-headline{padding: 30px 25px;} ul.mod li.mod-item{width: 100%;} /*ul.mod li.mod-item~li.mod-item > a > span:nth-child(2)*/ ul.mod li.mod-item:nth-child(2) > a > span:nth-child(2) , ul.mod li.mod-item:nth-child(3) > a > span:nth-child(2) , ul.mod li.mod-item:nth-child(6) > a > span:nth-child(2) {float: left;} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box{width: calc(100% - 20px);} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box img{width: 50px;} ul.mod li.mod-item > a > span.splitter{font-size: 58px;} ul.mod li.mod-item.full-size > a span.mod-middle-box .btn-discover{color: #ffffff;background-color: #C75000;width: 107px;} } @media only screen and (min-width: 0px) and (max-width: 640px){ p.sub-headline{padding: 30px 25px;} ul.mod li.mod-item{width: 100%;} /*ul.mod li.mod-item:nth-child(2) > a > span:nth-child(2), ul.mod li.mod-item:nth-child(3) > a > span:nth-child(2)*/ ul.mod li.mod-item:nth-child(2) > a > span:nth-child(2) , ul.mod li.mod-item:nth-child(3) > a > span:nth-child(2) , ul.mod li.mod-item:nth-child(6) > a > span:nth-child(2) {float: left;} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box{width: calc(100% - 30px);} ul.mod li.mod-item > a span.mod-content-box span.mod-middle-box img{width: 50px;} ul.mod li.mod-item > a > span.splitter{font-size: 29px;} ul.mod li.mod-item.full-size > a span.mod-middle-box{left:20px;} ul.mod li.mod-item.full-size > a span.mod-middle-box .btn-discover{color: #ffffff;background-color: #C75000;width: 107px;} /*Discover Button in MouseOver Mod Box*/ ul.mod li.mod-item > a span.mod-img-box .btn-discover:before{font-size:52px;top:-25px; } } @-webkit-keyframes animation1 { 0% {-webkit-transform:translateX(0px);} 50% {-webkit-transform:translateX(5px);} 100% {-webkit-transform:translateX(0px);} } /* Standard syntax */ @keyframes animation1 { 0% {transform:translateX(0px);} 50% {transform:translateX(5px);} 100% {transform:translateX(0px);} } /*ppl overview*/ /*ppl working*/ #mainContent .mod3 .header{padding:30px 0;position:relative;box-shadow: 0px 5px 10px 0px rgba(204, 204, 204, 0.5);z-index:10;} #mainContent .mod3 .header:after{content: "";position: absolute;width: 0;height: 0;margin-left: -13px;bottom: -18px;left: 50%;box-sizing: border-box;border: 9px solid black;border-color: transparent transparent #ffffff #ffffff;box-shadow: -2px 2px 3px 0px rgba(204, 204, 204, 0.5);background-color:#ffffff; -ms-transform-origin: 0 0;-ms-transform: rotate(-45deg); -webkit-transform-origin: 0 0;-webkit-transform: rotate(-45deg); transform-origin: 0 0;transform: rotate(-45deg); } #mainContent .mod3 .header img{padding-bottom:15px;} #mainContent .mod3 .item{display:table;width: 100%;} #mainContent .mod3 .item .thumbnail, #mainContent .mod3 .item .text{display:table-cell;width:50%;} #mainContent .mod3 .item .thumbnail, #mainContent .mod3 .item .text{width:50%;} #mainContent .mod3 .item .thumbnail img{width:100%;} #mainContent .mod3:nth-child(even), #mainContent .mod3:nth-child(even) .header:after{background-color:#f0f0f0;} #mainContent .mod3:nth-child(even) .header:after{border-color: transparent transparent #f0f0f0 #f0f0f0;} /*#mainContent .mod3 .item:nth-child(odd) .thumbnail div:nth-child(1).containerDiv{left:100%;}*/ #mainContent .mod3 .item:nth-child(odd) .thumbnail div.containerDiv{left:100%;} #mainContent .mod3 .item:nth-child(odd) .thumbnail div.swiper-pagination-wrapper.containerDiv{left:auto;} #mainContent .mod3 .item:nth-child(odd) .thumbnail span.splitter{left: 0%;} #mainContent .mod3 .item:nth-child(odd) .text > div.containerDiv{left:calc(-100% - 70px);} #mainContent .mod3 .item .text{padding:35px;text-align:center;vertical-align:middle;} #mainContent .mod3 .item .text h3, #mainContent .mod3 .balance-text h3{color:#B34700;font-weight:normal;margin-bottom:25px;} #mainContent .mod3 .item .text p{color:#575757;max-width: 560px;margin: 0 auto;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;} @media only screen and (min-width: 300px) and (max-width: 1020px){ #mainContent .mod3 .header{padding:20px 0;} #mainContent .mod3 .header:after{bottom: -14px;border-width:7px;margin-left: -10px;} #mainContent .mod3 .header img{padding-bottom:8px;width:44px;} #mainContent .mod3 .item .thumbnail, #mainContent .mod3 .item .text{display:block;width:100%;} #mainContent .mod3 .item:nth-child(odd) .thumbnail div.containerDiv{left:auto;} #mainContent .mod3 .item:nth-child(odd) .thumbnail span.splitter{left:50%;} #mainContent .mod3 .item:nth-child(odd) .text > div.containerDiv{left:auto;} /*#mainContent .mod3 .item .text{padding:30px 25px 20px 25px;}*/ #mainContent .mod3 .item .text h3{margin-bottom:20px;} } @media only screen and (min-width: 300px) and (max-width: 640px){ #mainContent .mod3 .item .text h3, #mainContent .mod3 .balance-text h3{margin-bottom:20px;} #mainContent .mod3 .item .text{padding:30px 25px 20px 25px;} } /*ppl working*/ /*corp gov overview*/ #mainContent .mod2{overflow:hidden;border-bottom:1px solid #b9b9b9;} #mainContent .mod2 h2{border-bottom:1px solid #565656;display:inline-block;padding-bottom:10px;margin-bottom:15px;position:relative;} #mainContent .mod2 h2:after{content:'';border-top:1px solid #b9b9b9;margin:0;position:absolute;left:0;bottom:-1px;width:2000px;z-index:-1;} #mainContent .mod2 .mod-item{float:left;width:100%;display:table;} #mainContent .mod2 .mod-item .txt{padding:55px;} #mainContent .mod2 .mod-item .mod-left-box, #mainContent .mod2 .mod-item .mod-right-box{width:50%;display:table-cell;vertical-align:top;} #mainContent .mod2 .mod-item .mod-left-box{position:relative;} #mainContent .mod2 .mod-item .mod-left-box .tri{position: absolute;top: 55px;right: 0;width: 0;height: 0;border-style: solid;border-width: 15px 15px 15px 0;border-color: transparent #ffffff transparent transparent;} #mainContent .mod2 .mod-item .mod-thumb{background-size:cover;} #mainContent .mod2 .mod-item .mod-thumb img{width:100%;vertical-align:top;} #mainContent .mod2 .mod-item .desc{/*height:120px;overflow:hidden;*/min-height:120px;display:block;} #mainContent .mod2 .mod-item a.btn-1{padding:12px 25px 12px 55px;background-color:#C75000;display:inline-block;} #mainContent .mod2 .mod-item .btn-discover{color: #ffffff;background-color: #C75000;} #mainContent .legendWrapper{border-bottom:1px solid #b9b9b9;} #mainContent .legend{padding:50px;position:relative;} #mainContent .legend div.left-box{border:1px solid #2f2f2f;width:75%;padding:45px 35px 35px 35px;display:inline-block;position:relative;} #mainContent .legend .h1{font-size:30px;line-height:30px;font-weight:normal;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;display: inline-block;} #mainContent .legend .h1{position:absolute;left:50%;top:-15px;-ms-transform:translate(-50%, 0%);-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);white-space: nowrap;} #mainContent .legend .h1:before , #mainContent .legend .h1:after , #mainContent .legend .h1 span:before , #mainContent .legend .h1 span:after {content: " ";width:30px;height:30px;position:absolute;background:#ffffff;top:0px;} #mainContent .legend .h1:before{left:-110px;} #mainContent .legend .h1:after{right:-110px;} #mainContent .legend .h1 span:before{left:-30px;} #mainContent .legend .h1 span:after{right:-30px;} #mainContent .legend .h1 span{background-color:white;display:inline-block;position:relative;} #mainContent .legend .desc{font-size:18px;line-height:22px;font-family:'robotolight', Arial, 'Microsoft JhengHei', sans-serif, simsun;display:block;} #mainContent .legend a.a-box {text-decoration:none;display:inline-block;padding:25px 15px;background-color:#383838;width:30%;margin-right:4.3%;text-align:center;min-height:240px;vertical-align:text-bottom;border-bottom:2px solid #ca5200; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; } #mainContent .legend a.a-box:hover{border-bottom:6px solid #ca5200;} #mainContent .legend a.a-link:hover {text-decoration:none;} #mainContent .legend a.a-link {color:inherit;} #mainContent .legend a.a-box > span{display:block;} #mainContent .legend > div.right-box{display:inline-block;width:24%;} #mainContent .legend > div.right-box > a{margin-right:0%;margin-left:14.5%;background-color:#C75000;width:89%;} #mainContent .legend > div.right-box > a:hover{border-bottom:6px solid #b24800;} #mainContent .legend a.a-box + a.a-box + a.a-box{margin-right:0%;} @media only screen and (min-width: 1021px) and (max-width: 1499px){ #mainContent .legend .desc{font-size:14px;line-height:18px;} } @media only screen and (min-width: 300px) and (max-width: 1020px){ #mainContent .mod2 .mod-item .mod-left-box{display:table-row;} #mainContent .mod2 .mod-item .mod-left-box .tri{display:none;} #mainContent .mod2 .mod-item .mod-left-box, #mainContent .mod2 .mod-item .mod-right-box{width:100%;} #mainContent .mod2 .mod-item .mod-right-box{padding:15px;} #mainContent .legend{width:100%;max-width:500px;margin:0 auto;padding:30px 15px 15px 15px;} #mainContent .legend a.a-box {width:100%;margin-right:0%;margin-bottom:15px;position:relative;} /*#mainContent .legend div.left-box{padding: 30px 15px 0px 15px;}*/ #mainContent .legend .h1 span{padding:0 10px;} #mainContent .legend .h1:before , #mainContent .legend .h1:after , #mainContent .legend .h1 span:before , #mainContent .legend .h1 span:after {display:none;} #mainContent .legend div.left-box{width:100%;} #mainContent .legend > a.a-box {margin:0 35px;} #mainContent .legend a.a-box:hover{border-bottom:2px solid #ca5200;} #mainContent .legend a.a-box > span{display:block;position:absolute;left:0;top:45%;-ms-transform:translate(0%, -50%);-webkit-transform:translate(0%, -50%);transform:translate(0%, -50%);width:100%;} #mainContent .legend .desc{display:inline-block;width:95%;} #mainContent .legend > div.right-box{width:100%;padding:15px 15px 0 15px;} #mainContent .legend > div.right-box > a{margin-left:0%;width:100%;margin-bottom:0;} #mainContent .legend > div.right-box > a:hover{border-bottom:2px solid #b24800;} } @media only screen and (min-width: 641px) and (max-width: 1020px){ #mainContent .legend{padding-top:50px;padding-bottom:30px;} #mainContent .legend a.a-box {margin-bottom:30px;} #mainContent .legend .h1{top:-15px;} #mainContent .legend > div.left-box a:nth-child(4){margin-bottom: 0px;} #mainContent .legend > div.right-box{padding:30px 30px 0 30px;} } @media only screen and (min-width: 300px) and (max-width: 640px){ #mainContent .legend div.left-box{padding: 30px 15px 0px 15px;} #mainContent .legend .h1{font-size:19px;line-height:19px;} #mainContent .legend .h1{top:-8px;} #mainContent .legend .desc{font-size:14px;line-height:18px;} } /*corp gov overview*/ /*sustainability*/ .mod7 {padding:50px 0;} .mod7 .header-line{margin-bottom:50px;} .mod7 p{padding: 0 48px 50px 48px;max-width: 1024px;/*text-align: center;*/margin: 0 auto;} @media only screen and (min-width: 300px) and (max-width: 640px){ .mod7 {padding:20px 0;} .mod7 .header-line{margin-bottom:20px;} .mod7 p{padding: 0 20px 20px 20px;} } /*sustainability*/ /*about overview*/ /*about overview*/ /*invest results presentation*/ #downloadMod{min-height:500px;} #downloadMod div.content{min-height:460px;width:1020px;margin:0 auto;} #downloadMod div.content > div{display:inline-block;min-height:460px;} #downloadMod div.content > div:nth-child(1){width:550px;} #downloadMod div.content > div:nth-child(2){width:calc(100% - 555px);} #downloadMod div.content > div.containerDiv img.head-banner{position:absolute;left:-117px;top:-15px;height:520px;} #downloadMod div.content > div.containerDiv div.download-wrapper{top:55%;-ms-transform: translate(0, -50%);-webkit-transform: translate(0, -50%);transform: translate(0, -50%);position:absolute;} #downloadMod div.content > div.containerDiv div.download-wrapper div.title{margin-bottom:35px;color:#ffffff} #downloadMod div.content > div.containerDiv div.download-wrapper div.title h2, #downloadMod div.title h2 b{font-weight:normal;} #downloadMod div.content > div.containerDiv div.download-wrapper div.title h2 b{font-family:'robotoregular', Arial, 'Microsoft JhengHei', sans-serif, simsun;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download{margin-bottom:22px;color:#ffffff;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download div > span{border-left:3px solid #ffffff;padding-left:10px;display:inline-block;min-width:152px;margin:10px 0;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download div > div{display:inline-block;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download div > div.nowrap{min-width: calc(100% - 160px);} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 div > div.nowrap{min-width: calc(100% - 220px);} #downloadMod div.content > div.containerDiv .btn-discover{position:relative;border-left:0;border-right:0;} #downloadMod div.content > div.containerDiv .btn-discover.btn-video{margin-left: 35px;min-width:100px;padding-left:45px} #downloadMod div.content > div.containerDiv .btn-video .icon-btn_play-tri{padding: 20px;display: inline-block;position: absolute;color: #ca5200;top: -7px;left: -30px;border-radius: 500px;background-color: #ffffff;font-size: 22px;box-shadow: 3px 0px 1px rgba(170, 170, 170, 0.5);} /*green theme*/ #downloadMod.gn div.content > div.containerDiv div.download-wrapper div.title{color:#2c4923} #downloadMod.gn div.content > div.containerDiv div.download-wrapper div.download{color:#2c4923;} #downloadMod.gn div.content > div.containerDiv div.download-wrapper div.download div > span{border-left:3px solid #2c4923;} @media only screen and (min-width: 0px) and (max-width: 1020px){ /*#downloadMod{background:none transparent;}*/ #downloadMod{min-height:420px;border:1px solid #cdcdcd;} #downloadMod div.content{width:auto;min-height:420px;} #downloadMod div.content > div{display:inline-block;min-height:0;} #downloadMod div.content > div:nth-child(1){width:100%;min-height:0;height:210px;text-align:center;/*background:url(../images/investor/investor_presentation/top-banner_bg.jpg);*/} #downloadMod div.content > div:nth-child(2){width:100%;} #downloadMod div.content > div.containerDiv img.head-banner{left:50%;top:-7px;height:237px;-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);} #downloadMod div.content > div.containerDiv div.download-wrapper div.title{color:#ca5200;text-align:center;margin-top:17px;} #downloadMod div.content > div.containerDiv div.download-wrapper{top:0;-ms-transform: translate(0, 0);-webkit-transform: translate(0, 0);transform: translate(0, 0);position:static;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download{color:#ca5200;max-width:465px;margin-left:auto;margin-right:auto;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download div{display:inline-block;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download div > span{border-color:#ca5200;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 div > span{float:left;min-width:0;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 div > div{float:right;} #downloadMod div.content > div.containerDiv .btn-video .icon-btn_play-tri{color: #ffffff;background-color: #C75000;} #downloadMod div.content > div.containerDiv .btn-discover{color: #ffffff;background-color: #C75000;} #downloadMod div.content > div.containerDiv .btn-video .icon-btn_play-tri{box-shadow: 3px 0px 1px rgba(0, 0, 0, 0.1);} /*green theme*/ #downloadMod.gn div.content > div.containerDiv .btn-discover{color: #ffffff;background-color: #427532;} } @media only screen and (min-width: 641px) and (max-width: 1020px){ #downloadMod div.content > div:nth-child(1){height:290px;} #downloadMod div.content > div.containerDiv img.head-banner{top:-10px;height:327px;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 > div{width:100%;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 div > div.nowrap{min-width:0;} } @media only screen and (min-width: 0px) and (max-width: 640px){ #mainWrapper{overflow:hidden;} #downloadMod div.content > div.containerDiv div.download-wrapper div.title{margin-bottom:17px;} #downloadMod div.content > div.containerDiv div.download-wrapper div.title .ft38{font-size:23px;} #downloadMod div.content > div.containerDiv div.download-wrapper div.title .lh46{line-height:25px;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download{padding:0 25px;text-align:center;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.fts20{font-size:16px;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.lhs22{line-height:20px;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download div{display:inline-block;width:100%;text-align:left;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 > div div.nowrap{width:auto;min-width:0;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 div > span{display:inline-block;margin:8px 0;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 div > span{float:left;min-width:0;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download.col-2 div > div{float:right;} #downloadMod div.content > div.containerDiv div.download-wrapper div.download div > span{display:block;text-align:left;} #downloadMod div.content > div.containerDiv .btn-discover.btn-video{padding-left:30px;} #downloadMod div.content > div.containerDiv .btn-video .icon-btn_play-tri{padding:16px;top:-9px;} /*green theme*/ } /*invest results presentation*/ /*report*/ #downloadModOthers{width:918px;margin:0 auto;padding-top:30px;} #downloadModOthers ul{} #downloadModOthers ul li{width:280px;margin:30px 13px 0 13px;padding-bottom:30px;} #downloadModOthers ul li img{width:100%;margin-bottom:17px;} #downloadModOthers ul li h3{font-weight:normal;} #downloadModOthers ul li div.link a{text-decoration:none;display:inline-block;padding-right:15px;margin-top:17px;} #downloadModOthers ul li div.link.link-single a{padding-right:0px;} #downloadModOthers ul li div.link.link-single span[class^="icon-"]{padding-right:15px;} #downloadModOthers ul li div.link a span{vertical-align: middle;} #downloadModOthers ul li div.link a:nth-child(2){border-left:1px solid #cdcdcd;padding-left:15px;} #downloadModOthers ul li div.link + div.link a{margin-top:12px;} @media only screen and (min-width: 641px) and (max-width: 1020px){ #downloadMod{background:none transparent !important;} #downloadModOthers{padding:0 12px;width:640px;} } @media only screen and (min-width: 0px) and (max-width: 640px){ #downloadMod{background:none transparent !important;min-height:auto;} #downloadMod div.content{min-height:auto;} #downloadModOthers{width:auto;padding-top:0px;padding-left:12px;padding-right:12px;} #downloadModOthers ul li{width:calc(100% - 25px);margin-top:25px;} #downloadModOthers ul li:first-child{/*margin-top:0px;*/} #downloadModOthers ul li h3{font-size:20px;line-height:22px;} #downloadModOthers ul li a.btn-download{font-size:33px;} } /*report*/ /*mod count 6 next 7*/ /*press*/ .date_box{position:absolute;padding:18px 0;font-weight:bold;} .date_box span{display:block; width:80px; text-align:center;} .date_box .date{font-size:32px;} .date_box .mon{font-size:18px;} .date_box .year{font-size:16px;line-height:1.2;} .info_label {display:block;position:relative;} /*#ca5200*/ .info_label .label{display:block;position:relative;width:80px;height:80px;line-height:80px;background-color:#C75000; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;} .info_label a.label:hover { -ms-transform: scale(1.12, 1.12);-webkit-transform: scale(1.12, 1.12);transform: scale(1.12, 1.12);} .info_list{display:block; position:relative; padding-bottom:1px; padding:20px 0 40px 50px; margin-left:40px;margin-bottom:20px; border-left:1px solid #ca5200;} .info_list:after{content:"";display:block;position:absolute;width:8px;height:8px; left:-5px;bottom:0; border:1px solid #ca5200; background-color:#C75000;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;} .info_list .info_item {display:block;position:relative;margin-bottom:35px;} .info_list .info_item:before{content:"";display:block;position:absolute;left:-50px;top:62px;height:1px;width:50px;border-bottom:1px solid #ca5200;} .info_list .info_box{position:relative;margin-left:58px;padding:22px 28px 11px 50px;border:1px solid #cdcdcd;} .info_list .info_box h2 {min-height:48px;max-width:600px;font-weight:normal;} .info_list .date_box{top:10px;left:0;} .info_list .date_box:before {content:"";display:block;position:absolute;width:14px;height:14px; left:-58px;top:46px; border:1px solid #ca5200; background-color:#fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;} .info_list .date_box:after {content:"";display:block;position:absolute;width:8px;height:8px; left:-55px;top:49px; border:1px solid #ca5200; background-color:#C75000; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;} @media only screen and (min-width:300px) and (max-width:640px){ #mainWrapper .date_box{padding:6px 0;} #mainWrapper .date_box span{width:46px;} #mainWrapper .date_box .date{font-size:24px;} #mainWrapper .date_box .mon{font-size:14px;} #mainWrapper .date_box .year{font-size:12px;} #mainWrapper .info_list{padding-left:20px;margin-left:22px;} #mainWrapper .info_label .label {font-size:14px;width:45px;height:45px;line-height:45px;} #mainWrapper .info_list .info_item {margin-bottom:6px;} #mainWrapper .info_list .info_item:before {top:36px;left:-20px;width:20px;} #mainWrapper .info_list .info_box{padding:11px 12px 11px 26px;margin-left:32px;} #mainWrapper .info_list .date_box:before, .info_list .date_box:after{transform:scale(0.6, 0.6);-ms-transform:scale(0.6, 0.6);-webkit-transform:scale(0.6, 0.6);} #mainWrapper .info_list .info_box h2 {min-height:36px;font-size:14px;line-height:18px;} #mainWrapper .info_list .date_box{top:5px;} #mainWrapper .info_list .date_box:before {top:25px;left:-28px;} #mainWrapper .info_list .date_box:after {top:28px;left:-25px;} } /*top_page_menu*/ .top_page_menu {position:relative;} .top_page_menu:before{content:"";display:block;position:absolute;height:1px;width:100%;bottom:0px;border-bottom:1px solid #cdcdcd;} .top_page_menu ul {display:block;position:relative;list-style:none;padding:0 10px;} .top_page_menu .page_label {display:inline-block;margin-right:50px;vertical-align:bottom;} .top_page_menu .page_label.page_label2{margin-right: 13px;} #mainWrapper .top_page_menu ul li.page_label-splitter{display:none;width:100%;} #mainWrapper .top_page_menu ul li.page_label:last-child{margin-right:0;} .top_page_menu .page_label a{display:inline-block;height:70px;line-height:70px;padding:0 20px; color:#575757; border-bottom:1px solid #808080;} .top_page_menu .page_label.page_label2 a{padding:0 5px} .top_page_menu .page_label a:hover{border-color:#C75000;color:#C75000;text-decoration:none;} .top_page_menu .page_label.active a{border-color:#C75000;color:#C75000;} .sub-menu-title {margin-bottom:20px;} @media only screen and (max-width: 1200px){ #mainWrapper .top_page_menu .page_label{margin-right: 25px;} #mainWrapper .top_page_menu .page_label.page_label2{margin-right: 13px;} #mainWrapper .top_page_menu .page_label a{padding: 23px 10px;line-height:1.2;height:auto;} #mainWrapper .top_page_menu .page_label.page_label2 a{padding: 23px 5px;} } @media only screen and (max-width: 1020px){ #mainWrapper .top_page_menu .page_label{margin-right: 25px;} #mainWrapper .top_page_menu ul li.page_label-splitter{display:block;} #mainWrapper .top_page_menu.top_page_menu_mobile_50_50 .page_label{margin-right:0px;width:calc(50% - 2px);text-align:center;} #mainWrapper .top_page_menu.top_page_menu_mobile_45_55 .page_label:nth-child(3n+1){margin-right:0px;width:calc(42% - 3px) !important;text-align:center !important;} #mainWrapper .top_page_menu.top_page_menu_mobile_45_55 .page_label:nth-child(3n+2){margin-right:0px;width:calc(58% - 3px);text-align:center;} } @media only screen and (min-width: 300px) and (max-width: 640px){ #mainWrapper .top_page_menu .page_label a{height:auto;line-height:1.2;font-size:15px;padding:12px 2px;} } /*top_page_menu*/