@charset "utf-8";
/* CSS Document */
/*--------------- Start PWM--------------------------*/
nav#nav #main-nav *{transition:all .25s; -webkit-transition:all .25s;}

html{background:#003853; color:#FFF;}
@media screen and (max-width:1024px){
	html{font-size:1.6vw;}
}
@media screen and (max-width:768px){
	html{font-size:2vw;}
}
@media screen and (max-width:480px){
	html{font-size:3vw;}
}
body{color:#FFF;}
a{color:#8ca0a7;}
a, button{transition:all .5s;}
html:not([lang=en]) .section{word-break:keep-all;}
@media (-ms-high-contrast: none), (-ms-high-contrast: active){
	html:not([lang=en]) .section{word-break:normal;}
	html:not([lang=en]) wbr{display:inline;}
}

nav#nav{position:fixed; z-index:999; width:100%; margin:0 auto; font-size:.95rem; font-weight:600; color:#333; height:80px;}
nav#nav::before{content:""; display:block; position:fixed; top:0; left:0; right:0; height:inherit; background:#FFF; z-index:1;}
nav#nav{display:flex;align-items:center;flex-flow:row nowrap;justify-content: space-between;}
html:not([lang=en]) nav#nav{font-weight:400;}
nav#nav a{color:#333;}
nav#nav *{display: flex;margin: auto 0; padding:0; z-index:2;white-space:nowrap;align-items: center;justify-content: space-between;}
nav#nav>*{margin:auto 1rem;}
nav#nav #logo a{display:inline-block; height:3em;}

nav#nav #logo img {width:auto; height:100%;}

@media screen and (max-width:500px){
	nav#nav #logo img {width:auto; height:75%;}
}

nav#nav #mobile-menu-icon{display:none;}
nav#nav #main-nav{display:flex; align-items:center; flex-flow:row nowrap; width:100%; margin: auto 1em;}
nav#nav #main-nav>ul{width:100%; margin: auto 0 auto auto;}
nav#nav #main-nav>ul>li{margin:0;}
@media screen and (max-width:1200px){
	nav#nav{font-size:1.25vw;}
}
@media screen and (min-width:1366px){
	nav#nav #main-nav>ul{max-width:60em;}
}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	nav#nav #main-nav ul:hover>li:not(:hover){opacity:.5;}
}
nav#nav .region-select{position:relative;}
nav#nav .region-select *{display:inline-block; font-weight:100;}
nav#nav .region-select .fa.fa-globe-asia{font-family:inherit; padding:0 .75em 0 1.5em; position:relative;}
nav#nav .region-select .fa.fa-globe-asia q{padding:0 .4em !important; font-weight:600;}
nav#nav .region-select .fa.fa-globe-asia q:before,.region-select .fa.fa-globe-asia q:after{content:none;}
nav#nav .region-select .fa.fa-globe-asia::before, nav#nav .region-select .fa.fa-globe-asia::after{position:absolute;}
nav#nav .region-select .fa.fa-globe-asia::before{font-size:1.1em; font-family:FontAwesome5; font-weight:900; left:0;}
nav#nav .region-select>a::after{content:"\f107"; font-family:FontAwesome; font-weight:normal; right:0; margin-left:.25em;}
nav#nav .region-select ul{transform-origin:top center; transition:all .2s;}
nav#nav .region-select ul{position:absolute; background:#FFF; right:0; top:1.5em; padding:0; box-shadow:0 5px 5px rgba(0,0,0,.1); display:flex; flex-flow:column nowrap;}
nav#nav .region-select ul li, nav#nav #main-nav .region-select ul li{margin:0; padding:0; text-align:center;}
nav#nav .region-select ul li, nav#nav #main-nav .region-select ul li{font-weight:600; opacity:1;}
html:not([lang=en]) .region-select ul li, nav#nav #main-nav .region-select ul li{font-weight:400;}
nav#nav .region-select ul li>a{color:#777; font-size:1em; padding:.4em 1.5rem .6em 1.5rem; cursor:pointer; display:block;}
nav#nav #main-nav .region-select>ul{overflow:hidden;}
nav#nav #main-nav .region-select>ul>li, nav#nav #main-nav .region-select>ul>li>a{width:100%;}
nav#nav #main-nav .region-select:not(.selectable)>ul:not(:hover){padding-bottom:0;}
nav#nav #main-nav .region-select:not(.selectable)>ul:not(:hover) li{opacity:0 !important; height:0 !important; padding-top:0 !important; padding-bottom:0 !important;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	.region-select ul li>a:hover{color:#333; background:#EEE;}
}
.region-select a>q{display:none;}
@media screen and (max-width:1024px){
    .region-select *{font-size:inherit;}
}
@media screen and (max-width:1366px){
    nav#nav{font-size:1rem; height:5rem; padding:0;}
	nav#nav>*:nth-child(1){margin-left:1rem;}
	nav#nav>*:nth-child(2){margin-right:0; height:100%;}
	nav#nav #main-nav{display:inline-block; width:5rem; height:5rem; overflow:visible; line-height:0;}
	nav#nav #main-nav #mobile-menu-icon{display:inline-flex; flex-flow:column nowrap; align-items:center; padding:2.5rem; position:relative; z-index:3;}
	nav#nav #main-nav #mobile-menu-icon::before, nav#nav #main-nav #mobile-menu-icon::after{content:""; position:absolute; transform-origin:center; transition:all .2s; width:40%; height:15%; display:inline-block; margin:auto 0; border:solid #333;}
	nav#nav #main-nav #mobile-menu-icon::before{border-width:1px 0 0 0; bottom:50%;}
	nav#nav #main-nav #mobile-menu-icon::after{border-width:1px 0 1px 0; top:50%;}
	nav#nav #main-nav #mobile-menu-icon.expand::before, nav#nav #main-nav #mobile-menu-icon.expand::after{background:#333; border-color:#FFF; height:0; border-width:.25px; top:50%;}
	nav#nav #main-nav #mobile-menu-icon.expand::before{transform:rotate(45deg);}
	nav#nav #main-nav #mobile-menu-icon.expand::after{transform:rotate(135deg);}
	nav#nav #main-nav>ul{display:flex; flex-flow:column nowrap; z-index:2; position:absolute; background:rgba(0,0,0,.8); top:0; left:0; width:100%; height: 100vh; padding:5rem 0;}
	@media screen and (max-height:480px){
		nav#nav #main-nav>ul{padding:0;}
	}
	nav#nav #main-nav #mobile-menu-icon:not(.expand)+ul{left:100%;}
	nav#nav #main-nav ul li{opacity:1; position:relative; width:inherit; text-align:center;}
	nav#nav #main-nav ul li>a{font-size:1.2rem; font-weight:400; line-height:1em; padding: 1em; color:rgba(255, 255, 255, .8); display:inline-block; width:100%;}
	nav#nav #main-nav>ul>li{display:inline-flex; flex-wrap:wrap; height:auto; padding-bottom:1rem; margin:0; align-self:stretch;}
	nav#nav #main-nav>ul>li:not(:last-child){border-bottom: 1px solid rgba(255,255,255,.2);}
	nav#nav .region-select .fa.fa-globe-asia::before, nav#nav .region-select .fa.fa-globe-asia::after{position:relative; margin: auto .75em;}
	nav#nav .region-select ul{flex-flow:row wrap; align-items:center; font-size:1.5rem; position:relative; background:none; color:#FFF; top:0; padding-bottom:1em;}
	nav#nav #main-nav .region-select ul li{margin:auto; width:auto; border-bottom:0 none;}
	nav#nav #main-nav .region-select ul li.region{width:100%; margin:0; font-size:1.2rem; display:inline-block;}
	nav#nav #main-nav .region-select ul li>a{padding:.75em;}
	nav#nav #main-nav .region-select ul li:not(.region)+li:not(.region)::after{content:""; position:absolute; display:block; width:1px; transform-origin:center; transform:rotate(45deg); background:rgba(255,255,255,.2); top:.5em; bottom:.5em; left:0;}
	nav#nav #main-nav .region-select ul{opacity:1; display:inline-flex; margin:auto;}
	nav#nav #main-nav .region-select:not(.selectable)>ul{padding-bottom:0;}
	nav#nav #main-nav .region-select:not(.selectable)>ul li{opacity:0 !important; height:0 !important; padding-top:0 !important; padding-bottom:0 !important;}
}
@media screen and (max-width:768px) and (min-width:480px){
	nav#nav #main-nav .region-select:not(.selectable)>ul{margin:0; width:0;}
}

aside#floating-menu{position:fixed; z-index:100; background:#FFF; right:0; bottom:1rem; display:inline-block; border-radius:3px 0 0 3px; box-shadow:0 0 10px rgba(0,0,0,.2);}
aside#floating-menu>a{display:block; position:relative; color:#DADADA; padding:1rem; font-size:1.5rem; text-align:center;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	aside#floating-menu>a:hover{color:#78838a;}
}
aside#floating-menu>a:not(:last-child){border-bottom:1px solid #EEE;}
aside#floating-menu>a[href="#top"]::after{content:""; position:absolute; border-top:4px solid; border-radius:1px; top:.9rem; right:1.1rem; left:1.1rem;}

#footer-tnc{float:right;}
#footer-tnc>a{padding:0 0 0 1em; margin:0 0 0 1em;}
#footer-tnc>a:not(:first-child){border-left:1px solid #666;}
.main-footer *{color:#FFF !important;}
.footer-bottom *{color:#8C8C8C !important;}

@media screen and (max-width:900px){
	#footer-tnc{display:block; float:none; margin-left:-2em; padding:.25em 0;}
}

div#dialog{display:flex; position:fixed; top:0; bottom:0; margin:auto; flex-flow:column nowrap; align-items:center; align-self:center; z-index:999; }
div#dialog:not(.show){display:none;}
div#dialog.show{display:flex !important;}
div#dialog::before{content:""; position:fixed; top:0; right:0; left:0; bottom:0; background:rgba(0,0,0,.75); z-index:10;}
div#dialog>*{display:inline-block; margin:0 auto; z-index:1000; white-space:nowrap;}
div#dialog>* *{white-space:normal;}
div#dialog>*:first-child{margin-top:auto;}
div#dialog>*:last-child{margin-bottom:auto;}
div#dialog>a{font-size:1.25rem; display: inline-block; margin:auto 0 0 auto; color:#FFF; font-weight:400;}
div#dialog>a:before{content:"X"; font-weight:100; transform-origin:center; transform:scaleX(1.3); display:inline-block;}
div#dialog>a:after{content:"CLOSE"; font-family:inherit; font-weight:100; padding:0 0 0 .5rem; cursor:pointer;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	div#dialog>a:hover{opacity:.5;}
}
div#dialog>*:not(a){position:relative; padding:5rem 2rem 2rem 2rem; background:#FFF; color:#333; box-shadow:0 0 10px rgba(0,0,0,.5); text-align:left; border-radius:2px; max-width:90vw; max-height:90vh; overflow:auto;}
div#dialog>*[data-title]::before{content:attr(data-title); display:block; font-size:2rem; position:absolute; top:2rem; opacity:.2; font-weight:100;}

div#dialog .region-select{padding:2rem;}
div#dialog .region-select *{font-size:1rem; display:block; text-align: center;}
div#dialog .region-select>a{color:#666 !important; cursor:default; padding:0;}
div#dialog .region-select a::before{position:static; display:block; text-align: center; font-size: 2rem; opacity:.5; padding:0 0 .5rem 0;}
div#dialog .region-select a::after{content:none;}
div#dialog .region-select ul{opacity:1; display:block; transform:none; position:static; margin:1rem auto auto auto; padding:0; box-shadow:none;}
@media screen and (max-width:768px){
	div#dialog .region-select *{font-size:1.3rem;}
}

#Contact-Us{display:flex; flex-flow:row nowrap; align-content:flex-start; color:#333; background:#FFF; text-align: left;}
#Contact-Us *{max-width:40rem;}
#Contact-Us h3{font-size:1.2rem;}
#Contact-Us h4{font-size:1rem;}
#Contact-Us p{padding:1rem 0;}
#Contact-Us form label{display:block; width:100%; font-size:.9rem; margin-bottom:2rem; font-weight:600; color:rgba(0,0,0,.7);}
#Contact-Us form input, #Contact-Us form textarea,#Contact-Us form select{font-size:1rem; font-weight:400; border:solid #EEE; border-width:0 0 1px 0; padding:.5em 0; display:block; width:100%; outline:0 none; background-color:transparent;}
#Contact-Us form input:focus,#Contact-Us form textarea:focus,#Contact-Us form select:focus{}
#Contact-Us form label:focus-within{color:#749dab;}
#Contact-Us form label:focus-within *{border-color:#749dab;}
#Contact-Us form button{display:block; width:100%; border:0 none; border-radius:2px; background:#CCC; color:#666; font-size:1.5rem; font-weight:400; padding:1rem 2rem; margin:2rem 0 0 0;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#Contact-Us form button:hover{background:#0a426a; color:#FFF;}
}
#Contact-Us form, #Contact-Us div.col-hotline{display:inline-block; margin:0 auto; vertical-align:top;}
#Contact-Us div.col-hotline{width:18rem;}
#Contact-Us div.col-hotline>p{width:100%; padding:0;}
#Contact-Us div.col-hotline>p::before{opacity:.5; padding:0 1em 0 0;}
#Contact-Us div.col-hotline>h4{margin:1.5rem 0 .5rem 0; font-weight:100; font-size:1.5rem;}
#Contact-Us div.col-hotline>h4:first-child{margin-top:.5rem;}
#Contact-Us.section h4{margin:0; padding:0; text-align:left; font-family:inherit; font-size:2.5rem; font-weight:100; line-height:1em;}
#Contact-Us.section form{width:100%;}
#Contact-Us.section form label{}
/*#Contact-Us.section form input#captcha{ float:left; width:calc(100% - 105px); padding:.625em 0; margin-bottom:20px;}
#Contact-Us.section .captcha_image{ float:right;}
#Contact-Us.section form label:after{ content:""; display:table; clear:both}
@media screen and (max-width:768px){
	#Contact-Us.section form input#captcha{ float:none; width:100%; margin-bottom:0;}
	#Contact-Us.section .captcha_image{ float:none;}
}*/

#Contact-Us.section form label.ver_code_area span{ display:block; width:100%;}
#Contact-Us.section form label.ver_code_area input#captcha{ width:calc(100% - 145px); float:right; padding:0.625rem 0; min-height:45px;}
#Contact-Us.section form label.ver_code_area .captcha_image{display:inline-block;}
#Contact-Us.section form label.ver_code_area .captcha_image #captchaImg{display:inline-block;}
#Contact-Us.section form label.ver_code_area .captcha_image .reload_icon{display:inline-block; vertical-align:top; width:35px; height:45px; line-height: 45px; font-size:25px; text-align: center;}
#Contact-Us.section form label.ver_code_area .captcha_image .reload_icon>*{font-size: 25px;}
#Contact-Us.section form label.ver_code_area .captcha_image .reload_icon>a, 
#Contact-Us.section form label.ver_code_area .captcha_image .reload_icon>a:link, 
#Contact-Us.section form label.ver_code_area .captcha_image .reload_icon>a:visited{color:#b1b1b1; text-decoration:none;}
#Contact-Us.section form label.ver_code_area .captcha_image .reload_icon>a:hover{color:#c33b32; text-decoration:none;}

#Contact-Us.section form label *{opacity:1;}
@media screen and (max-width:480px){
	#Contact-Us form label{font-size:1rem;}
	#Contact-Us form input, #Contact-Us form textarea, #Contact-Us form select{font-size:1.5rem; padding:.25em 0;}
}
.section::before, dd{-webkit-transition:all .5s; transition:all .5s;}
.container{max-width:unset;}
.container>.row{max-width:1170px; margin: 0 auto;}
#top-banner{position:relative; max-width:unset; height:45vw; margin:0; display:block; white-space:nowrap; overflow:hidden; font-size:0;}
#top-banner>a.fa{position:absolute; top:calc(50% - .5em); font-size:10rem; padding:0 1rem; color:#FFF; opacity:.5;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#top-banner>a.fa:hover{opacity:1;}
}
#top-banner>a.fa.prev{left:0;}
#top-banner>a.fa.next{right:0;}
#top-banner>.index-slogan{transition:all 1s; width:100%; height:100%; margin:0; display:inline-flex; align-items:center; flex-flow: column nowrap; padding:70px 0 0 0; font-family:'Libre Baskerville', serif; color: #FFF; text-shadow:0px 0px 30px #3a7090;}
html:not([lang=en]) #top-banner>.index-slogan{font-family:'Noto Sans HK','Noto Sans SC','微軟正黑體','Microsoft JHengHei';}
html[lang=tc] #top-banner>.index-slogan>big{font-family:'Noto Serif TC','微軟正黑體','Microsoft JHengHei';}
html[lang=sc] #top-banner>.index-slogan{font-family:'Noto Serif SC','微軟正黑體','Microsoft JHengHei';}
#top-banner>.index-slogan>*{margin:auto auto auto 7rem;}
#top-banner>.index-slogan>big{font-size:2.8rem; margin-bottom:0;}
#top-banner>.index-slogan>p{font-size:1.2rem; margin-bottom:0; margin-top:0; font-family:inherit; padding:.5em 0;}
#top-banner>.index-slogan>small{font-family:inherit; margin-top:0; opacity:.75; font-size:.9rem; font-weight:100;}
#top-banner>.index-slogan:nth-of-type(3){background:url(../img/index-banner.jpg) no-repeat right 80px #000100; background-size:auto 45vw; background-attachment:fixed;}
#top-banner>.index-slogan:nth-of-type(2){background:url(../img/index-banner2.jpg) no-repeat left 0 #000100; background-size:100% auto; background-attachment:fixed;}
#top-banner>.index-slogan:nth-of-type(2)>*{margin-right:7rem; margin-left:auto; text-align:right;}
#top-banner>.index-slogan:nth-of-type(1){background:url(../img/index-banner3.jpg) no-repeat right 80px #000100; background-size:auto 45vw; background-attachment:fixed;}
@media screen and (min-width:1024px){
	#top-banner>.index-slogan>*{min-width:55rem; max-width:60%;}
}
@media screen and (max-width:1024px){
	#top-banner>a.fa{font-size:5rem; top:50%;}
	#top-banner>.index-slogan{padding:5rem 0 0 0;}
	#top-banner>.index-slogan>big{font-size:4.2vw;}
	#top-banner>.index-slogan>p{font-size:1.8vw;}
	#top-banner>.index-slogan>*{margin:auto auto auto 4rem;}
	#top-banner>.index-slogan:nth-of-type(2)>*{margin-right:4rem; padding-left:4rem; margin-left:auto;}
	#top-banner>.index-slogan:nth-of-type(3){background-size:100vw auto; background-position:100% 4rem;}
	#top-banner>.index-slogan:nth-of-type(1){background-size:100vw auto; background-position:100% 4rem;}
	#top-banner>.index-slogan:nth-of-type(2){background-size:100vw auto; background-position:0% 4rem;}
}
@media screen and (max-width:768px) and (orientation:portrait){
	#top-banner{height:50vh;}
	#top-banner>.index-slogan:nth-of-type(3){background-size:100vw auto; background-position:100% 4rem;}
	#top-banner>.index-slogan:nth-of-type(1){background-size:100vw auto; background-position:100% 4rem;}
	#top-banner>.index-slogan:nth-of-type(2){background-size:100vw auto; background-position:0% 4rem;}
}
@media screen and (max-width:480px) and (orientation:portrait){
	#top-banner{height:120vw;}
	#top-banner>.index-slogan:nth-of-type(3){background-size:auto 140vw; background-position:90% 7rem; background-color:#0f233b;}
	#top-banner>.index-slogan:nth-of-type(1){background-size:auto 110vw; background-position:100% 4rem;}
	#top-banner>.index-slogan:nth-of-type(2){background-size:auto 130vw; background-position:8% 0%;}
	#top-banner>.index-slogan>*{padding-right:4rem; white-space:normal;}
	#top-banner>.index-slogan>big{font-size:2rem; margin-top:4rem; word-break:keep-all;}
	html:not([lang=en]) #top-banner>.index-slogan>big{font-size:3rem;}
	html:not([lang=en]) #top-banner>.index-slogan>p{font-size:1.5rem; word-break:keep-all;}
	#top-banner>.index-slogan>p{font-size:1rem; padding:.5em 4rem .5em 0;}
	#top-banner>.index-slogan:nth-of-type(2)>*{padding-right:0;}
	#top-banner>.index-slogan:nth-of-type(1)>*{margin-left:12.5rem;}
}
.section{padding:5rem 3rem; text-align:center; overflow: hidden;}
@media screen and (max-width:768px){
	.section{padding:5rem 2rem;}
}
.section:not(:last-of-type){border-bottom:1px solid #FFFFFF33;}
.section[data-expandable="true"]:not(.expand)::after{content:attr(data-btn-text); display: inline-block; border:1px solid rgba(255, 255, 255, 0.55); padding:.75em 5em; font-size: 1rem; z-index:1; position: relative; opacity:.75; margin-top:1rem;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	.section[data-expandable="true"]:not(.expand):hover::after{opacity:1;}
	.section[data-expandable="true"].expand::after{opacity:0;}
}
.section[data-expandable="true"]:not(.expand) dl{height: 0; opacity: 0;}
.section dl{text-align:left; position: relative;}
.section dl>dt{font-weight:400; opacity: .8; padding:.6rem 1.2rem; transition:all .5s; -webkit-transition: all .5s;}
.section dl>dd ul{padding-left:1.5em;}
.section dl>dd li{padding:.5em 0 0 0; text-indent:-1.375em; left:1.5em; position:relative; list-style-position:inside;}
@media screen and (max-width:768px){
	.section dl>dd li{width:calc(100% - 3em);}
}
.section h4{content:attr(data-header); display:block; font-family:'Libre Baskerville', serif; font-size:1.8rem; text-align: center; padding:0 0 .5em 0; line-height:180%;}
html[lang=tc] .section h4{font-family:'Noto Serif TC','微軟正黑體','Microsoft JHengHei';}
html[lang=sc] .section h4{font-family:'Noto Serif SC','微軟正黑體','Microsoft JHengHei';}
@media screen and (max-width:768px){
	.section h4{padding:0 1.5em .5em 1.5em;}
}
.section::before{content:""; position: absolute; display: block; top:0; bottom:0; left:0; right:0; background:#005275; opacity:.1; z-index:1;}
.section:nth-child(odd)::before{background:rgba(255, 255, 255, 0.25);}
.section:nth-child(even)::before{background:#003853;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	.section:hover::before, .section.expand::before{opacity: .8;}
}
.section.expand dl{display:inline-grid;}
.section>*{position:relative; z-index:2;}
*[data-expandable="true"]:not(.expand){cursor:pointer;}
#About-UOB{height:100vh; display: flex; flex-flow:column nowrap; align-content: center; align-self:center; width:auto; position: fixed; z-index:999;}
#About-UOB::before{display:block; position:fixed; z-index:1; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.75);}
#About-UOB *{z-index:2;}
#About-UOB>a.btn-close{display:inline-block; margin: auto 0 -2.5em auto; padding:.5em 1em; font-size: 1rem; color:#FFF; text-transform: uppercase; opacity: .75; cursor:pointer; z-index:4;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#About-UOB>a.btn-close:hover{opacity: 1;}
}
#About-UOB>a.btn-close::before{content:"X"; display:inline-block; transform:scaleX(1.4); padding:0 .5em;}
#About-UOB>h4{font-size:3rem; font-family:'Libre Baskerville'; margin:0; line-height:1rem; z-index:3;}
html:not([lang=en]) #About-UOB>h4{font-family:'Noto Serif SC';}
#About-UOB ul{display:inline-flex; flex-flow:row wrap; align-content:flex-start; width:100%; max-width:100vw; margin:0 auto auto auto; padding:0;}
#About-UOB ul>li{display:inline-flex; width:20%; align-content:center; margin:0; position: relative; text-align:center; padding:2rem; font-size:.95rem; color:#FFFFFFDD; -webkit-transition:background 1s; transition:background 1s; }
#About-UOB ul>li{transform-origin:center; transform:scale(.998); z-index:1; transition:all .25s;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#About-UOB ul>li:hover{transform:scale(1.1); z-index:2;}
}
#About-UOB ul>li>*{margin:auto;}
#About-UOB ul>li:nth-child(4), #About-UOB ul>li:nth-child(6){width:40%;}
#About-UOB ul>li:nth-child(odd){background:rgba(0, 56, 83, 0.7);}
#About-UOB ul>li:nth-child(even){background:rgba(0, 35, 51, 0.8);}
#About-UOB ul>li:nth-child(4){padding:0;}
#About-UOB ul>li:nth-child(5){margin-left:20%;}
#About-UOB ul>li:nth-child(4){background:none !important;}
#About-UOB ul>li:nth-child(4)>*{width:100%; margin:0 0 -1rem -1rem; transform-origin:top right;transition:transform .5s;-webkit-transition:transform .5s;position: relative;}
#About-UOB ul>li.link{background:rgba(195, 59, 50, 0.8); cursor:pointer;}
#About-UOB ul>li.link:hover{background:#af352d;}
#About-UOB ul>li.link>a{color:#FFF;}
#About-UOB ul>li.link>a>big{font-size:1.6rem; font-family:'Libre Baskerville'; white-space:nowrap; display:inline-block;}
html:not([lang=en]) #About-UOB ul>li.link>a>big{font-family:'Noto Serif SC';}
#About-UOB ul>li:hover{background:#003853; color:#FFFFFF;}
#About-UOB ul>li svg{transform:scale(1.02);}
#About-UOB ul>li svg *{transition:all .5s;}
#About-UOB ul>li svg #Presence text{font-family:Arial; font-size:10px; font-weight:bold; cursor:default;}
html:not([lang=en]) #About-UOB ul>li svg #Presence text{font-family:inherit; font-size:12px;}
#About-UOB ul>li svg #Presence g{opacity:.75;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#About-UOB ul>li svg #Presence g:hover{opacity:1;}
}
@media screen and (max-width:1024px){
	#About-UOB>h4{width:50%; margin-bottom:-2em; line-height:120%; word-break:keep-all; white-space:nowrap;}
	html:not([lang="en"]) #About-UOB>h4{padding-top:1.2em; margin-bottom:-2.2em;}
	#About-UOB ul>li{font-size:.85rem; width:50% !important; order:3;}
	#About-UOB ul>li:nth-child(1){order:1; margin-top:auto;}
	#About-UOB ul>li:nth-child(4){order:2;}
	#About-UOB ul>li:nth-child(5){margin-left:0; margin-bottom:auto;}
	#About-UOB ul>li.link{margin-left:50%;}
	#About-UOB ul>li.link>a>big{line-height:120%; margin-top:.25em; display:block;}
}
@media screen and (max-width:480px){
	#About-UOB>h4, #About-UOB>a.btn-close{position:fixed;}
	#About-UOB>h4{top:10.5rem;}
	#About-UOB ul{margin:17rem auto auto auto;}
	#About-UOB>a.btn-close{top:1rem; right:0; font-size:1.25rem;}
	#About-UOB ul>li{order:2; width:100% !important; padding:1.75rem 2rem; }
	#About-UOB ul>li:nth-child(1){order:2; margin-top:0;}
	#About-UOB ul>li:nth-child(4){order:1; width:85vw !important; position:fixed; top:2rem; right:0;}
	#About-UOB ul>li:nth-child(5){background:rgba(0, 35, 51, 0.8);}
	#About-UOB ul>li:nth-child(6){background:rgba(0, 56, 83, 0.7);}
	#About-UOB ul>li.link{margin-left:auto;}
	#About-UOB ul>li.link>a{font-size:1.25rem;}
	#About-UOB ul>li.link>a>big{display:inline-block;}
}
#value{background:url(../img/bg-value-x.jpg); background-repeat:no-repeat; background-position:right bottom; background-size:100% 100%; background-attachment:scroll; color:#1f0f00;}
#value dl{display:inline-flex; overflow:hidden; min-height:10rem; align-items:center;}
#value dl>dt{text-align:center; white-space:nowrap; margin: auto; padding-right:1.5em; z-index:2; font-size:1.5em; position:relative;}
#value dl>dt:not(.expand)::after{content:"+"; opacity:.5; display:inline-block; position:absolute; background:rgba(156, 106, 21, .4); width:2rem; height:2rem; border-radius:50%; color:#FFF; line-height:2rem; padding:0; margin:0; text-align:center; font-weight:100; font-size:1.5rem; right:.5rem; z-index:1; margin-top:-.5rem;}

#value dl>dt:not(.expand):hover{transform:scale(1.1);}
#value dl>dd:not(:last-child):before{content:""; opacity:.8; display:inline-block; position: absolute; transform:rotate(25deg); transform-origin:center; top:0; bottom:0; right:0; width:1px; background:#b5ada7;}
#value dl>dd{overflow:visible; white-space:nowrap; margin:0 auto; width:100%; padding:3.5em 0 1em 0; position:relative; z-index:1; align-self:stretch;}
#value dl>dd>*{margin-right:2em; white-space:normal; width:20vw; position:absolute;}
html:not([lang="en"]) #value dl>dd>*{width:auto; min-width:12rem; max-width:20rem;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#value dl>dt:not(.expand):hover{opacity:1; font-size:1.5em; cursor:pointer; color:#96897c;}
}
#value dl>dt:not(.expand)+dd{color:rgba(255,255,255,0);}
#value dl>dt.expand{font-size:2em; text-align:left; margin:.7rem 0 0 0; padding:0 0 0 2rem; width:0; overflow:visible; align-self:start;}
#value dl>dt.expand:after{opacity:0;}
#value dl>dt.expand+dd{color:#4e4b48; padding:3.5em 2em 1em 0;}
#value dl>dt.expand+dd>li{position:relative;}
#value dl>dt.expand+dd:before{opacity:1;}
#value dl.expanded>dt:not(.expand){opacity:.5;}
#value dl.expanded>dd:not(:last-child):before{transform:rotate(15deg);}
#value dl.expanded{margin-left:-2rem; width: 100%;}
#value dl.expanded>dd{width:auto;}
@media screen and (max-width:768px){
	#value dl{flex-flow:column; -webkit-flex-flow:column;}
	#value dl.expanded{margin-left:0;}
	#value dl>dd{padding:.5rem 0; white-space:normal;}
	#value dl>dd>*{width:100%;}
	#value dl>dd:not(:last-child):before{width:100%; height:1px; transform:rotate(0deg) !important;}
	#value dl>dt{margin-top:1rem;}
	#value dl>dt.expand{margin:1rem auto auto auto; padding:0; width:auto;}
	#value dl>dt.expand+dd{padding:0 0 1em 0; margin-bottom:1.5rem;}
	#value dl>dd:not(:last-child):before{top:auto;}
	#value dl.expanded>dd{width:auto; min-width:20rem; max-width:80vw; text-align:center;}
	#value dl.expanded>dd li{padding:.5em 0 0 0; left:0; text-align: 0;}
}


/* By Alex */
@media screen and (max-width:560px){
	#value dl { align-items: unset; width:100% }
	#value dl>dt { padding-right:3em; text-align:left; margin:0em}	
	#value dl>dt:not(.expand)::after { margin-top:0rem; right: 1rem;}	
	#value dl>dt.expand {
		margin:1rem auto auto 1.2rem;
	}
	#value dl>dd {
		margin: 0 1rem;
	}
	#value dl.expanded>dd { text-align:left; }
	#value dl.expanded>dd li { margin-left:2rem; }
}

/*By Alex End */


#advantage{background:url(../img/bg-advantage.jpg) no-repeat left 80px; background-size:cover; background-attachment:fixed; background-position:0% 0%;}
#advantage::before{background:rgba(41, 39, 68, 0.5);}
#advantage dl{display:inline-grid; overflow:hidden;}
#advantage dl>*{width:24rem; transform-origin:center; max-width:calc(50vw - 3rem);}
#advantage dl>dt{text-align:center; white-space:nowrap; margin:auto; z-index:2; font-size:1.5em; opacity:1; position:relative;}
#advantage dl>dt::after{content:">"; display:inline-block; transform:scale(.5,1); transform-origin:center; font-weight:100; margin-left:.25em; opacity:.5;}
#advantage dl>*:nth-of-type(1){grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2; left:-1px; top:-1px;}
#advantage dl>*:nth-of-type(2){grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; top:-1px;}
#advantage dl>*:nth-of-type(3){grid-column-start:1; grid-column-end:2; grid-row-start:2; grid-row-end:3; left:-1px;}
#advantage dl>*:nth-of-type(4){grid-column-start:2; grid-column-end:3; grid-row-start:2; grid-row-end:3;}
#advantage dl>dd{overflow:visible; white-space:normal; margin:auto; height:100%; min-height:10rem; padding:1.25em 1em 1.25em 1.5rem; position:relative; z-index: 1; background:rgba(119, 7, 28, 0.75);}
#advantage dl>dd>*{margin:0 1.5em; white-space:normal;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#advantage dl>dt:not(.expand):hover{opacity:1; cursor:pointer;}
}
#advantage dl>dt:not(.expand)+dd{color:rgba(255,255,255,0); transform:rotateY(-180deg);}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#advantage dl>dt:not(.expand):hover+dd{background:rgba(0,0,0,.4);}
}
#advantage dl>dt.expand{opacity:0; transform:rotateY(90deg);}
#advantage dl>dt.expand:after{opacity:0;}
#advantage dl>dt.expand+dd{color:#FFF; background:rgba(132, 86, 17, 0.9); transition-delay:.1s;}
#advantage dl>dt+dd>li{position:relative; left:0; padding:.5em 0;}
#advantage dl>*{transition:all .1s;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#advantage dl>dt:hover, #advantage dl>dt:hover+dd{transition:all .5s;}
}
@media screen and (max-width:640px){
	@media screen and (orientation:portrait){
		#advantage{background-size:300%; background-position:20% 0%; background-attachment:scroll; background-color:#1d1d30;}
	}
	#advantage dl>*{width:40vw; max-width:40vw;}
}
@media screen and (max-width:640px){
	#advantage dl>*{width:80vw; max-width:80vw;}
	#advantage dl>*{left:auto !important;}
	#advantage dl>*:nth-of-type(1){grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2; top:-2px;}
	#advantage dl>*:nth-of-type(2){grid-column-start:1; grid-column-end:2; grid-row-start:2; grid-row-end:3; top:0;}
	#advantage dl>*:nth-of-type(3){grid-column-start:1; grid-column-end:2; grid-row-start:3; grid-row-end:4; top:1px;}
	#advantage dl>*:nth-of-type(4){grid-column-start:1; grid-column-end:2; grid-row-start:4; grid-row-end:5; top:3px;}
}
#step{background:url(../img/bg-step.jpg) no-repeat center 80px; background-size:cover; background-attachment:fixed;}
#step{color:#007792;}
#step::before{background:rgba(255, 255, 255, 0.5);}
#step dl{display:inline-grid; margin: 2rem auto; grid-template-columns:25% 25% 25% 25%;}
#step dl>*{text-align:center; align-self:center;}
#step dl>*:nth-of-type(1){grid-area:1/1;}
#step dl>*:nth-of-type(2){grid-area:1/2;}
#step dl>*:nth-of-type(3){grid-area:1/3;}
#step dl>*:nth-of-type(4){grid-area:1/4;}
#step dt{z-index:2; font-size:1.5em; font-weight:600; padding:0; opacity:1; position:relative;}
#step dt::before{display:block; text-align:center; font-size:7rem; font-family:FontAwesome,FontAwesome5,FontAwesome5B;}
#step dt:nth-of-type(1)::before{content:"\f086";}
#step dt:nth-of-type(2)::before{content:"\f5c3"; font-weight:600;}
#step dt:nth-of-type(3)::before{content:"\f474"; font-weight:600;}
#step dt:nth-of-type(4)::before{content:"\f1de";}
@media screen and (any-hover:none){
	#step dt.expand+dd{opacity:1;}
	#step dt.expand::before{opacity:.1;}
}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#step dt:hover+dd{opacity:1;}
	#step dt:hover::before{opacity:.05;}
}
#step dt:not(:last-of-type)::after{content:"\f107"; color:#c32f26;font-family:FontAwesome; font-size: 3rem; position: absolute; width: 1em; height: 1em; line-height: 1em; transform-origin: center; z-index:2;}
#step dt::after{transform:rotate(-90deg); right:-.5em; top:calc(50% - .5em);}
@media screen and (max-width:768px){
	#step dd{padding:0 .5rem 3.5rem .5rem;}
}
@media screen and (max-width:640px){
	#step dl{grid-template-columns:100%;}
	#step dl>*:nth-of-type(1){grid-area:1/1;}
	#step dl>*:nth-of-type(2){grid-area:2/1;}
	#step dl>*:nth-of-type(3){grid-area:3/1;}
	#step dl>*:nth-of-type(4){grid-area:4/1;}
	#step dt::after{transform:rotate(0deg); display:block; position:relative !important; width:auto; margin:auto; text-align:center; top:auto; right:auto;}
}
/*
#step dd:nth-of-type(2)::after{transform:rotate(0deg); bottom:-.5em; left:calc(50% - .5em);}
#step dd:nth-of-type(3)::after{transform:rotate(180deg); top:-.5em; left:calc(50% - .5em);}
#step dd:nth-of-type(4)::after{transform:rotate(90deg); left:-.5em; top:calc(50% - .5em);}
#step dd:nth-of-type(1), #step dd:nth-of-type(2){border-bottom:1px solid #546e7b;}
#step dd:nth-of-type(2), #step dd:nth-of-type(4){border-left:1px solid #546e7b;}
*/
#step dd{z-index:1; line-height: 150%; opacity:0; padding:0 1.5rem 3.5rem 1.5rem; font-weight:100; position: relative;}
#step dd>strong{font-weight:600;}
html:not([lang=en]) #step dd>strong{font-weight:400; white-space:nowrap;}
#research{background:url(../img/bg-research.jpg) no-repeat right 70px; background-size:cover; background-attachment:fixed; color:#2a3335;}
#research::before{background:rhba(240,240,240,.5);}
#research dl{width:60rem;}
#research dd>div{overflow:visible; display:inline-block; margin: 0 auto; white-space:nowrap; text-align:right; float: right;}
#research dd>div>figure{margin:1rem auto; height:12.5rem; display:inline-block; max-width:9rem; vertical-align: top; overflow:visible; position: relative;}
#research dd>li{float:left; padding-right:3rem;}
#research dd:nth-of-type(1)>li{width:calc(100% - 27rem);}
#research dd:nth-of-type(2)>li{width:calc(100% - 19rem);}
#research dl>dd:nth-of-type(1)>div{width:25rem;}
#research dl>dd:nth-of-type(2)>div{width:17rem;}
#research dl>dd:nth-of-type(1)>div>figure{width:33%;}
#research dl>dd:nth-of-type(2)>div>figure{width:50%;}
#research dd>div>figure:last-child{min-width:9rem;}
#research dd>div>figure>img{width:9rem; height:100%; display:block; position: absolute; box-shadow:-15px 0px 10px 0px rgba(0,0,0,.25);}
#research dd>div>figure:after{content:attr(title); display:block; font-size:.75rem; padding:.3em 0 0 0; position:absolute; top:100%; white-space:normal; text-align:left;}
#research dl{display:inline-grid; grid-template-columns:50% 50%; margin-top:2em;}
#research dt{font-size:1.5em; grid-row:1/2; text-align: center; border-bottom:1px solid #9cb2c0; white-space:nowrap;}
#research dd{grid-row:2/3; grid-column:1/3; padding:1rem 2rem;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#research dt:not(.expand):hover{cursor:pointer; background:#33333310; opacity: 1;}
}
#research dt:not(.expand)+dd{opacity:0;}
#research dt.expand+dd{opacity:1;}
#research dt.expand{background:#2c5d7b; color:#FFF; opacity:1;}
@media screen and (max-width:60rem){
	#research dl{width:90vw;}
	#research dt{white-space:normal; display:flex; align-items:center;}
}
@media screen and (max-width:640px){
	#research{padding:5rem 0; background-size:100% 100%; background-position:50% 50%;}
	#research dl{width:90vw;}
	#research dt{white-space:normal;}
	#research dd{text-align:center;}
	#research dd>div{float:none; margin:0 auto 2rem auto;}
	#research dd>li{width:100% !important; text-align:left;}
}
@media screen and (max-width:480px){
	#research dl{grid-template-columns:auto;}
}
#products{background:url(../img/bg-products.jpg) no-repeat left 0px; background-size:cover; background-attachment:fixed;}
#products::before{background:rgba(0, 33, 47, 0.5)}
#products dl{margin:0 auto; overflow: hidden; width:50rem;}
#products dl>*{grid-column:1/1;}
#products:not(.expand) dl>*{padding:0; height:0; opacity:0; overflow:hidden;}
#products dl>p{padding:2em 0 0 0; font-size:.9rem;}
#products dl>p>a{color:#EEE; text-decoration:underline;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#products dl>p>a:hover{color:#FFF;}
}
#products dt{padding:1em; }
#products dt{position:relative; border-bottom:1px solid rgba(255,255,255,.4);}
#products dt::after{content:""; display:block; position: absolute; width:.5em; height:.5em; border-top:1px solid #FFF; border-right:1px solid #FFF; transform-origin: 75% 25%; right:1.6em; top:1.6em; transform: rotate(135deg);}
#products dd{height:0; opacity:0; overflow:hidden; padding:0 1em; position:relative;}
#products dt.expand::after{transform:rotate(-45deg);}
#products dt.expand{border-bottom:0 none; background:#c32f26; opacity: 1;}
#products dt.expand+dd{height:auto; opacity:1; border-bottom:1px solid rgba(255,255,255,.4); padding:.5em 1em 1.5em 1em;}
#products dd>dl{width:100%; position: relative; padding-bottom:5rem;}
#products dd>dl>*{padding:1rem;}
#products dd>dl>dd{padding:1rem;}
#products dd>dl>dd, #products dd>dl>dt:last-of-type{border-bottom:0 none !important;}
#products dd>dl>dt{grid-row:auto; grid-column:1/2; font-weight:100; font-size:1.2rem; text-align:left; border-bottom:1px solid rgba(0,0,0,.25); }
#products dd>dl>dt:after{content:none;}
#products dd>dl>dt:not(.expand){opacity:.5;}
#products dd>dl>dt.expand{text-align:right; background:none; padding:1rem 0 calc(1rem - 5px) 2rem; border-bottom:5px solid #FFF !important;}
#products dd>dl>dd{grid-row:1/4; grid-column:2/3; height:100%;}
#products dd>dl>dd:nth-of-type(1){align-self:start;}
#products dd>dl>dd:nth-of-type(2){align-self:center;}
#products dd>dl>dd:nth-of-type(3){align-self:end;}
#products dd p[data-title]{text-transform:capitalize; text-indent:0; padding:1rem; opacity:.75; border-bottom:1px solid rgba(255,255,255,.15); display:table; width:100%; transition:all .25s;}
#products dd p[data-title]:first-of-type{margin-top:1rem;}
#products dd p[data-title]:last-of-type{margin-bottom:5rem; border-bottom:0 none;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#products dd p[data-title]:hover{opacity:1;}
}
#products dd p[data-title]:before{content:attr(data-title); display:table-cell; width:12rem; font-size:1.1em; font-weight:100;}
#products .note{display:block; font-size:.9em;}
#products .note>a{color:#FFF; border-bottom:1px solid #FFF; opacity: .8;}
@media screen and (any-hover:hover), (-ms-high-contrast: none), (-ms-high-contrast: active){
	#products .note>a:hover{opacity:1;}
}
@media screen and (max-width:768px){
	@media screen and (orientation:portrait){
		#products{background-size:cover; background-position:top left; background-attachment:scroll;}
		#products::before{background:rgb(26, 17, 12); opacity:.5;}
	}
	#products dl{width:80vw;}
	#products dd p[data-title]{padding:1rem 0;}
}
@media screen and (max-width:640px){
	#products dd>dl>dd{grid-row:auto; grid-column:1/2; height:0; padding:0;}
}
#products .note>a>span.fa, #products .note>a>span.fa:before{display:inline;}
#customize dl{margin:0 auto; position:static; padding-bottom:6rem;}
#customize dl>*{padding:1em;}
#customize dl>*:not(:last-of-type){border-bottom:1px solid rgba(255, 255, 255, 0.35);}
#customize dl>dt{grid-column:1/2;}
#customize dl>dd{grid-column:2/3;}
#customize dl>p{grid-column:1/3;}
#fund dl{margin:0 auto; position:static; padding-bottom:6rem;}
#fund dl>*{padding:1rem;}
#fund dl>*:not(:last-of-type){border-bottom:1px solid rgba(255, 255, 255, 0.35);}
#fund dl>dt{grid-column:1/2;}
#fund dl>dd{grid-column:2/3; padding-top:1.1rem;}
#fund dl>p{grid-column:1/3; text-align:center;}
#credit{background:url(../img/bg-credit.jpg) no-repeat left bottom; background-size:cover; background-attachment:fixed; color:#FFF;}
#credit::before{background:rgba(34, 32, 62, 0.5);}
#credit dl{margin:0 auto;}
#credit dl>*{padding:1rem;}
#credit dl>*:not(:last-of-type){border-bottom:1px solid rgba(255, 255, 255, 0.35);}
#credit dl>p{grid-column:1/3; text-align:center;}
#credit dl>dt{grid-column:1/2;}
#credit:not(.expand) dl>*{padding:0; height:0; opacity:0; overflow:hidden;}
#credit dl>dd{grid-column:2/3;}
@media screen and (max-width:768px){
	#credit{background-size:auto 100%; background-position:top right; background-attachment:scroll; background-color:rgb(4, 51, 82);}
	#credit::before{background:rgb(4, 51, 82); opacity:.75;}
}
.section div[id^="marquee"]{font-size:0; background: #FFF; text-align: center; padding:0 !important; position:absolute; bottom:0; left:0; right:0; white-space: nowrap; overflow: hidden;}
.section div[id^="marquee"]>span{background:#FFF; display: inline-block; width:7rem; height:3rem; box-sizing:border-box; background:no-repeat center; background-size:contain; margin:1rem;}
html[data-region="SG"] *[data-region]:not([data-region="SG"]),
html[data-region="HK"] *[data-region]:not([data-region="HK"])
{display:none;}