/* Reset ----------------------------------------------------------------------------------------------------*/ * { margin:0; padding:0; border:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} body { font-size:16px; background:#ffffff; font-weight:normal; color:#393939; font-family: Arial, "Microsoft JhengHei", "微軟正黑體", Verdana, PMingLiU, sans-serif; } html[lang="zh-cn"] body { font-family: Arial, "Microsoft YaHei", "微软雅黑", Verdana, PMingLiU, sans-serif; } html, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; } table { width:100%; border-collapse:collapse; border-spacing:0; } table, th, td { border:0; margin: 0; padding: 0;} sup { display: inline-block; } img { border: 0 none; vertical-align: top; width:auto;} /*ul { list-style-type:none;} CMS issue */ li { list-style-type:inherit; } button { cursor: pointer; } input{font-family: inherit} input[type="button"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } ::-webkit-input-placeholder{color: #999;opacity: 1} :-ms-input-placeholder{color: #999;opacity: 1} ::-ms-input-placeholder{color: #999;opacity: 1} ::placeholder{color: #999;opacity: 1} /* for Firefox */ a, a:link { text-decoration: none; color:#30B4D9;} a:hover {color:#005880;} .fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .fixed { display: block; min-height: 1%; } _html .fixed { height: 1%; } .clear { display: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; } .fl, .fr { display: inline; float: left; } .fr { float: right; } .hidden { display: none; } .dHidden { display: none; } .tHidden { display: block; } .mHidden { display: block; } .mVisible { display: none !important; } .printOnly { display: none; } .txtLeft { text-align: left; } .txtRight { text-align: right; } /* Grid ----------------------------------------------------------------------------------------------------*/ .wrap { max-width:1280px; position:relative; margin:0 auto; padding:0 20px; width:100%; } .flexCol { display: flex; flex-direction: column; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; margin-right: 2.7118644%; } .col1 { width: 5.8474576%; } .col2 { width: 14.4067796%; } .col3 { width: 22.9661016%; } .col4 { width: 31.5254236%; } .col5 { width: 40.0847456%; } .col6 { width: 48.6440676%; } .col7 { width: 57.2033896%; } .col8 { width: 65.7627116%; } .col9 { width: 74.3220336%; } .col10 { width: 82.8813556%; } .col11 { width: 91.4406776%; } .col12 { width: 99.9999996%; margin-right: 0; } .last { margin-right: 0; } .push0 {margin-left:0%;} .push1 {margin-left:8.559322%;} .push2 {margin-left:17.118644%;} .push3 {margin-left:25.677966%;} .push4 {margin-left:34.237288%;} .push5 {margin-left:42.79661%;} .push6 {margin-left:51.355932%;} .push7 {margin-left:59.915254%;} .push8 {margin-left:68.474576%;} .push9 {margin-left:77.033898%;} .push10 {margin-left:85.59322%;} .push11 {margin-left:94.152542%;} .pull0 {margin-right:0%;} .pull1 {margin-right:8.559322%;} .pull2 {margin-right:17.118644%;} .pull3 {margin-right:25.677966%;} .pull4 {margin-right:34.237288%;} .pull5 {margin-right:42.79661%;} .pull6 {margin-right:51.355932%;} .pull7 {margin-right:59.915254%;} .pull8 {margin-right:68.474576%;} .pull9 {margin-right:77.033898%;} .pull10 {margin-right:85.59322%;} .pull11 {margin-right:94.152542%;} .col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img { width: 100%; height: auto; display: block; } /* Common ----------------------------------------------------------------------------------------------------*/ .skipButton { position: absolute; left: -9999px; } /* #header { width:100%;background:#FFF;font-size:0;font-family: 'Lato', "Microsoft JhengHei", "微軟正黑體", Verdana, PMingLiU, sans-serif;position: relative;} */ #header { width:100%;background:#FFF;font-size:0;position: relative;} #header:after{content:'';clear:both;display:block;} #header .logo {display:inline-block;vertical-align: middle;margin:0;} #header .logo img { height:90px; } /* #header .logo2 { margin-left: 30px; } */ #header #navigation{display:inline-block;vertical-align: middle;width:auto;text-align: center;line-height: 50px;clear: both; width: 100%;border-top: 1px solid #A7D6F6; } #header #navigation ul:after{content:'';clear:both;display:block;} #header #navigation ul {display: inline-block;vertical-align: middle;} #header #navigation ul li{float:left;list-style: none;position: relative;} #header #navigation ul li > a{padding: 0 16px;font-size:16px;display: block;color:#000;-webkit-transition:0.1s linear background-color;-o-transition:0.1s linear background-color;transition:0.1s linear background-color;position: relative;} #header #navigation ul li > ul{position: absolute;background-color: #ffffff;left: 0;z-index: 10;min-width: 260px;top:100%;display:none;padding-right:0;} #header #navigation ul li > ul li{margin:0;width:100%;text-align: left;line-height: 1;} #header #navigation ul li > ul li:hover { background-color: #3AB1DB; } #header #navigation ul li > ul li > a{padding:15px 15px;} #header #navigation ul li > ul li:hover > a { color: #ffffff; } #header #navigation ul li:hover > ul {display:block;} #header a:hover {text-decoration: none;} #header .lang{display:inline-block;vertical-align: middle;margin-left:10px;} #header .lang a{display: inline-block;vertical-align: middle;font-size: 16px;color: #000;margin: 0 5px;border: 1px solid rgba(0,0,0,0.2);border-radius: 20px;width: 35px;height: 35px;text-align: center;line-height: 35px;} #header .topNav { font-size: 16px; margin-top: 20px; float: right; } #header .topNav span.split { display: inline-block; width: 1px; height: 18px; background-color: #cccccc; position: relative; top: 2px; cursor: default; } #header .topNav ul.buttonMenu { margin: 0 15px; display: inline-block; } #header .topNav ul.buttonMenu li { text-align: right; display: inline-block; } #header .topNav ul.buttonMenu li span.accountEmail { font-size: 15px; line-height: 1; display: block; text-align: center; position: relative; margin-right: 15px; } #header .topNav ul li > a.btnMenu { font-family: Arial, "Microsoft JhengHei", "微軟正黑體", Verdana, PMingLiU, sans-serif; border: 1px solid #008463; color: #008463; font-size: 16px; border-radius: 30px; display: inline-block; padding: 10px 0; min-width: 145px; height: auto; text-align: center; line-height: 1; margin: 0 4px; top: 5px; } #header .topNav ul li > a.btnMenu:hover { background-color: #008463; color: #ffffff; } #header .topNav ul li > a.btnMenu.btn2 { border: 1px solid #036884; color: #036884; } #header .topNav ul li > a.btnMenu.btn2:hover { background-color: #036884; color: #ffffff; } #header .topNav ul li input.btnMenu { border: 1px solid #008463; background-color: #ffffff; cursor: pointer; color: #008463; font-size: 16px; border-radius: 30px; display: inline-block; padding: 10px 0; min-width: 145px; height: auto; text-align: center; line-height: 1; margin: 0 4px; top: 5px; } #header .topNav ul li input.btnMenu:hover { background-color: #008463; color: #ffffff; } #header .topNav ul li input.btnMenu.btn2 { border: 1px solid #036884; color: #036884; } #header .topNav ul li input.btnMenu.btn2:hover { background-color: #036884; color: #ffffff; } #header .topNav ul.langMenu { display: inline-block; color: #333333; } #header .topNav ul.langMenu > li { display: inline-block; } #header .topNav ul.langMenu > li > a { color: #333333; } #header .topNav ul.langMenu li:nth-child(1) a { padding: 0 7px 0 20px; } #header .topNav ul.langMenu li:nth-child(2) a { padding: 0 20px 0 7px; } #header .topNav ul.sizeMenu { display: inline-block; margin: 0 15px; } #header .topNav ul.sizeMenu > li { display: inline-block; } #header .topNav ul.sizeMenu > li > a > img.fontsizeImg { vertical-align: middle; margin-bottom: 5px; width: 22px; height: 13px; } html[lang="zh-cn"] #header .topNav ul li > a.btnMenu { font-family: Arial, "Microsoft YaHei", "微软雅黑", Verdana, PMingLiU, sans-serif; } .mobileMenuBtn {display:none;position:absolute; width:25px; height:25px;text-indent: 100px;right: 20px;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} .mobileMenuBtn span,.mobileMenuBtn span:before,.mobileMenuBtn span:after{background:#333;position: absolute;left:0;width:100%;height:5px;-webkit-transition: 0.2s linear all;-o-transition: 0.2s linear all;transition: 0.2s linear all;} .mobileMenuBtn span{top:0px;} .mobileMenuBtn span:before{content:'';top:10px;} .mobileMenuBtn span:after{content:'';top:20px;} .mobileMenuBtn.on span{background:none;} .mobileMenuBtn.on span:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .mobileMenuBtn.on span:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);top: 10px;} .mobileMenuMask { display:none; position:fixed; background-color:black; opacity:0.7; width:100%; height:100%; z-index:100; top:0; left:0;} a.mmCloseBtn {display:block; position:absolute; top:15px; right:15px; width:21px; height:21px; background:url(/images/closeBtn.svg) no-repeat; cursor:pointer;z-index:120;} #footer{padding:30px 0;} #footer .wrap{max-width:none;} /* footer { font-family: 'Lato', "Microsoft JhengHei", "微軟正黑體", Verdana, PMingLiU, sans-serif; position: relative; background-color: #fff; height: 70px; line-height: 70px; } */ footer { position: relative; background-color: #fff; height: 70px; line-height: 70px; } footer ul.footerMenu { float: left; line-height: normal;} footer ul.footerMenu li { display: inline-block; } footer ul.footerMenu li:first-child a { border-right: 1px solid #cccccc; padding-left: 10px; padding-right: 10px; } footer ul.footerMenu li:not(:last-child) a { border-right: 1px solid #cccccc; padding-left: 10px; padding-right: 10px; } footer ul.footerMenu li a { padding: 0 10px; color: #000; line-height: 2; } footer .footerLogo { float: right; } footer .footerLogo img { vertical-align: middle; } footer .footerIcon { display: block; margin: 25px 0 0; } footer .footerIcon.ocl { margin: 5px 0 0; } footer .footerIcon .footerIconHolder { display: inline-block; margin: 0 15px; vertical-align: middle; } footer .footerIcon .footerIconHolder a { vertical-align: middle; } footer .footerIcon .footerIconHolder a img { vertical-align: middle; } footer .footerCopyright { font-size: 12px; line-height: 1.5; padding-left: 10px; padding-right: 10px; color: #000; } footer .footerOclServices { font-size: 12px; line-height: 1.5; padding-left: 10px; padding-right: 10px; padding-top: 8px; color: #000; } footer .footerOclServices a { padding-right: 10px; } footer a:hover {text-decoration: none;} /* footer .footerOclServices a { color: #000; padding-right: 10px; } */ .photoFancyContainer { padding:5px; } .photoFancyContainer img { width:auto; height:auto; max-height:600px; max-width:900px; } /*content style*/ .content-container{background:#FFF;padding-top:30px;padding-bottom:30px;} .error{color:#F00 !important;border-color:#F00 !important} .breadcrumb{margin-bottom:30px;font-size:0;} .breadcrumb a{color:#333;font-size:14px;} .breadcrumb a:after{content:'>';display:inline-block;margin:0 5px;} .breadcrumb a:last-child:after{display:none;} .breadcrumb a:last-child,.breadcrumb a.on{color:#ff0000;} .breadcrumb a:hover {text-decoration: none;} .pagination{font-size:0;text-align:center;margin-bottom:30px;} .pagination .btn{width:30px;height:30px;padding:0;background:#ff0000;position: relative;margin:0 5px;min-width: 0px;} .pagination .btn:hover{background:#b00808;} .pagination .btn:before,.pagination .btn:after{content:'';border:6px transparent solid;background:#FFF;position: absolute;} .pagination input{width:30px;height:30px;text-align: center;font-size:14px;border:1px solid #f00;display:inline-block;vertical-align: middle;margin:0 5px;} .pagination p{display:inline-block;vertical-align: middle;height:30px;font-size:14px;line-height: 30px;margin:0 5px;margin-right: 10px;} .pagination p:before{content:'/';display:inline-block;vertical-align:top;margin-right:10px;} .pagination .btn.btn-first:before{height: 12px;width: 2px;border: none;top: 9px;left: 10px;} .pagination .btn.btn-first:after{border-width: 6px;border-right-color: #FFF;background: none;top: 9px;left: 7px;} .pagination .btn.btn-prev:before{display:none;} .pagination .btn.btn-prev:after{border-width: 6px;border-right-color: #FFF;background: none;top: 9px;left: 7px;} .pagination .btn.btn-next:before{display:none;} .pagination .btn.btn-next:after{border-width: 6px;border-left-color: #FFF;background: none;top: 9px;right: 7px;} .pagination .btn.btn-last:before{height: 12px;width: 2px;border: none;top: 9px;right: 10px;} .pagination .btn.btn-last:after{border-width: 6px;border-left-color: #FFF;background: none;top: 9px;right: 7px;} .pagination .btn.btn-next{background:#ff0000} .pagination .btn.btn-next:hover{background:#b00808;} .form h2{font-size:24px;font-weight: bold;color:#F00;padding-bottom:20px;margin-bottom:10px;position: relative;} .form h2:before{content:'';width:100%;height: 1px;background:#F00;position: absolute;bottom:0;left:0;} .form h3{font-size:16px;font-weight: bold;margin-bottom:10px;} .form h4{font-size:16px;font-weight: bold;margin-bottom:10px;padding-bottom:3px;position: relative;color:#F00;text-decoration: underline;} .form p{margin-bottom:20px;line-height:130%;} .form .mandatory-mark{position: relative;color: #F00;line-height: 0;height: 1px;display: inline-block;vertical-align: middle;top: -3px;margin-right: 2px;} .form .remark{font-size:14px;color:#888888;} .form p + h3, .form p + h4{margin-top:30px;} .form label{font-size:16px;} .form input[type="text"]{width:100%;height:35px;padding:10px 15px;font-size:14px;border:1px solid #000;display: inline-block;vertical-align: middle;} .form label + input[type="text"], .form label + select, .form label + .row, .form label ~ .select2-container{margin-top:5px;} .form .item{display:inline-block;vertical-align: middle;margin-right:20px;height: 35px;} .form .item:before{content:'';height:100%;display:inline-block;vertical-align: middle;} .form .item input, .form .item label{vertical-align: middle;} .form .item input + label{margin-left:5px;} .form .select2-container .select2-selection--single{height:35px;border-radius: 0;border-color: #000;} .form .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:35px;} .form .select2-container--default .select2-selection--single .select2-selection__arrow{height:35px;} .form .select2-container--default .select2-selection--single .select2-selection__arrow b{border-width: 8px 8px 0 8px;margin-left: -14px;margin-top: -5px;} .form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-width: 0px 8px 8px 8px;} .form .row{display:table;width:100%;table-layout: fixed;margin:0 -20px;margin-bottom:40px;} .form .row .col{display:table-cell;width:50%;padding:0 20px;} .form .row .col .row{width:calc(100% + 20px);margin-bottom: 0;} .form .captcha{margin:40px 0;text-align: center;} .form .btn-holder{margin:40px 0;text-align: center;} .btn{display:inline-block;vertical-align: middle;padding:15px 20px;text-align: center;font-size:16px;min-width: 150px;} .btn + .btn{margin-left:10px;} .checkbox-style{display: inline-block;vertical-align: top;width: 20px;height: 20px;border: 1px solid #000;margin-right: 5px;position: relative;top: 1px; cursor: pointer;} .checkbox-style input[type="checkbox"]{display: block;width: 20px;height: 20px;position: absolute;top: 0;left: 0;opacity: 0;cursor: pointer;} .checkbox-style.checked{background:url(/images/checkbox-checked.png) no-repeat center center;background-size:20px auto;} .checkbox-style ~ label { cursor: pointer; } .radio-style{display: inline-block;vertical-align: middle;width: 20px;height: 20px;border: 1px solid #000;margin-right: 5px;position: relative;top: -2px;border-radius: 20px;cursor: pointer; vertical-align: top;} .radio-style input[type="radio"]{display: block;width: 20px;height: 20px;position: absolute;top: 0;left: 0;opacity: 0;cursor: pointer;} .radio-style.checked:before{content:'';position: absolute;width:10px;height:10px;background:#000;top:50%;left:50%;-webkit-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);border-radius: 20px;} .radio-style ~ label { cursor: pointer; } /* Index */ #container, #mainSlider { position:relative; width: auto;} #mainSlider a{ position:relative; width:100%; height:400px; display:block; overflow:hidden;text-align:center; background-position:center; } #mainSlider a img{ position:absolute; float:none; width:auto; height:auto; max-height:100%; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} .rowBox { position:relative; width:100%; min-height:200px; margin-bottom:1px; } .row1 {background-color:#ddd;} .row2 {background-color:#eee;} .row3 {background-color:#ddd;} .colContainer { padding: 10px 0;} /* .contentArea (for CMS content) ----------------------------------------------------------------------------------------------------*/ .contentArea h2 {padding:20px 0 10px; } .contentArea h3 {padding:10px 0;} .contentArea p {padding-bottom:20px; line-height:130%;font-weight: normal;} .contentArea b{font-weight: 400;} .contentArea img {width:auto; float:left; margin:0 15px 5px 0; max-width: 100%; } .contentArea img.imgRight { float:right; margin:0 0 5px 15px; } .contentArea ul { clear:both; padding:0 0 10px 18px;} .contentArea ul li{ list-style-type:disc; list-style-position:outside; padding:0 0 10px 0; /* font-weight: 300; */ } .contentArea .genTable td, .contentArea .genTable th {padding:20px; background-color:white; text-align:left; vertical-align:top; } .contentArea .genTable th { background-color:#ccc; } .contentArea .genTable tr:nth-child(odd) td{background-color:#eee; } .contentArea .btn-holder{margin:40px 0;} .contentArea .relinkedCard { font-weight: bold; color: #008463 } .mobileMenu{ display:none; } #container { background-color: #3AB1DB; background-image: url(/images/bg.jpg); background-repeat: no-repeat; background-size: 100%; background-position: center top; display: block; } h2.pageTitle { padding: 35px 0 30px; text-align: center; color: #ffffff; font-size: 28px; font-weight: bold; } section.mainSection { position: relative; padding-bottom: 20px; min-height: 75vh; } section.mainSection .wrap { margin-bottom: 20px; } section.mainSection .wrap .contentArea { background-color: #ffffff; min-height: 60vh; border-radius: 3px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.05); } .center { text-align: center; } .noPadding { padding: 0 !important; } .noMargin { margin: 0 !important; } .announcement { display: none; background-color: #FFFBCB; border-top: 1px solid #f0c36d; } .announcement #announcementWrap { } .announcement #announcementWrap ul { display: block; padding: 8px 14px 8px 14px; text-align: center; } .announcement #announcementWrap ul li { display: block; /* line-height: 1.3; */ } /* .announcement #announcementWrap ul li strong { font-size: 1.125em; } */ .announcement .announcementCloseBtn { z-index: 2; display: block; position: absolute; width: 20px; height: 20px; top: 8px; right: 8px; } .announcement .announcementCloseBtn:before { content: '✖'; color: #393939; } .announcement a.announcementCloseBtn:hover { text-decoration: none; } .homeWrap h1 { color: #ffffff; font-size: 62px; padding-top: 120px; padding-bottom: 20px; } .homeWrap h2 { color: #ffffff; font-size: 28px; font-weight: normal; color: #1b368a; padding-bottom: 40px; } .homeWrap a.button { display: inline-block; text-align: center; min-width: 145px; width: auto; font-size: 18px; cursor: pointer; background-color: transparent; border-radius: 30px; border: 1px solid #ffffff; line-height: 1.1; padding: 12px 20px; color: #ffffff; text-decoration: none; } .homeWrap a.button:hover { background-color: #ffffff; color: #333333; text-decoration: none; } .homeWrap .homeBlockRow { padding: 0 120px; } .homeWrap .homeBlockRow .homeBlock { float: left; padding: 20px; position: relative; } .homeWrap .homeBlockRow .homeBlock { margin-right: 5%; } .homeWrap .homeBlockRow .homeBlock:last-child { margin-right: 0; } .homeWrap .homeBlockRow .homeBlock .homeBlockContent { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 90%; } .homeWrap .homeBlockRow .homeBlock p { color: #ffffff; text-align: center; margin-bottom: 15px; line-height: 1.8; } .homeWrap .homeBlockRow .homeBlock.bg1 { background-color: #694f8f; } .homeWrap .homeBlockRow .homeBlock.bg2 { background-color: #006a85; } .homeWrap .homeBlockRow .homeBlock.bg3 { background-color: #008564; } .homeWrap .homeBlockRow .homeBlock.s1 { width: 60%; min-height: 300px; margin-left: 20%; } .homeWrap .homeBlockRow .homeBlock.s2 { width: 47.5%; min-height: 300px; } .homeWrap .homeBlockRow .homeBlock.s3 { width: 30%; min-height: 380px; } div.space5 { width: 100%; height: 5px; display: inline-block; } div.space10 { width: 100%; height: 10px; display: inline-block; } div.space20 { width: 100%; height: 20px; display: inline-block; } div.space30 { width: 100%; height: 30px; display: inline-block; } div.space40 { width: 100%; height: 40px; display: inline-block; } div.space50 { width: 100%; height: 50px; display: inline-block; } div.space75 { width: 100%; height: 75px; display: inline-block; } div.space100 { width: 100%; height: 100px; display: inline-block; } div.space150 { width: 100%; height: 150px; display: inline-block; } div.spaceWidth10{ width: 10px; height: auto; display: inline-block; } .formWrap { width: 620px; margin: 0 auto; padding: 30px 0; font-size: 16px; } .formWrap p { font-size: 16px; line-height: 1.5; } .formWrap p.greybox { padding: 10px; background-color: #e5e5e5; margin-bottom: 30px; } .formWrap ol { margin-left: 15px; } .formWrap ul { margin-left: 15px; } .formWrap ol li { margin-bottom: 15px; } .formWrap ul li { margin-bottom: 15px; } .formWrap h3.underline { padding-bottom: 8px; margin-bottom: 20px; border-bottom: 1px solid #cccccc; } .formWrap label { position: relative; font-size: 16px; margin-bottom: 8px; display: inline-block; } /* button style */ .formWrap a.button { font-size: 16px; display: inline-block; text-align: center; min-width: 145px; cursor: pointer; background-color: #ffffff; border-radius: 30px; border: 1px solid #515151; line-height: 1.1; padding: 12px 25px; color: #393939; text-decoration: none; } .formWrap a.button:hover { background-color: #515151; color: #ffffff; text-decoration: none; } .formWrap a.button:disabled { opacity: 0.75; cursor: not-allowed; } .formWrap a.button:disabled:hover { background-color: #ffffff; color: #393939; text-decoration: none; } .formWrap a.button.buttonS { min-width: 100px; font-size: 14px; line-height: 1; padding: 8px 15px; } .formWrap a.button.buttonXS { min-width: 80px; font-size: 13px; line-height: 1; padding: 7px 15px; } .formWrap a.btnSubmit { border: 1px solid #307FA6; color: #256984; text-decoration: none; } .formWrap a.btnSubmit:hover { background-color: #307FA6; color: #ffffff; text-decoration: none; } .formWrap a.btnSubmit:disabled:hover { background-color: #ffffff; color: #256984; text-decoration: none; } .formWrap a.btnNext { border: 1px solid #307FA6; color: #256984; text-decoration: none; } .formWrap a.btnNext:hover { background-color: #307FA6; color: #ffffff; text-decoration: none; } .formWrap a.btnNext:disabled:hover { background-color: #ffffff; color: #256984; text-decoration: none; } .formWrap input[type="button"].button { font-size: 16px; display: inline-block; text-align: center; min-width: 145px; cursor: pointer; background-color: #ffffff; border-radius: 30px; border: 1px solid #515151; line-height: 1.1; padding: 12px 25px; color: #393939; } .formWrap input[type="button"].button:hover { background-color: #515151; color: #ffffff; } .formWrap input[type="button"].button:disabled { opacity: 0.75; cursor: not-allowed; } .formWrap input[type="button"].button:disabled:hover { background-color: #ffffff; color: #393939; } .formWrap input[type="button"].button.hidden { display: none; } .formWrap input[type="button"].button.buttonS { min-width: 100px; font-size: 14px; line-height: 1; padding: 8px 15px; } .formWrap input[type="button"].button.buttonXS { min-width: 80px; font-size: 13px; line-height: 1; padding: 7px 15px; } .formWrap input[type="button"].btnSubmit { border: 1px solid #307FA6; color: #256984; } .formWrap input[type="button"].btnSubmit:hover { background-color: #307FA6; color: #ffffff; } .formWrap input[type="button"].btnSubmit:disabled:hover { background-color: #ffffff; color: #256984; } .formWrap input[type="button"].btnNext { border: 1px solid #307FA6; color: #256984; } .formWrap input[type="button"].btnNext:hover { background-color: #307FA6; color: #ffffff; } .formWrap input[type="button"].btnNext:disabled:hover { background-color: #ffffff; color: #256984; } .formWrap input[type="button"].btnRemoveCardEntry { width: 20px; height: 20px; line-height: 1; font-weight: bold; border: 0; } .formWrap input[type="submit"] { font-size: 16px; display: inline-block; text-align: center; min-width: 145px; cursor: pointer; background-color: #ffffff; border-radius: 30px; border: 1px solid #307FA6; line-height: 1.1; padding: 12px 25px; color: #256984; } .formWrap input[type="submit"]:hover { background-color: #307FA6; color: #ffffff; } .formWrap input[type="submit"]:disabled:hover { background-color: #ffffff; color: #256984; } .formWrap .formControl { margin-bottom: 20px; position: relative; } .formWrap .formControl.right { text-align: right; } .formWrap .formControl > label { position: relative; top: -2px; font-size: 16px; margin-right: 15px; margin-bottom: 0; min-width: 115px; display: inline-block; width: 285px; vertical-align: middle; } .formWrap .formControl > label.valignTop { vertical-align: top; } .formWrap .formControl > label.fullwidth { width: calc(100% - 35px); margin-right: 0; margin-bottom: 0; } .formWrap .formControl .inputWrap { width: 275px; display: inline-block; text-align: left; vertical-align: middle; } .formWrap .formControl .inputWrap label { margin-right: 5px; cursor: pointer; max-width: 240px; } .formWrap .formControl select { padding: 5px; border: 1px solid #D0D0D0; width: 100%; height: 33px; } /* font-size: 16px; */ .formWrap .formControl .formSelect { width: 300px; margin-right: 20px; float: left; } .formWrap .formControl .formSelectInput { width: 300px; float: left; } .formWrap .formControl .formSelectInput input { width: 100%; } .formWrap .formControl .faqSelect { width: 400px; } .formWrap .formControl .faqSelectInput { width: auto; } .formWrap .formControl input[type="text"] { width: 275px; height: 33px; border: 1px solid #D0D0D0; padding: 5px; max-width: 100%; } .formWrap .formControl input[type="number"] { width: 100%; height: 33px; border: 1px solid #D0D0D0; padding: 5px; max-width: 100%; } .formWrap .formControl input[type="email"] { width: 275px; height: 33px; border: 1px solid #D0D0D0; padding: 5px; max-width: 100%; } .formWrap .formControl input[type="password"] { width: 275px; height: 33px; border: 1px solid #D0D0D0; padding: 5px; } .formWrap .formControl input[type="button"] { font-size: 18px; } .formWrap .formControl input[type="submit"] { font-size: 18px; } .formWrap .formControl input.inputWithCheckDigi { width: 198px; } .formWrap .formControl input.inputWithCheckDigi.hkid { width: 160px; } .formWrap .formControl input.inputWithCheckDigiTxt { width: 198px; } .formWrap .formControl input.inputWithCheckDigiTxt.hkid { width: 160px; } .formWrap .formControl input.lastDigi { width: 30px; text-align: center; } .formWrap .formControl input.dateOfBirthInput { width: 30px; text-align: center; } .formWrap .formControl input.dateOfBirthInput.dateOfBirthYear { width: 70px; } .formWrap .formControl a.button { font-size: 18px; } .formWrap .formControl .dateOfBirthWrap select.days { width: 70px; } .formWrap .formControl .dateOfBirthWrap select.months { width: 70px; } .formWrap .formControl .dateOfBirthWrap select.years { width: 86px; } .formWrap .formControl span.digiWrap { margin: 0 5px; } .formWrap .formControl span.split { margin: 0 5px; } .formWrap .formControl .googleCaptcha { display: inline-block; } .formWrap .formRemark p { font-size: 14px; } /* text-align: justify; */ .formWrap .formRemark p.txt-red { color: red; } .formWrap .cardRemark { color: #808080; } .formWrap .btnHelp { position: absolute; text-indent: -9999px; top: 8px; right: -105%; } .formWrap .btnHelp:before { content: "?"; color: #393939; text-indent: 0; width: 20px; height: 20px; text-align: center; line-height: 22px; border: 1px solid #515151; display: block; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin: -10px -10px 0 0; font-weight: bold; } .formWrap .btnHelp:hover:before { background-color: #515151; color: #ffffff; } .formWrap .btnHelp span { width: 0; height: 0; position: absolute; text-indent: -9999px; overflow: hidden; visibility: hidden; } .formWrap .txtAlert { font-size: 14px; } .formWrap .txtAlert:before { content: "!"; color: #FFFFFF; text-indent: 0; width: 14px; height: 14px; text-align: center; line-height: 16px; border: 1px solid #FF0000; display: inline-block; border-radius: 50%; font-weight: bold; background-color: #FF0000; } .formWrap .txtAlert span { width: 0; height: 0; position: absolute; text-indent: -9999px; overflow: hidden; visibility: hidden; } .formWrap #identity { margin-bottom: 30px; } .formWrap #identity .formControl { margin-bottom: 10px; } .formWrap #malfunRefNumberWrap { margin-bottom: 30px; } .formWrap #malfunRelinkWrap .formControl { margin-bottom: 10px; } .formWrap #malfunRelinkWrap .formRemark { margin-top: 20px; } .formWrap p.txtOr { padding-bottom: 10px; } .formControl.formControlBtn { margin-bottom: 10px; margin-bottom: 10px; } label.hidden { display: none !important; } div.errorMsgWrap { margin-bottom: 10px; } div#errorsMsg { display: none; background-color: #F5F5F5; } div#previewErrorsMsg { display: none; background-color: #F5F5F5; } div#errorsMsg2 { background-color: #F5F5F5; } div#formMsg { background-color: #F5F5F5; } .formWrap .msgWrap ul { margin: 0; padding: 0; text-align: left; } .formWrap .msgWrap ul li { margin: 0; padding: 8px 10px 8px 0; font-size: 14px; font-weight: normal; margin-left: 30px; color: red; } .formWrap .msgWrap ul li:last-child { margin-bottom: 0; } .formWrap ul.parsley-errors-list { margin: 0; padding: 0; text-align: left; } .formWrap ul.parsley-errors-list li { margin: 0; padding: 8px 10px 8px 0; font-size: 14px; font-weight: normal; margin-left: 30px; color: red; } .formWrap ul.parsley-errors-list li:last-child { margin-bottom: 0; } div#previewErrorsMsg ul { margin: 0; padding: 0; text-align: left; } div#previewErrorsMsg ul li { margin: 0; padding: 8px 10px 8px 0; font-size: 14px; font-weight: normal; margin-left: 30px; color: red; } div#previewErrorsMsg ul li:last-child { margin-bottom: 0; } .contentWrap { width: 80%; min-width: 620px; margin: 0 auto; padding: 30px 0 20px; } .contentWrap h3.underline { padding-bottom: 8px; margin-bottom: 20px; border-bottom: 1px solid #cccccc; } .contentWrap p { font-size: 16px; line-height: 1.5; } .contentWrap p.noPadding { padding: 0 !important; } /* button style */ .contentWrap a.button { font-size: 18px; display: inline-block; text-align: center; min-width: 145px; cursor: pointer; background-color: #ffffff; border-radius: 30px; border: 1px solid #515151; line-height: 1.1; padding: 12px 25px; color: #393939; text-decoration: none; } .contentWrap a.button:hover { background-color: #515151; color: #ffffff; text-decoration: none; } .contentWrap a.button:disabled { opacity: 0.75; cursor: not-allowed; } .contentWrap a.button:disabled:hover { background-color: #ffffff; color: #393939; text-decoration: none; } .contentWrap a.button.buttonS { min-width: 100px; font-size: 14px; line-height: 1; padding: 8px 15px; } .contentWrap a.button.buttonXS { min-width: 80px; font-size: 13px; line-height: 1; padding: 7px 15px; } .contentWrap a.button.small { font-size: 16px; height: 40px; line-height: 35px; } .contentWrap a.btnSubmit { border: 1px solid #307FA6; color: #256984; text-decoration: none; } .contentWrap a.btnSubmit:hover { background-color: #307FA6; color: #ffffff; text-decoration: none; } .contentWrap a.btnSubmit:disabled:hover { background-color: #ffffff; color: #256984; text-decoration: none; } .contentWrap a.btnNext { border: 1px solid #307FA6; color: #256984; text-decoration: none; } .contentWrap a.btnNext:hover { background-color: #307FA6; color: #ffffff; text-decoration: none; } .contentWrap a.btnNext:disabled:hover { background-color: #ffffff; color: #256984; text-decoration: none; } .contentWrap input[type="button"].button { font-size: 18px; display: inline-block; text-align: center; min-width: 145px; cursor: pointer; background-color: #ffffff; border-radius: 30px; border: 1px solid #515151; line-height: 1.1; padding: 12px 25px; color: #393939; } .contentWrap input[type="button"].button:hover { background-color: #515151; color: #ffffff; } .contentWrap input[type="button"].button:disabled { opacity: 0.75; cursor: not-allowed; } .contentWrap input[type="button"].button:disabled:hover { background-color: #ffffff; color: #393939; } .contentWrap input[type="button"].button.hidden { display: none; } .contentWrap input[type="button"].button.buttonS { min-width: 100px; font-size: 14px; line-height: 1; padding: 8px 15px; } .contentWrap input[type="button"].button.buttonXS { min-width: 80px; font-size: 13px; line-height: 1; padding: 7px 15px; } .contentWrap input[type="button"].btnSubmit { border: 1px solid #307FA6; color: #256984; } .contentWrap input[type="button"].btnSubmit:hover { background-color: #307FA6; color: #ffffff; } .contentWrap input[type="button"].btnSubmit:disabled:hover { background-color: #ffffff; color: #256984; } .contentWrap input[type="button"].btnNext { border: 1px solid #307FA6; color: #256984; } .contentWrap input[type="button"].btnNext:hover { background-color: #307FA6; color: #ffffff; } .contentWrap input[type="button"].btnNext:disabled:hover { background-color: #ffffff; color: #256984; } .contentWrap select { padding: 10px; border: 1px solid #cccccc; font-size: 15px; margin-right: 10px; } .contentWrap .txtAlert { font-size: 14px; } .contentWrap .txtAlert:before { content: "!"; color: #FFFFFF; text-indent: 0; width: 14px; height: 14px; text-align: center; line-height: 16px; border: 1px solid #FF0000; display: inline-block; border-radius: 50%; font-weight: bold; background-color: #FF0000; } .contentWrap .txtAlert span { width: 0; height: 0; position: absolute; text-indent: -9999px; overflow: hidden; visibility: hidden; } span.highlight { color: #2E2D8A; font-weight: bold; } span.highlight.total { font-size: 18px; } .table { width: 100%; margin-bottom: 15px; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.09); } .table.sTable { min-width: 420px; width: auto; max-width: 100%; } .table.sTable tr td { min-width: 170px; } .table.sTable tr td:first-child { width: 240px; } .table tr th { padding: 8px; border: 1px solid #CFCFCF; vertical-align: middle; font-size: 16px; background-color: #CBE6FC; color: #1b368a; } .table tr td { padding: 8px; border: 1px solid #E0E0E0; vertical-align: top; font-size: 16px; } .table.table-no-border { box-shadow: none; } .table.table-no-border tr th { border: 0; } .table.table-no-border tr td { border: 0; } .table.table-no-border tr td:first-child { padding-left: 0; } .table tr td.middle { vertical-align: middle; } .table tr.total td { background-color: #F4F4F4; } div.line { display: inline-block; width: 100%; height: 1px !important; padding: 0 !important; border: 0 !important; margin: 15px 0; background-color: #d3d3d3; } #cardListTable input[type="button"].button { margin-top: 5px; margin-bottom: 5px; } #relinkCategoryTable .desktop { display: inline; } #relinkCategoryTable .mobile { display: none; } h3#categoryTitle { margin-bottom: 0; } .tab { overflow: hidden; position: relative; z-index: 2; } .tab button { background-color: #ffffff; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; } .tab button:first-child { border-left: 1px solid #ccc; } .tab button:last-child { border-right: 1px solid #ccc; } .tab button:hover { background-color: #dddddd; } .tab button.active { background-color: #ffffff; border-bottom: 1px solid #fff; } .tab button.active:disabled { background-color: #ffffff; border-bottom: 1px solid #fff; color: #393939; } .tab button:focus { background-color: #dddddd; } .tab button.active:focus { background-color: #ffffff; } .tabcontent { display: none; padding: 40px 12px; border: 1px solid #ccc; position: relative; top: -1px; } .tabcontent.loaded { padding: 12px; } span.remark { font-size: 0.8rem; color: red; } .close { float: right; font-size: 20px; font-weight: bold; line-height: 18px; color: #000000; opacity: 0.2; filter: alpha(opacity=20); } .close:hover { color: #000000; text-decoration: none; opacity: 0.4; filter: alpha(opacity=40); cursor: pointer; } .alert { padding: 8px 14px 8px 14px; margin-bottom: 18px; background-color: #fcf8e3; border: 1px solid #f0c36d; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #393939; } .alert p { padding: 0px; } .alert-heading { color: inherit; } .alert .close { position: relative; top: -2px; right: -21px; line-height: 18px; } .alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; } .alert-danger, .alert-error { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; } .alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #1b368a; } .alert-block { padding-top: 14px; padding-bottom: 14px; } .alert-block > p, .alert-block > ul { margin-bottom: 0; } .alert-block p + p { margin-top: 5px; } .faqBox span.accordionTitle { color: #036884;; margin-left: 40px; position: relative; margin-top: 15px; display: block; cursor: pointer; } .faqBox span.accordionTitle:before { position: absolute; left: -40px; content: ""; border-radius: 25px; background-image: url(/images/icon_accordion_plus.png); width: 25px; height: 25px; top: -2px; } .faqBox span.accordionTitle.active:before { background-image: url(/images/icon_accordion_minus.png); } .faqBox div.accordionContent { padding-top: 20px; margin-left: 40px; display: block; font-size: 16px; line-height: 1.5; display: none } .faqBox div.accordionContent p { font-size: 16px; line-height: 1.5; } .faqBox div.accordionContent .contentSliderContainer { background-color: #ffffff !important; } .faqBox div.accordionContent .contentSliderContainer .contentSlider { width: 100%; } .faqBox div.accordionContent .contentSliderContainer .contentSlider .contentSliderWrap > span { display: block; margin-bottom: 15px; font-size: 1.15em; } .faqBox div.accordionContent table th { padding: 8px; border: 1px solid #CFCFCF; vertical-align: top; font-size: 16px; background-color: #CBE6FC; color: #1b368a; } .faqBox div.accordionContent table td { padding: 8px; border: 1px solid #CFCFCF; vertical-align: top; font-size: 16px; } .faqCategory { padding-bottom: 30px; } .faqOlNote { padding-left: 20px; } span.highlight { color: #1b368a; font-weight: bold; } .menuActive { font-weight: bold; } .previewWrap { display: none; line-height: 1.5; } .previewTable { width: 100%; margin-bottom: 0px; } .previewTable tr th { text-align: left; } .previewTable tr td:first-child { width: 55%; font-weight: bold; } .previewTable tr td { vertical-align: top; line-height: 1.5; padding: 5px 0; } .previewLostCardTable2 { margin-top: 15px; } .infoBoxWrap { width: 800px; } .infoBoxWrap img { float: none; display: block; margin: 0 auto; max-width: 90%; } .fancybox-content { padding: 40px 25px; } .enquiryTable { box-shadow: none; } .enquiryTable .enquirySummary { width: 50%; border:1px solid #cccccc; border-width: 0 1px 0 0; padding: 0 20px 0 0; } .enquiryTable .enquirySummary .formControl > label { width: auto; } .enquiryTable .enquiryDetail { border: none; padding: 0 0 0 20px; } .loading { position: absolute; width: 100%; height: 100%; background-color: #ffffff; z-index: 2; left: 0; top: 0; background-image: url(/images/ajax-loader.gif); background-repeat: no-repeat; background-position: center; } input.btnEditIcon { background-image: url(/images/icon_edit.png); background-color: transparent; background-repeat: no-repeat; background-position: 0px -1px; border: none; cursor: pointer; height: 16px; padding-left: 16px; vertical-align: middle; margin: 0 0 0 5px; overflow: hidden; text-indent: -9999px; } /* adjust table width */ .subsidySummaryTable .month { width: 11%; } .expenseSummaryTable .month { width: 11%; } .subsidySummaryTable .calculation { width: 12%; } .transactionTable .dateTime, .lateTransactionTable .dateTime { width: 30%; } .transactionTable .pto, .lateTransactionTable .pto { width: 40%; } .transactionTable .amount, .lateTransactionTable .amount { width: 20%; } .fareProductRegTable .date { width: 17%; } .fareProductRegTable .pto { width: 28%; } .fareProductRegTable .amount { width: 9%; } .fareProductRegTable .result { width: 12%; } .fareProductRegTable .rejectReason { width: 19%; } .fareProductRegTable .remark { width: 15%; } .cardListTable .cardInfo { width: 35%; } .cardListTable .cardInfo.middle { text-align: center; } .cardListTable .cardInfo div:not(:last-child) { padding: 0 0 6px 0; } .cardListTable .cardInfo .cardImg { margin: 0 2px 0 0; float: none; width: auto; } .cardListTable .action { width: 65%; } .cardListTable .action.middle { text-align: center; } .cardListTable small.note { font-weight: normal; } .deregCardListTable .cardInfo { width: 75%; } .deregCardListTable .cardInfo.middle { text-align: center; } .deregCardListTable .cardInfo div:not(:last-child) { padding: 0 0 6px 0; } .deregCardListTable .cardInfo .cardImg { margin: 0 2px 0 0; float: none; width: auto; } .deregCardListTable .action { width: 25%; } .deregCardListTable .action.middle { text-align: center; } .deregCardListTable small.note { font-weight: normal; } .whatsnewTable .date { width: 20%; white-space: nowrap; } .whatsnewTable .news { width: 80%; } .transferResultTable .dateTime { width: 16%; } .transferResultTable .channel { width: 11%; } .transferResultTable .octopusNum { width: 12%; } .transferResultTable .relinkType { width: 14%; } .transferResultTable .result { width: 9.5%; } .transferResultTable .date { width: 11.5%; } .transferResultTable .rejectReason { width: 14%; } .previewLostCardTable2 .oldOctopus { width: 50%; } .previewLostCardTable2 .newOctopus { width: 50%; } table.tablesaw thead th { text-align: center; } .tablesaw-stack.table tr td { padding: 0px; } .tablesaw-stack.table tr td .tablesaw-cell-label { font-weight: bold; border: 1px solid #CFCFCF; vertical-align: middle; background-color: #CBE6FC; color: #1b368a; } .tablesaw-stack.table tr td .tablesaw-cell-label { padding: 8px; } .tablesaw-stack.table tr td .tablesaw-cell-content { padding: 8px; } .tablesaw-stack.table tr:not(:last-child) { margin-bottom: 20px; } /*----------------------------------------------------------------- For Tablet -----------------------------------------------------------------*/ @media screen and (max-width: 1024px) { .wrap { max-width:768px; } .Tcol1, .Tcol2, .Tcol3, .Tcol4, .Tcol5, .Tcol6, .Tcol7, .Tcol8, .Tcol9, .Tcol10, .Tcol11, .Tcol12 { float: left; margin-right:2.7118644%; } .Tcol1 { width: 5.8474576%; } .Tcol2 { width: 14.4067796%; } .Tcol3 { width: 22.9661016%; } .Tcol4 { width: 31.5254236%; } .Tcol5 { width: 40.0847456%; } .Tcol6 { width: 48.6440676%; } .Tcol7 { width: 57.2033896%; } .Tcol8 { width: 65.7627116%; } .Tcol9 { width: 74.3220336%; } .Tcol10 { width: 82.8813556%; } .Tcol11 { width: 91.4406776%; } .Tcol12 { width: 99.9999996%; margin-right: 0; } .Tpush0 {margin-left:0%;} .Tpush1 {margin-left:8.559322%;} .Tpush2 {margin-left:17.118644%;} .Tpush3 {margin-left:25.677966%;} .Tpush4 {margin-left:34.237288%;} .Tpush5 {margin-left:42.79661%;} .Tpush6 {margin-left:51.355932%;} .Tpush7 {margin-left:59.915254%;} .Tpush8 {margin-left:68.474576%;} .Tpush9 {margin-left:77.033898%;} .Tpush10 {margin-left:85.59322%;} .Tpush11 {margin-left:94.152542%;} .Tpull0 {margin-right:0%;} .Tpull1 {margin-right:8.559322%;} .Tpull2 {margin-right:17.118644%;} .Tpull3 {margin-right:25.677966%;} .Tpull4 {margin-right:34.237288%;} .Tpull5 {margin-right:42.79661%;} .Tpull6 {margin-right:51.355932%;} .Tpull7 {margin-right:59.915254%;} .Tpull8 {margin-right:68.474576%;} .Tpull9 {margin-right:77.033898%;} .Tpull10 {margin-right:85.59322%;} .Tpull11 {margin-right:94.152542%;} .Tlast { margin-right: 0; } .Tcol1 img, .Tcol2 img, .Tcol3 img, .Tcol4 img, .Tcol5 img, .Tcol6 img, .Tcol7 img, .Tcol8 img, .Tcol9 img, .Tcol10 img, .Tcol11 img, .Tcol12 img { width: 100%; height: auto; display: block; } /* Common*/ .dHidden { display: block; } .tHidden { display: none; } .mHidden { display: block; } .mVisible { display: none !important; } .photoFancyContainer img { max-height:600px; max-width:600px; } #container { background-size: cover; } /*body { min-width:760px; }*/ .homeWrap h1 { padding-top: 60px; padding-bottom: 20px; } #header .logo img { height: 70px; } /* #header .logo2 { margin-left: 15px; } */ #header #navigation{position: absolute;top:100%;left:0;width:100%;z-index: 10;background: #ffffff;text-align: left;display:none;line-height: 1; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1); } #header #navigation ul{width:100%;padding-right:0;} #header #navigation ul li{float:none;} #header #navigation ul li > a{color:#333333;padding: 15px 20px !important;} #header #navigation ul li input{color:#333333;padding: 15px 20px !important;} #header #navigation ul li > a:before{content:'';position: absolute;width:15px;height:15px;border:1px solid #333333;border-top:none;border-left:none;right:20px;top:50%;margin-top:-7.5px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) all;-o-transition: 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) all;transition: 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) all;} #header #navigation ul li > a:only-child:before{display:none;} #header #navigation ul li > ul{position: relative;top: 0;background: none;display:none;} #header #navigation ul li > ul li > a{padding:10px 15px;padding-left:30px;background-color: #f5f5f5;} #header #navigation ul li:hover > ul{display:none;} #header #navigation ul li.on > a:before{-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);margin-top: -12px;} #header #navigation span.split { display: none; } #header .lang {margin-left: 15px;margin-top: 20px;margin-bottom: 30px;} #header .lang a{color:#FFF;border-color:#FFF;} .mobileMenuBtn {display:block;} #header #navigation > ul > li:first-child { border-top: 1px solid #ddd; } #header #navigation ul li { border-bottom: 1px solid #ddd; } #header .topNav { display: none; } #header #navigation .topNav { float: none; margin-top: 0; display: block; } #header #navigation .topNav ul.buttonMenu { margin: 0; } #header #navigation .topNav ul li { display: block; width: 100%; text-align: left; } #header #navigation .topNav ul li a.btnMenu { text-align: left; } #header #navigation .topNav ul li > a.btnMenu { border: 0; color: inherit; border-radius: 0; min-width: unset; height: unset; margin: 0; top: 0; } #header #navigation .topNav ul li > a.btnMenu:hover { background-color: transparent; } #header #navigation .topNav ul li > a.btnMenu.btn2 { width: 100%; border: 0; color: inherit; border-radius: 0; min-width: unset; height: unset; margin: 0; top: 0; display: inline-block; } #header #navigation .topNav ul li > a.btnMenu.btn2:hover { background-color: transparent; color: inherit; } #header #navigation .topNav ul li > a.btnMenu.btn2::before { display: none; } #header #navigation .topNav ul li input.btnMenu { text-align: left; } #header #navigation .topNav ul li input.btnMenu { border: 0; color: inherit; border-radius: 0; min-width: unset; height: unset; margin: 0; top: 0; } #header #navigation .topNav ul li input.btnMenu.btn2 { width: 100%; border: 0; color: inherit; border-radius: 0; min-width: unset; height: unset; margin: 0; top: 0; display: inline-block; } #header #navigation .topNav ul li input.btnMenu.btn2:hover { background-color: transparent; color: inherit; } #header #navigation .topNav ul li input.btnMenu.btn2::before { display: none; } #header #navigation .topNav ul.sizeMenu { display: none; } #header #navigation .topNav ul.buttonMenu li { text-align: left; } #header #navigation .topNav ul.buttonMenu li span.accountEmail { text-align: left; top: 0; padding: 15px 20px; color: #787878; } #header #navigation .topNav ul.langMenu { width: auto; float: right; } #header #navigation .topNav ul.langMenu li { display: inline-block; border-top: 0 !important; border-bottom: 0 !important; width: auto; } #header #navigation .topNav ul.buttonMenu li { border-bottom: 0; } /* #header .topNav ul li > a.btnMenu.btn2:hover { color: #ffffff !important; } */ /* #header .topNav ul li > input.btnMenu:hover { color: #ffffff !important; } */ .menuActive { font-weight: normal; } /* Index */ #mainSlider a { height:300px; } .controls .prevBtn, .controls .nextBtn { bottom:90px;} .homeWrap .homeBlockRow { padding: 0; } .homeWrap .homeBlockRow .homeBlock { margin-right: 2%; } .homeWrap .homeBlockRow .homeBlock p { font-size: 0.9rem; } .homeWrap .homeBlockRow .homeBlock a.button { font-size: 1.0rem; } .homeWrap .homeBlockRow .homeBlock.s1 { width: 59%; margin-left: 20%; } .homeWrap .homeBlockRow .homeBlock.s2 { width: 49%; } .homeWrap .homeBlockRow .homeBlock.s3 { width: 32%; } /* enquiry */ .enquiryTable, .enquiryTable th, .enquiryTable tbody, .enquiryTable td, .enquiryTable tr { display: block; width: auto !important; height: auto !important; } .enquiryTable .enquirySummary { border-width: 0 0 1px 0; padding: 0 0 20px 0; } .enquiryTable .enquirySummary .formControl > label { width: 285px; } .enquiryTable .enquiryDetail { padding: 20px 0 0 0; } } /*----------------------------------------------------------------- For Mobile -----------------------------------------------------------------*/ @media screen and (max-width: 767px) { /* Grid ----------------------------------------------------------------------------------------------------*/ .wrap { min-width:320px; padding:0 15px; } .Mcol1, .Mcol2, .Mcol3, .Mcol4, .Mcol5, .Mcol6, .Mcol7, .Mcol8, .Mcol9, .Mcol10, .Mcol11, .Mcol12 { float: left; margin-right:2.7118644%; } .Mcol1 { width: 5.8474576%; } .Mcol2 { width: 14.4067796%; } .Mcol3 { width: 22.9661016%; } .Mcol4 { width: 31.5254236%; } .Mcol5 { width: 40.0847456%; } .Mcol6 { width: 48.6440676%; } .Mcol7 { width: 57.2033896%; } .Mcol8 { width: 65.7627116%; } .Mcol9 { width: 74.3220336%; } .Mcol10 { width: 82.8813556%; } .Mcol11 { width: 91.4406776%; } .Mcol12 { width: 100%; margin-right: 0; } .Mlast { margin-right: 0; } .Mpush0 {margin-left:0%;} .Mpush1 {margin-left:8.559322%;} .Mpush2 {margin-left:17.118644%;} .Mpush3 {margin-left:25.677966%;} .Mpush4 {margin-left:34.237288%;} .Mpush5 {margin-left:42.79661%;} .Mpush6 {margin-left:51.355932%;} .Mpush7 {margin-left:59.915254%;} .Mpush8 {margin-left:68.474576%;} .Mpush9 {margin-left:77.033898%;} .Mpush10 {margin-left:85.59322%;} .Mpush11 {margin-left:94.152542%;} .Mpull0 {margin-right:0%;} .Mpull1 {margin-right:8.559322%;} .Mpull2 {margin-right:17.118644%;} .Mpull3 {margin-right:25.677966%;} .Mpull4 {margin-right:34.237288%;} .Mpull5 {margin-right:42.79661%;} .Mpull6 {margin-right:51.355932%;} .Mpull7 {margin-right:59.915254%;} .Mpull8 {margin-right:68.474576%;} .Mpull9 {margin-right:77.033898%;} .Mpull10 {margin-right:85.59322%;} .Mpull11 {margin-right:94.152542%;} .Mcol1 img, .Mcol2 img, .Mcol3 img, .Mcol4 img, .Mcol5 img, .Mcol6 img, .Mcol7 img, .Mcol8 img, .Mcol9 img, .Mcol10 img, .Mcol11 img, .Mcol12 img { width: 100%; height: auto; display: block; } /* Common ----------------------------------------------------------------------------------------------------*/ body {min-width:320px;} .table tr th { padding: 6px; } .table tr td { padding: 6px; } .tablesaw-stack.table tr td .tablesaw-cell-label { padding: 6px; } .tablesaw-stack.table tr td .tablesaw-cell-content { padding: 6px; } .mobileMenuBtn {display:block;} .mainMenu {display:none;} .photoFancyContainer { min-width:auto; min-height:auto;} .dHidden { display: block; } .tHidden { display: block; } .mHidden { display: none; } .mVisible { display: block !important; } .Mspace20 { margin-top: 20px; } .form .row{margin:0px;} .form .row .col{display:inline-block;width:100%;padding:0px;margin-bottom:20px;} .form .row .col .row{width: 100%;margin-left:0;margin-right:0;} .form .row .col .row .col{margin-bottom:10px;} .form .row .col .row .col:last-child{margin-bottom:0;} .table { width: 100%; } /* .contentArea (for CMS content) ----------------------------------------------------------------------------------------------------*/ .contentArea img {width:100%; } div.space20 { height: 10px; } div.space30 { height: 10px; } /* index */ #mainSlider a { height:auto; min-height:200px;} #mainSlider a > img{ position:relative; width:100%; height:auto; max-width:100%; max-height:100%; left:0; top:0; -webkit-transform:none; -ms-transform:none; transform:none; } #header .logo img { height: 50px; } #header #navigation > ul > li:first-child { border-top: 1px solid #ddd; } #header #navigation ul li { border-bottom: 1px solid #ddd; } .homeWrap h1 { font-size: 40px; padding-top: 50px; } .homeWrap h2 { font-size: 22px; } .homeWrap .homeBlockRow .homeBlock { margin-right: 0; margin-bottom: 20px; } .homeWrap .homeBlockRow .homeBlock p { font-size: 1.1rem; } .homeWrap .homeBlockRow .homeBlock a.button { font-size: 1.2rem; } .homeWrap .homeBlockRow .homeBlock.s1 { width: 100%; min-height: 300px; margin-left: 0; } .homeWrap .homeBlockRow .homeBlock.s2 { width: 100%; min-height: 300px; } .homeWrap .homeBlockRow .homeBlock.s3 { width: 100%; min-height: 300px; } h2.pageTitle { padding: 30px 0 25px; font-size: 24px; } .formWrap { width: 95%; min-width: 260px; padding: 15px; } .formWrap .formControl.right { text-align: left; } .formWrap .formControl label { margin-bottom: 5px; display: inline-block; } .formWrap .formControl .inputWrap { width: 100%; } .formWrap .formControl input[type="email"] { width: 100%; } .formWrap .formControl input[type="text"] { width: 100%; } .formWrap .formControl input[type="password"] { width: 100%; } .formWrap .formControl input[type="button"] { margin-top: 5px; margin-bottom: 5px; min-width: 125px; white-space: normal; } /* .formWrap .formControl input[type="button"].btnSubmit { white-space: normal; } .formWrap .formControl input[type="button"].btnNext { white-space: normal; } */ .formWrap .formControl .formSelect { width: 100%; margin-bottom: 5px; } .formWrap .formControl .formSelectInput { width: 100%; } .formWrap .formControl input.inputWithCheckDigi { width: 74%; } .formWrap .formControl input.inputWithCheckDigiTxt { width: 74%; } .formWrap .formControl input.lastDigi { width: 10%; } .formWrap .formControl input.dateOfBirthInput { width: 40px; } .formWrap .formControl a.button { margin-top: 5px; margin-bottom: 5px; min-width: 125px; } .formWrap input[type="button"].button.buttonS { min-width: 100px; font-size: 13px; line-height: 1; padding: 8px 15px; } .formWrap input[type="button"].button.buttonXS { min-width: 80px; font-size: 12px; line-height: 1; padding: 7px 15px; } .formWrap a.button.buttonS { min-width: 100px; font-size: 13px; line-height: 1; padding: 8px 15px; } .formWrap a.button.buttonXS { min-width: 80px; font-size: 12px; line-height: 1; padding: 7px 15px; } .formWrap a.button { font-size: 13px; margin-top: 5px; margin-bottom: 5px; } .formWrap .btnHelp { right: unset; margin-left: 5px; } .formWrap .txtAlert { right: unset; } .contentWrap { width: 95%; min-width: 260px; padding: 15px; } .contentWrap a.button { margin-top: 5px; margin-bottom: 5px; min-width: 125px; } .contentWrap input[type="button"] { margin-top: 5px; margin-bottom: 5px; min-width: 125px; white-space: normal; } .contentWrap .txtAlert { right: unset; } .lostCardWrap .lostCardRow { display: inline-block; border-bottom: 1px solid #dddddd; margin-bottom: 15px; } .lostCardWrap .hidden { display: none; } .table.sTable { width: 100%; min-width: unset; } .tabcontent { top: 0; } .tab { margin-bottom: 5px; } .tab button:first-child { border-left: 0; } .tab button:last-child { border-right: 0; } .tab button { border: 1px solid #ffffff; width: 50%; font-size: 16px; } .tab button.active { border: 1px solid #ccc } div.footer { text-align: center; padding-bottom: 15px; } footer ul.footerMenu { float: none; line-height: normal;} footer .footerLogo { float: none; } footer .footerIcon .footerIconHolder { width: 40%; } footer .footerIcon .footerIconHolder img { max-width: 100%; } .infoBoxWrap { width: 100%; } #cardListTable tr td { display: block; width: 100%; } #cardListTable tr td:first-child { border-bottom: 0; padding-bottom: 0; padding-top: 15px; } #cardListTable tr td:last-child { border-top: 0; padding-bottom: 15px; padding-top: 0; } #cardListTable input[type="button"].button.buttonS { min-width: 240px; } .formWrap .formControl .faqSelectInput input[type="button"].button.buttonXS { width: auto; } #relinkCategoryTable, #relinkCategoryTable th, #relinkCategoryTable tbody, #relinkCategoryTable td, #relinkCategoryTable tr { display: block; width: auto !important; height: auto !important; } #relinkCategoryTable .desktop { display: none; } #relinkCategoryTable .mobile { display: inline; } } /* @media screen and (max-width: 359px) { */ @media screen and (max-width: 478px) { body { font-size: 14px; } .table tr th { padding: 4px; font-size: 14px; } .table tr td { padding: 4px; font-size: 14px; } .tablesaw-stack.table tr td .tablesaw-cell-label { padding: 4px; } .tablesaw-stack.table tr td .tablesaw-cell-content { padding: 4px; } .homeWrap h1 { font-size: 24px; padding-top: 35px; } .homeWrap h2 { font-size: 18px; padding-bottom: 30px; } .homeWrap .homeBlockRow .homeBlock p { font-size: 0.85rem; } .homeWrap .homeBlockRow .homeBlock a.button { font-size: 0.9rem; } h2.pageTitle { font-size: 20px; padding: 20px 0 15px; } .formWrap { width: 100%; font-size: 14px; } .formWrap p { font-size: 14px; } .formWrap h3.underline { font-size: 16px; margin-bottom: 10px; } .formWrap label { font-size: 14px; } .formWrap .formControl select { font-size: 14px; } .formWrap .formControl input.inputWithCheckDigi { width: 70%; } .formWrap .formControl input.inputWithCheckDigiTxt { width: 70%; } .formWrap .formControl input.lastDigi { width: 12%; } .formWrap .formControl input[type="button"] { padding: 8px 10px; font-size: 15px; min-width: 115px; } .formWrap .formControl input[type="submit"] { padding: 8px 10px; font-size: 15px; min-width: 115px; } .formWrap .formControl > label { max-width: 100%; font-size: 14px; } .formWrap .formControl input.inputWithCheckDigi.hkid { width: 140px; } .formWrap .formControl input.inputWithCheckDigiTxt.hkid { width: 140px; } .formWrap .formControl a.button { padding: 8px 10px; font-size: 15px; min-width: 115px; } .formWrap .formControl .inputWrap .radio-style ~ label { width: 80%; margin-bottom: 10px; } .formWrap .formRemark p { font-size: 12px; } .formWrap a.button { min-width: 115px; } .contentWrap { width: 100%; font-size: 14px; } .contentWrap p { font-size: 14px; } .contentWrap h3.underline { font-size: 16px; margin-bottom: 10px; } .contentWrap a.button { padding: 8px 10px; font-size: 15px; min-width: 115px; } .contentWrap input[type="button"].button { padding: 8px 10px; font-size: 15px; min-width: 115px; } .contactUsTable tr td { display: block; width: 100%; padding: 0 0 5px 0; } .contactUsTable tr td:nth-child(even) { padding: 0 0 25px 0; } footer { line-height: 30px; } #cardListTable input[type="button"].button { font-size: 12px; padding: 8px 10px; } #relinkCategoryTable, #relinkCategoryTable th, #relinkCategoryTable tbody, #relinkCategoryTable td, #relinkCategoryTable tr { display: block; width: auto !important; height: auto !important; } #relinkCategoryTable .desktop { display: none; } #relinkCategoryTable .mobile { display: inline; } } @media print { #navigation { display: none !important; } .topNav { display: none !important; } footer { display: none !important; } .table { box-shadow: none; } h2.pageTitle { padding: 20px 0 0 !important; margin-bottom: 0 !important; } section.mainSection .wrap .contentArea { box-shadow: none; } .formWrap { width: 96%; } .formWrap .txtAlert:before { color: #000000; border: 1px solid #000000; background-color: transparent; } .contentWrap { width: 96%; } .contentWrap .txtAlert:before { color: #000000; border: 1px solid #000000; background-color: transparent; } .button { display: none !important; } .printOnly { display: block !important; } h4.printOnly { margin-bottom: 10px; } .tab { display: none !important; } .tabcontent { margin-bottom: 20px; padding: 0; border: 0; top: unset; /* display: block !important; */ } .cardListTable .cardInfo { width: 100%; } .cardListTable .action { width: 0%; display: none !important; } .deregCardListTable .cardInfo { width: 100%; } .deregCardListTable .action { width: 0%; display: none !important; } }