/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);*/ @font-face { font-family: Helvetica Neue; src: url('HelveticaNeue.woff') format('woff'); } @font-face { font-family: MHeiHK; src: url('MHeiHK.woff') format('woff'); } .goog-te-banner-frame.skiptranslate { display: none !important; } html{font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:16px; } body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none} a { color: #e6007e; text-decoration: none; outline: none; /* for Firefox */ hlbr: expression(this.onFocus=this.blur()); /* for IE */ cursor: pointer; font-size: inherit; } a:hover { color: #e6007e; text-decoration: underline; cursor: pointer; } b,strong{font-weight:bold}dfn{font-style:italic}h1{/*font-size:2em;margin:.67em 0*/}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} @font-face{font-family:'webflow-icons';src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6SAy0AAAC8AAAAYGNtYXAaVcxaAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZgscV1gAAAFwAAABhGhlYWQCkFKvAAAC9AAAADZoaGVhB0MDyQAAAywAAAAkaG10eBIAA10AAANQAAAAIGxvY2EBMADyAAADcAAAABJtYXhwAAwATQAAA4QAAAAgbmFtZWTuiIAAAAOkAAABe3Bvc3QAAwAAAAAFIAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYD//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQEgAAADIAOAAAUAAAkBBwkBFwMg/kBAAYD+gEABwAHAQP6A/oBAAAEA4AAAAuADgAAFAAATARcJAQfgAcBA/oABgEABwAHAQP6A/oBAAAADAMAA4ANAAsAAGAAxAEoAAAEhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIwMg/cAHCwkFBQkLBwJABwsJBQUJCwf9wAcLCQUFCQsHAkAHCwkFBQkLB/3ABwsJBQUJCwcCQAcLCQUFCQsHAsAFCQsHIAcLCQUFCQsHIAcLCQXABQkLByAHCwkFBQkLByAHCwkFwAUJCwcgBwsJBQUJCwcgBwsJBQAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFFv+egGGAAAAAAEAAAABAADSLAJOXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAAAAACgAUAB4AMgBGAKwAwgAAAAEAAAAIAEsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAaAAAAAQAAAAAAAgAOAHEAAQAAAAAAAwAaADAAAQAAAAAABAAaAH8AAQAAAAAABQAWABoAAQAAAAAABgANAEoAAQAAAAAACgA0AJkAAwABBAkAAQAaAAAAAwABBAkAAgAOAHEAAwABBAkAAwAaADAAAwABBAkABAAaAH8AAwABBAkABQAWABoAAwABBAkABgAaAFcAAwABBAkACgA0AJkAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4Ac3dlYmZsb3ctaWNvbnMAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVcAAoAAAAABRQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAZMAAAGTuzUomU9TLzIAAAKIAAAAYAAAAGAOkgMtY21hcAAAAugAAABMAAAATBpVzFpnYXNwAAADNAAAAAgAAAAIAAAAEGhlYWQAAAM8AAAANgAAADYCkFKvaGhlYQAAA3QAAAAkAAAAJAdDA8lobXR4AAADmAAAACAAAAAgEgADXW1heHAAAAO4AAAABgAAAAYACFAAbmFtZQAAA8AAAAF7AAABe2TuiIBwb3N0AAAFPAAAACAAAAAgAAMAAAEABAQAAQEBDndlYmZsb3ctaWNvbnMAAQIAAQA6+BwC+BsD+BgEHgoACXf/i4seCgAJd/+LiwwHi0v6lPpUBR0AAACaDx0AAACfER0AAAAJHQAAAYoSAAkBAQ4bHR8iJywxNndlYmZsb3ctaWNvbnN3ZWJmbG93LWljb25zdTB1MXUyMHVFNjAwdUU2MDF1RTYwMnVFNjAzAAACAYkABgAIAQEEBwoNJDvH4P6UDv6UDv6UDvyUDvm0+FQV/FT4VEtL+BT8FPwU/BTLSwUO93T4VBX4VPhUy0v8FPwU+BT8FEtLBQ75tPlUFfzUiwV5i319i3kIi2sFi3mZfZ2LCPjUiwWdi5mZi50Ii6sFi519mXmLCIv7VBX81IsFeYt9fYt5CItrBYt5mX2diwj41IsFnYuZmYudCIurBYudfZl5iwiL+1QV/NSLBXmLfX2LeQiLawWLeZl9nYsI+NSLBZ2LmZmLnQiLqwWLnX2ZeYsIDvm4+SkV+6n7qvuq96ovLvgG/Bj4BvgYBQ76lBT6lBWLDAoAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gMDwP/A/8ADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmA//9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAC1pQTjXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAUAAACAAAAAAADgCuAAEAAAAAAAEAGgAAAAEAAAAAAAIADgBxAAEAAAAAAAMAGgAwAAEAAAAAAAQAGgB/AAEAAAAAAAUAFgAaAAEAAAAAAAYADQBKAAEAAAAAAAoANACZAAMAAQQJAAEAGgAAAAMAAQQJAAIADgBxAAMAAQQJAAMAGgAwAAMAAQQJAAQAGgB/AAMAAQQJAAUAFgAaAAMAAQQJAAYAGgBXAAMAAQQJAAoANACZAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHN3ZWJmbG93LWljb25zAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');font-weight:normal;font-style:normal}[class^="w-icon-"],[class*=" w-icon-"]{font-family:'webflow-icons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .w-icon-slider-right:before{content:"\e600"}.w-icon-slider-left:before{content:"\e601"}.w-icon-nav-menu:before{content: } .w-icon-arrow-down:before,.w-icon-dropdown-toggle:before{/*content:"\e603"*/}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{height:100%} body{margin:0;min-height:100%;background-color:#fff;font-size:16px;line-height:20px;color:#000}img{max-width:100%;vertical-align:middle;display:inline-block} html.w-mod-touch *{background-attachment:scroll !important}.w-block{display:block}.w-inline-block{max-width:100%;display:inline-block}.w-clearfix:before,.w-clearfix:after{content:" ";display:table}.w-clearfix:after{clear:both}.w-preserve-3d{transform-style:preserve-3d}.w-hidden{display:none}.w-button{display:inline-block;padding:9px 15px;background-color:#3898EC;color:white;border:0;line-height:inherit;text-decoration:none;cursor:pointer;border-radius:0}input.w-button{-webkit-appearance:button}html[data-w-dynpage] [data-w-cloak]{color:transparent !important}h1,h2,h3,h4,h5,h6{/*font-weight:bold;margin-bottom:10px}h1{font-size:38px;line-height:44px;margin-top:20px*/}h2{/*font-size:32px;line-height:36px;margin-top:20px*/}h3{/*font-size:24px;line-height:30px;margin-top:20px*/}h4{/*font-size:18px;line-height:24px;margin-top:10px*/}h5{font-size:14px;line-height:20px;margin-top:10px}h6{font-size:12px;line-height:18px;margin-top:10px}p{margin-top:0;margin-bottom:10px}a:focus{outline:0}blockquote{margin:0 0 10px 0;padding:10px 20px;border-left:5px solid #E2E2E2;font-size:18px;line-height:22px}figure{margin:0;margin-bottom:10px}figcaption{margin-top:5px;text-align:center}ul,ol{margin-top:0;padding-left:40px}.w-list-unstyled{padding-left:0;list-style:none}.w-embed:before,.w-embed:after{content:" ";display:table}.w-embed:after{clear:both}.w-video{width:100%;position:relative;padding:0}.w-video iframe,.w-video object,.w-video embed{position:absolute;top:0;left:0;width:100%;height:100%}fieldset{padding:0;margin:0;border:0}button,html input[type="button"],input[type="reset"]{border:0;cursor:pointer;-webkit-appearance:button}.w-form{margin:0 0 15px}.w-form-done{display:none;padding:20px;text-align:center;background-color:#dddddd}.w-form-fail{display:none;margin-top:10px;padding:10px;background-color:#ffdede}label{display:block;margin-bottom:5px;font-weight:bold}.w-input,.w-select{display:block;width:100%;height:38px;padding:8px 12px;margin-bottom:10px;font-size:14px;line-height:1.42857143;color:#333333;vertical-align:middle;background-color:#ffffff;border:1px solid #cccccc}.w-input:-moz-placeholder,.w-select:-moz-placeholder{color:#999}.w-input::-moz-placeholder,.w-select::-moz-placeholder{color:#999;opacity:1}.w-input:-ms-input-placeholder,.w-select:-ms-input-placeholder{color:#999}.w-input::-webkit-input-placeholder,.w-select::-webkit-input-placeholder{color:#999}.w-input:focus,.w-select:focus{border-color:#3898EC;outline:0}.w-input[disabled],.w-select[disabled],.w-input[readonly],.w-select[readonly],fieldset[disabled] .w-input,fieldset[disabled] .w-select{cursor:not-allowed;background-color:#eeeeee}textarea.w-input,textarea.w-select{height:auto}.w-select{background-image:-webkit-linear-gradient(white 0, #f3f3f3 100%);background-image:linear-gradient(white 0, #f3f3f3 100%)}.w-select[multiple]{height:auto}.w-form-label{display:inline-block;cursor:pointer;font-weight:normal;margin-bottom:0}.w-checkbox,.w-radio{display:block;margin-bottom:5px;padding-left:20px}.w-checkbox:before,.w-radio:before,.w-checkbox:after,.w-radio:after{content:" ";display:table}.w-checkbox:after,.w-radio:after{clear:both}.w-checkbox-input,.w-radio-input{margin:4px 0 0;margin-top:1px \9;line-height:normal;float:left;margin-left:-20px}.w-radio-input{margin-top:3px}.w-container{margin-left:auto;margin-right:auto;max-width:940px}.w-container:before,.w-container:after{content:" ";display:table}.w-container:after{clear:both}.w-container .w-row{margin-left:-10px;margin-right:-10px}.w-row:before,.w-row:after{content:" ";display:table}.w-row:after{clear:both}.w-row .w-row{margin-left:0;margin-right:0}.w-col{position:relative;float:left;width:100%;min-height:1px;padding-left:5px;padding-right:5px;padding-bottom:20px}.w-col .w-col{padding-left:0;padding-right:0}.w-col-1{width:8.33333333%}.w-col-2{width:16.66666667%}.w-col-3{width:25%}.w-col-4{width:33.33333333%}.w-col-5{width:100%}.w-col-6{width:50%}.w-col-7{width:58.33333333%}.w-col-8{width:66.66666667%}.w-col-9{width:75%}.w-col-10{width:83.33333333%}.w-col-11{width:91.66666667%}.w-col-12{width:100%}.w-hidden-main{display:none !important}@media screen and (max-width:1024px){.w-container{max-width:728px}.w-hidden-main{display:inherit !important}.w-hidden-medium{display:none !important}.w-col-medium-1{width:8.33333333%}.w-col-medium-2{width:16.66666667%}.w-col-medium-3{width:25%}.w-col-medium-4{width:33.33333333%}.w-col-medium-5{width:41.66666667%}.w-col-medium-6{width:50%}.w-col-medium-7{width:58.33333333%}.w-col-medium-8{width:66.66666667%}.w-col-medium-9{width:75%}.w-col-medium-10{width:83.33333333%}.w-col-medium-11{width:91.66666667%}.w-col-medium-12{width:100%}.w-col-stack{width:100%;left:auto;right:auto}}@media screen and (max-width:767px){.w-hidden-main{display:inherit !important}.w-hidden-medium{display:inherit !important}.w-hidden-small{display:none !important}.w-row,.w-container .w-row{margin-left:0;margin-right:0}.w-col{width:100%;left:auto;right:auto}.w-col-small-1{width:8.33333333%}.w-col-small-2{width:16.66666667%}.w-col-small-3{width:25%}.w-col-small-4{width:33.33333333%}.w-col-small-5{width:41.66666667%}.w-col-small-6{width:50%}.w-col-small-7{width:58.33333333%}.w-col-small-8{width:66.66666667%}.w-col-small-9{width:75%}.w-col-small-10{width:83.33333333%}.w-col-small-11{width:91.66666667%}.w-col-small-12{width:100%}}@media screen and (max-width:479px){.w-container{max-width:none}.w-hidden-main{display:inherit !important}.w-hidden-medium{display:inherit !important}.w-hidden-small{display:inherit !important}.w-hidden-tiny{display:none !important}.w-col{width:100%}.w-col-tiny-1{width:8.33333333%}.w-col-tiny-2{width:16.66666667%}.w-col-tiny-3{width:25%}.w-col-tiny-4{width:33.33333333%}.w-col-tiny-5{width:41.66666667%}.w-col-tiny-6{width:50%}.w-col-tiny-7{width:58.33333333%}.w-col-tiny-8{width:66.66666667%}.w-col-tiny-9{width:75%}.w-col-tiny-10{width:83.33333333%}.w-col-tiny-11{width:91.66666667%}.w-col-tiny-12{width:100%}}.w-widget{position:relative}.w-widget-map{width:100%;height:400px}.w-widget-map label{width:auto;display:inline}.w-widget-map img{max-width:inherit}.w-widget-map .gm-style-iw{width:90% !important;height:auto !important;top:7px !important;left:6% !important;display:inline;text-align:center;overflow:hidden}.w-widget-map .gm-style-iw+div{display:none}.w-widget-twitter{overflow:hidden}.w-widget-twitter-count-shim{display:inline-block;vertical-align:top;position:relative;width:28px;height:20px;text-align:center;background:white;border:#758696 solid 1px;border-radius:3px}.w-widget-twitter-count-shim *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-widget-twitter-count-shim .w-widget-twitter-count-inner{position:relative;font-size:15px;line-height:12px;text-align:center;color:#999;font-family:serif}.w-widget-twitter-count-shim .w-widget-twitter-count-clear{position:relative;display:block}.w-widget-twitter-count-shim.w--large{width:36px;height:28px;margin-left:7px}.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner{font-size:18px;line-height:18px}.w-widget-twitter-count-shim:not(.w--vertical){margin-left:5px;margin-right:8px}.w-widget-twitter-count-shim:not(.w--vertical).w--large{margin-left:6px}.w-widget-twitter-count-shim:not(.w--vertical):before,.w-widget-twitter-count-shim:not(.w--vertical):after{top:50%;left:0;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.w-widget-twitter-count-shim:not(.w--vertical):before{border-color:rgba(117,134,150,0);border-right-color:#5d6c7b;border-width:4px;margin-left:-9px;margin-top:-4px}.w-widget-twitter-count-shim:not(.w--vertical).w--large:before{border-width:5px;margin-left:-10px;margin-top:-5px}.w-widget-twitter-count-shim:not(.w--vertical):after{border-color:rgba(255,255,255,0);border-right-color:white;border-width:4px;margin-left:-8px;margin-top:-4px}.w-widget-twitter-count-shim:not(.w--vertical).w--large:after{border-width:5px;margin-left:-9px;margin-top:-5px}.w-widget-twitter-count-shim.w--vertical{width:61px;height:33px;margin-bottom:8px}.w-widget-twitter-count-shim.w--vertical:before,.w-widget-twitter-count-shim.w--vertical:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.w-widget-twitter-count-shim.w--vertical:before{border-color:rgba(117,134,150,0);border-top-color:#5d6c7b;border-width:5px;margin-left:-5px}.w-widget-twitter-count-shim.w--vertical:after{border-color:rgba(255,255,255,0);border-top-color:white;border-width:4px;margin-left:-4px}.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner{font-size:18px;line-height:22px}.w-widget-twitter-count-shim.w--vertical.w--large{width:76px}.w-widget-gplus{overflow:hidden}.w-background-video{position:relative;overflow:hidden;height:500px;color:white}.w-background-video>video{background-size:cover;background-position:50% 50%;position:absolute;right:-100%;bottom:-100%;top:-100%;left:-100%;margin:auto;min-width:100%;min-height:100%;z-index:-100}.w-slider{position:relative;height:300px;text-align:center;background:#dddddd;clear:both;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0)}.w-slider-mask{position:relative;display:block;overflow:hidden;z-index:1;left:0;right:0;height:100%;white-space:nowrap}.w-slide{position:relative;display:inline-block;vertical-align:top;width:100%;height:100%;white-space:normal;text-align:center}.w-slider-nav{position:absolute;z-index:2;top:auto;right:0;bottom:0;left:0;margin:auto;padding-top:10px;height:40px;text-align:center;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0)}.w-slider-nav.w-round>div{border-radius:100%}.w-slider-nav.w-num>div{width:auto;height:auto;padding:.2em .5em;font-size:inherit;line-height:inherit}.w-slider-nav.w-shadow>div{box-shadow:0 0 3px rgba(51,51,51,0.4)}.w-slider-nav-invert{color:#fff}.w-slider-nav-invert>div{background-color:rgba(34,34,34,0.4)}.w-slider-nav-invert>div.w-active{background-color:#222} .w-slider-dot{position:relative;display:inline-block;width:1em;height:1em;background-color:rgba(255,255,255,0.4);cursor:pointer;margin:0 3px .5em;transition:background-color 100ms,color 100ms} .w-slider-dot.w-active{background-color:#fff} .w-slider-arrow-left,.w-slider-arrow-right{position:absolute;width:80px;top:0;right:0;bottom:0;left:0;margin:auto;cursor:pointer;overflow:hidden;color:white;font-size:40px;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .w-slider-arrow-left [class^="w-icon-"],.w-slider-arrow-right [class^="w-icon-"],.w-slider-arrow-left [class*=" w-icon-"],.w-slider-arrow-right [class*=" w-icon-"]{position:absolute}.w-slider-arrow-left{z-index:3;right:auto}.w-slider-arrow-right{z-index:4;left:auto}.w-icon-slider-left,.w-icon-slider-right{top:0;right:0;bottom:0;left:0;margin:auto;width:1em;height:1em} .w-dropdown{display:inline-block;position:relative;text-align:left;margin-left:auto;margin-right:auto;z-index:900;max-width: 100% !important;} .w-dropdown-btn,.w-dropdown-toggle,.w-dropdown-link{position:relative;vertical-align:top;text-decoration:none;color:#222222;padding:20px;text-align:left;margin-left:auto;margin-right:auto;white-space:nowrap;font-weight: bold; } .w-dropdown-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;cursor:pointer;padding-right:40px} .w-dropdown-toggle:focus{outline:0}.w-icon-dropdown-toggle{position:absolute;top:0;right:0;bottom:0;margin:auto;margin-right:20px;width:1em;height:1em} .w-dropdown-list{position:absolute;background:#dddddd;display:none;min-width:100%}.w-dropdown-list.w--open{display:block} .w-dropdown-link{padding:5px 40px 5px 15px;display:block;color:#222222} .w-dropdown-link.w--current{color:#0082f3}.w-nav[data-collapse="all"] .w-dropdown,.w-nav[data-collapse="all"] .w-dropdown-toggle{display:block}.w-nav[data-collapse="all"] .w-dropdown-list{position:static} @media screen and (max-width:1024px){.w-nav[data-collapse="medium"] .w-dropdown,.w-nav[data-collapse="medium"] .w-dropdown-toggle{display:block}.w-nav[data-collapse="medium"] .w-dropdown-list{position:static; background-color:white;}} @media screen and (max-width:767px){.w-nav[data-collapse="small"] .w-dropdown,.w-nav[data-collapse="small"] .w-dropdown-toggle{display:block}.w-nav[data-collapse="small"] .w-dropdown-list{position:static; background-color:white;}.w-nav-brand{padding-left:10px}} @media screen and (max-width:479px){.w-nav[data-collapse="tiny"] .w-dropdown,.w-nav[data-collapse="tiny"] .w-dropdown-toggle{display:block}.w-nav[data-collapse="tiny"] .w-dropdown-list{position:static; background-color:white;}}.w-lightbox-backdrop{color:#000;cursor:auto;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;list-style:disc;text-align:start;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;position:fixed;top:0;right:0;bottom:0;left:0;color:#fff;font-family:"Helvetica Neue",Helvetica,Ubuntu,"Segoe UI",Verdana,sans-serif;font-size:17px;line-height:1.2;font-weight:300;text-align:center;background:rgba(0,0,0,0.9);z-index:2000;outline:0;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-transform:translate(0, 0)}.w-lightbox-backdrop,.w-lightbox-container{height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.w-lightbox-content{position:relative;height:100vh;overflow:hidden}.w-lightbox-view{position:absolute;width:100vw;height:100vh;opacity:0}.w-lightbox-view:before{content:"";height:100vh}.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{height:86vh}.w-lightbox-frame,.w-lightbox-view:before{display:inline-block;vertical-align:middle}.w-lightbox-figure{position:relative;margin:0}.w-lightbox-group .w-lightbox-figure{cursor:pointer}.w-lightbox-img{width:auto;height:auto;max-width:none}.w-lightbox-image{display:block;float:none;max-width:100vw;max-height:100vh}.w-lightbox-group .w-lightbox-image{max-height:86vh}.w-lightbox-caption{position:absolute;right:0;bottom:0;left:0;padding:.5em 1em;background:rgba(0,0,0,0.4);text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-lightbox-embed{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.w-lightbox-control{position:absolute;top:0;width:4em;background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}.w-lightbox-left{display:none;bottom:0;left:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==")}.w-lightbox-right{display:none;right:0;bottom:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+")}.w-lightbox-close{right:0;height:2.6em;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");background-size:18px}.w-lightbox-strip{padding:0 1vh;line-height:0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.w-lightbox-item{display:inline-block;width:10vh;padding:2vh 1vh;box-sizing:content-box;cursor:pointer;-webkit-transform:translate3d(0, 0, 0)}.w-lightbox-active{opacity:.3}.w-lightbox-thumbnail{position:relative;height:10vh;background:#222;overflow:hidden}.w-lightbox-thumbnail-image{position:absolute;top:0;left:0}.w-lightbox-thumbnail .w-lightbox-tall{top:50%;width:100%;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%)}.w-lightbox-thumbnail .w-lightbox-wide{left:50%;height:100%;-webkit-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0)}.w-lightbox-spinner{position:absolute;top:50%;left:50%;box-sizing:border-box;width:40px;height:40px;margin-top:-20px;margin-left:-20px;border:5px solid rgba(0,0,0,0.4);border-radius:50%;-webkit-animation:spin .8s infinite linear;animation:spin .8s infinite linear}.w-lightbox-spinner:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border:3px solid transparent;border-bottom-color:#fff;border-radius:50%}.w-lightbox-hide{display:none}.w-lightbox-noscroll{overflow:hidden}@media (min-width:768px){.w-lightbox-content{height:96vh;margin-top:2vh}.w-lightbox-view,.w-lightbox-view:before{height:96vh}.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{height:84vh}.w-lightbox-image{max-width:96vw;max-height:96vh}.w-lightbox-group .w-lightbox-image{max-width:82.3vw;max-height:84vh}.w-lightbox-left,.w-lightbox-right{display:block;opacity:.5}.w-lightbox-close{opacity:.8}.w-lightbox-control:hover{opacity:1}}.w-lightbox-inactive,.w-lightbox-inactive:hover{opacity:0}.w-richtext:before,.w-richtext:after{content:" ";display:table}.w-richtext:after{clear:both}.w-richtext ol,.w-richtext ul{overflow:hidden}.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:before,.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:before{outline:2px solid #2895f7}.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div{outline:2px solid #2895f7}.w-richtext figure.w-richtext-figure-type-video>div:before,.w-richtext figure[data-rt-type="video"]>div:before{content:'';position:absolute;display:none;left:0;top:0;right:0;bottom:0;z-index:1}.w-richtext figure{position:relative;max-width:60%}.w-richtext figure>div:before,.w-richtext figure img{cursor:default !important}.w-richtext figure img{width:100%}.w-richtext figure figcaption.w-richtext-figcaption-placeholder{opacity:.6}.w-richtext figure div{font-size:0;color:transparent}.w-richtext figure.w-richtext-figure-type-image,.w-richtext figure[data-rt-type="image"]{display:table}.w-richtext figure.w-richtext-figure-type-image>div,.w-richtext figure[data-rt-type="image"]>div{display:inline-block}.w-richtext figure.w-richtext-figure-type-image>figcaption,.w-richtext figure[data-rt-type="image"]>figcaption{display:table-caption;caption-side:bottom}.w-richtext figure.w-richtext-figure-type-video,.w-richtext figure[data-rt-type="video"]{width:60%;height:0}.w-richtext figure.w-richtext-figure-type-video iframe,.w-richtext figure[data-rt-type="video"] iframe{position:absolute;top:0;left:0;width:100%;height:100%}.w-richtext figure.w-richtext-figure-type-video>div,.w-richtext figure[data-rt-type="video"]>div{width:100%}.w-richtext figure.w-richtext-align-center{margin-right:auto;margin-left:auto;clear:both}.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div,.w-richtext figure.w-richtext-align-center[data-rt-type="image"]>div{max-width:100%}.w-richtext figure.w-richtext-align-normal{clear:both}.w-richtext figure.w-richtext-align-fullwidth{width:100%;max-width:100%;text-align:center;clear:both;display:block;margin-right:auto;margin-left:auto}.w-richtext figure.w-richtext-align-fullwidth>div{display:inline-block;padding-bottom:inherit}.w-richtext figure.w-richtext-align-fullwidth>figcaption{display:block}.w-richtext figure.w-richtext-align-floatleft{float:left;margin-right:15px;clear:none}.w-richtext figure.w-richtext-align-floatright{float:right;margin-left:15px;clear:none}.w-nav{position:relative;background:#dddddd;z-index:1000}.w-nav:before,.w-nav:after{content:" ";display:table}.w-nav:after{clear:both}.w-nav-brand{position:relative;float:left;text-decoration:none;color:#333333}.w-nav-link{position:relative;display:inline-block;vertical-align:middle;text-decoration:none;color:#222222;padding:20px;text-align:left;margin-left:auto;margin-right:auto}.w-nav-link.w--current{color:#0082f3}.w-nav-menu{position:relative;float:right;padding-top:0px} .w--nav-menu-open{display:block !important;position:absolute;top:100%;left:0;right:0;background:#fff;text-align:center;overflow:visible;min-width:200px;/*height: 92vh;*/}.w--nav-link-open{display:block;position:relative} .w-nav-overlay{position:absolute;overflow:hidden;display:none;top:100%;left:0;right:0;width:100%;background-color: rgba(0,0,0,0.5) } .w-nav-overlay .w--nav-menu-open{top:0} .w-nav[data-animation="over-left"] .w-nav-overlay{width:auto}.w-nav[data-animation="over-left"] .w-nav-overlay,.w-nav[data-animation="over-left"] .w--nav-menu-open{right:auto;z-index:1;top:0} .w-nav[data-animation="over-right"] .w-nav-overlay{width:auto}.w-nav[data-animation="over-right"] .w-nav-overlay,.w-nav[data-animation="over-right"] .w--nav-menu-open{left:auto;z-index:1;top:0} .w-nav-button{position:relative;float:right;padding:10px;font-size:24px;display:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; background-image: url(../images/mobilemenu-off.png);background-size: 60% 65%;background-position: center;background-repeat: no-repeat; transition: all 0.2s;-webkit-transition: all 0.2s;-moz-transition: all 0.2s; } .w-nav-button.w--open{background-color:#C8C8C8;color:white}.w-nav[data-collapse="all"] .w-nav-menu{display:none}.w-nav[data-collapse="all"] .w-nav-button{display:block} @media screen and (max-width:1024px){.w-nav[data-collapse="medium"] .w-nav-menu{display:none; text-align: left}.w-nav[data-collapse="medium"] .w-nav-button{display:block}} @media screen and (max-width:767px){.w-nav[data-collapse="small"] .w-nav-menu{display:none}.w-nav[data-collapse="small"] .w-nav-button{display:block}.w-nav-brand{padding-left:0px}} @media screen and (max-width:479px){.w-nav[data-collapse="tiny"] .w-nav-menu{display:none}.w-nav[data-collapse="tiny"] .w-nav-button{display:block}}.w-tabs{position:relative}.w-tabs:before,.w-tabs:after{content:" ";display:table}.w-tabs:after{clear:both}.w-tab-menu{position:relative}.w-tab-link{position:relative;display:inline-block;vertical-align:top;text-decoration:none;padding:9px 30px;text-align:left;cursor:pointer;color:#222222;background-color:#dddddd}.w-tab-link.w--current{background-color:#C8C8C8}.w-tab-content{position:relative;display:block;overflow:hidden}.w-tab-pane{position:relative;display:none}.w--tab-active{display:block}@media screen and (max-width:479px){.w-tab-link{display:block}}.w-ix-emptyfix:after{content:""}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.w-dyn-empty{padding:10px;background-color:#dddddd}.w-dyn-bind-empty{display:none !important}.w-condition-invisible{display:none !important} .heading-1,.heading-2,.heading-3,.heading-4,.heading-5,.paragraph,.text-block,.testi-wrapper,.biger { -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } #pagewrap { width: 100%;margin: 0 auto;max-width: 1600px;background-color: #fff; position: relative;} .contentwidth { width: 96%;height: auto;display: inline-block; } h1 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; } h2 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; } h3 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; } h4 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; } h5 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; } h6 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; } h7 { font-size: inherit;font-weight: inherit;line-height: 120% !important;color: inherit;margin: 0px !important;display: inline-block; } .nowarp { white-space: nowrap; } .txtblk { color: #000000 !important; } .txtwht { color: #ffffff !important; } .txtpup { color: #6b1d93 !important; } .txtgld { color: #D0AB50 !important; } .txtalignL { text-align: left; } .bluegreentxt{ color: #439798;} #myBtn { display: none; position: fixed; bottom: 40px; right: 0px; z-index: 99; font-size: 16px; border: none; outline: none; background: linear-gradient(to right, #293794 , #009aa9) !important; color: white; cursor: pointer; padding: 15px; border-radius: 8px 0px 0px 8px; } #myBtn:hover { background: #293794 !important; } /************************************************************************************ NEW sosim home *************************************************************************************/ .nwsmtopbutframe { /*width: 22%;*/ width:42%; height: auto;display: inline-block;margin: 0px 1%; } .nwsmtopbut { width: 100%;height: auto; font-size: 24px;color: #fff;font-weight: bold;line-height: 100%;background-image: linear-gradient(to right, #293794 , #009aa9); cursor: pointer;padding: 12px 0px;/*border-radius: 60px;*/box-shadow: 0px 3px 10px #a9a9a9;display: flex;justify-content: center;align-items: center;text-align: center; } .nwsmtopbutso { width: 60% !important;height: auto; font-size: 24px;color: #fff;font-weight: bold;line-height: 100%;background-image: linear-gradient(to right, #293794 , #009aa9);border-radius: 10px; cursor: pointer;padding: 12px 0px;border-radius: 60px;box-shadow: 0px 3px 10px #a9a9a9;display: flex;justify-content: center;align-items: center;text-align: center; margin-bottom: 30px; } .nwsmtopbut:hover { /*color: #ff7c00;*/ } .nwsmtopbutso:hover { color: #ffce02; } .nwsmtopbuten { width: 100%;height: auto; font-size: 18px;color: #fff;font-weight: bold;line-height: 100%;background-image: linear-gradient(to right, #293794 , #009aa9);border-radius: 10px; cursor: pointer;padding: 12px 0px;border-radius: 60px;box-shadow: 0px 3px 10px #a9a9a9;display: flex;justify-content: center;align-items: center;text-align: center; } .nwsmtopbutsoen { width: 60% !important;height: auto; font-size: 18px;color: #fff;font-weight: bold;line-height: 100%;background-image: linear-gradient(to right, #293794 , #009aa9);border-radius: 10px; cursor: pointer;padding: 12px 0px;border-radius: 60px;box-shadow: 0px 3px 10px #a9a9a9;display: flex;justify-content: center;align-items: center;text-align: center; margin-bottom: 30px;} .nwsmtopbuten:hover { color: #ffce02; } .nwsmtopbutsoen:hover { color: #ffce02; } .nwsmbutimgoff { width: 36px;height: 36px;display: inline-block;vertical-align: -10px;margin: 0px 3px;filter: invert(100%) sepia(0%) saturate(27%) hue-rotate(118deg) brightness(107%) contrast(107%); } .nwsmbutimgon { width: 36px;height: 36px;display: inline-block;vertical-align: -10px;margin: 0px 3px;filter: invert(74%) sepia(86%) saturate(1392%) hue-rotate(359deg) brightness(103%) contrast(107%); } .sosimgreen{color:#00A799;} .sosimorange{color:#ff7c00; font-family: "titling-gothic-fb-condensed","Noto Sans","Noto Sans TC";} .sosimblue{color:#2D3680;} .sosimyellow{color:#FFCA05;} .combobulletpoint{ vertical-align: middle; font-size:30px; padding-top: 10px;} .nwsmhomeplanframe { width: 97%;margin: 0 1.5%;height: auto;display: inline-block;/*margin-top: 20px;*/background: #ffffff;position: relative; /*border: 1px #ddd solid;*/ margin-bottom: 10px;border-top-right-radius: 0px;box-shadow: 0px 0px 2px #ccc; /*box-shadow: 0px 4px 12px #2b388c75;*//*border: 2px #2b388c solid;border-radius: 26px;*/ } .nwsmhomeplantitle { width: 100%;height: auto;display: inline-block;background: #000000;padding: 18px 0px;font-size: 22px;font-weight: bold;color: #ff7c00;border-top-left-radius: 0px;border-top-right-radius: 20px; } .nwsmhomeplancontentframe { width: 100%;height: auto;display: inline-block;padding: 10px 0px 0px 0px; } .nwsmhomeplansubtitle { width: 100%;height: auto;display: inline-block;padding: 0px 0px;font-size: 22px;font-weight: bold;/*color: #2b338c;*/margin-bottom: 10px; } .nwsmhomeplansubtitle2 { width: 100%;height: auto;display: inline-block;padding: 0px 0px;font-size: 18px;font-weight: bold;/*color: #2b338c;*/margin: 30px 0px 10px 0px; } .nwsmhomeplansubtitlebold { width: auto;height: auto;display: inline-block;font-size: 180%;color: inherit; color: #999;/*text-shadow: 2px 2px 3px #f9c709a3;*/ font-family: "titling-gothic-fb-condensed","Noto Sans","Noto Sans TC" !important; } .nwsmhomeplancnt { width: 100%;height: auto;display: inline-block;padding: 14px 0px 14px 28px;font-size: 16px;font-weight: bold;color: #000000;text-align: left; } .nwsmhomeplancntline { width: 100%;height: auto;display: inline-block;padding: 14px 0px 14px 28px;font-size: 16px;font-weight: bold;color: #000000;border-bottom: #dbdbdb 1px solid;text-align: left; } /*.nwsmhomeplancnt { width: 100%;height: auto;display: inline-block;padding: 14px 0px;font-size: 16px;font-weight: bold;color: #000000;border-bottom: #dbdbdb 1px solid;text-align: center;background-image: linear-gradient(to right, #ffffff, #ededed, #ffffff); }*/ .nwsmhomeplanbtn { border: 1px solid #ff7c00;width: 100%;height: auto; font-size: 18px;color: #ffffff;font-weight: bold;line-height: 100%;background: #ff7c00;margin-top: 20px;padding: 16px 0px;/*box-shadow: 0px 3px 8px #0000006e;*/ /*border-radius: 20px;border-top-right-radius: 0px;border-bottom-left-radius: 0px; */ cursor: pointer;display: flex;justify-content: center;align-items: center;text-align: center;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .nwsmhomeplanbtn:hover { color: #000000; background:#fff} .nwsmhomeplanmoretxt { font-size: 15px;font-weight: bold;color: #ffffff;background: #ccc;padding: 10px 20px;border-radius: 20px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;position: absolute;right: 0%;bottom: 0%;width: auto;height: auto;display: inline-block;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .nwsmhomeplanmoretxt:hover { background: #ff7c00; } .nwsmhomeslidesize { width: 80%;padding-bottom: 10px !important; } .nwsmhomeslideheight { height: 630px !important; } .nwsmhometdframe { width: 100%;height: auto;display: inline-block;border-radius: 20px;box-shadow: 0px 4px 8px #2b388c75;margin-top: 5px; margin-bottom: 20px; position: relative; } .nwsmhometdimgframe { width: 100%;height: 170px;display: inline-block;border-radius: 20px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;background-size: cover;background-position: center;position: relative; } .nwsmhometdimgframeOne { width: 100%;height: 482px;display: inline-block;border-radius: 20px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;background-size: cover;background-position: center;position: relative; } .nwsmhometdimg { border-radius: 20px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px; } .nwsmhometdoffertab { width: 100%;height: auto;display: inline-block;padding: 6px 0px;font-size: 16px;font-weight: bold;line-height: 120%;color: white;background: #F37120;position: absolute;left: 0%;bottom: 0%; } /*.nwsmhometdoffertab { width: 100%;height: auto;display: inline-block;padding: 6px 0px;font-size: 16px;font-weight: bold;line-height: 120%;color: #2b338c;background: #ffce02;position: absolute;left: 0%;bottom: 0%; } */ .nwsmhometdoffertitle { width: 100%;height: auto;display: inline-block;padding: 4px 0px 10px 0px;font-size: 20px;font-weight: bold;color: #000000;line-height: 120%; } .nwsmhometdoffertitlebold { width: auto;height: auto;display: inline-block;font-size: 160%;font-weight: bold;color: #2b338c;line-height: 120%;/*text-shadow: 2px 2px 3px #f9c709a3;*/ } .nwsmhometdbtn { width: 38%;height: auto; font-size: 16px;color: #ffffff;font-weight: bold;line-height: 100%;background: #ff7c00;;padding: 14px 0px;margin-bottom: 20px; box-shadow: 0px 3px 8px #0000006e;border-radius: 3px; cursor: pointer;display: flex;justify-content: center;align-items: center;text-align: center;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .nwsmhometdbtn:hover { color: #000000; } .nwsmhometdmoretxt { font-size: 13px;font-weight: bold;color: #2b388c;background: #dbdbdb;padding: 5px 10px;border-radius: 20px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;position: absolute;right: 0%;bottom: 0%;width: auto;height: auto;display: inline-block;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .nwsmhometdmoretxt:hover { background: #ffce02; } .nwsmhomembsection { float:left;width: 100%;height: auto;/*background: #efefef;*/padding: 20px 0px; /*margin-top: 50px; ;*/ /*background-image: url(../images/simworld-bg.webp);background-size: cover;background-repeat: no-repeat;*/ background-position: center;} .nwsmhomembframe { width: 96%;/*height: 400px;*/display: inline-block;/*margin: 2%;*/padding: 19px 0px 19px 0px;/*margin-top: 50px;box-shadow: 0px 0px 5px #dfdfdf;/*border-radius: 20px;*/vertical-align: top;border-top-right-radius: 0px;border-bottom-left-radius: 0px;background: #fff;position: relative; /*border-bottom:2px solid #000*/} .nwsmhomembframeshop { width: 26%;height: 520px;display: inline-block;margin: 20px 1.5%;padding: 70px 0px 20px 0px;margin-top: 50px;box-shadow: 0px 3px 20px #dfdfdf;border-radius: 60px;vertical-align: top;border-top-left-radius: 0px;background: #fff;position: relative; } .nwsmhomembframeshop1 { width: 100%;height: auto;display: inline-block;margin: 30px 0px;padding: 10px 0px 30px 0px;margin-top: 10px;box-shadow: 0px 3px 20px #dfdfdf;vertical-align: top;/*border-radius: 60px;border-top-left-radius: 0px;*/background: #fff;position: relative; border-radius: 20px; border-top-right-radius: 0px; border-bottom-left-radius: 0px;} .nwsmhomembframeshop3 { width: 30%;height: auto;display: inline-block;margin: 20px 1.5%;padding: 10px 0px 30px 0px;margin-top: 50px;box-shadow: 0px 3px 20px #dfdfdf;border-radius: 60px;vertical-align: top;border-top-left-radius: 0px;background: #fff;position: relative; } .nwsmhomembframeshop4 { width: 22%;height: auto;display: inline-block;margin: 20px 1.5%;padding: 10px 0px 30px 0px;margin-top: 50px;box-shadow: 0px 3px 20px #dfdfdf;border-radius: 60px;vertical-align: top;border-top-left-radius: 0px;background: #fff;position: relative; } .nwsmhomembimg { width: 50%;height: auto;display: inline-block;/*margin-bottom: 10px;padding:0px 20px*/ } .other-service{width:32%; margin:1% 0.5%;height: auto;padding: 0px;box-shadow: none;border: none; overflow: hidden;} .other-service-txt {bottom:0% !important; position: absolute;/* left: 30%;*/} .other-service-img{width:100%; } .other-service img {transition: all .3s;} .other-service img:hover { transform: scale(1.05);} .nwsmhomembstep { width: 60%;height: auto;display: inline-block;padding: 8px 30px;background: #000000;font-size: 16px;font-weight: bold;line-height: 120%;color: #ffffff;margin: 0% 20%;/*border-radius: 20px; border-bottom-left-radius: 0px;border-top-right-radius: 0px;*//*position: absolute;bottom: -3%;left: 0%; */z-index:10 } .nwsmhomembstepshop { width: auto;height: auto;display: inline-block;padding: 8px 20px;background: #000000;font-size: 20px;font-weight: bold;line-height: 120%;color: #ff7c00;margin: 10px 0px;border-radius: 30px; border-bottom-left-radius: 0px;border-top-right-radius: 0px;position: absolute;top: -8%;left: 0%; } .nwsmhomembstepbold { width: 100%;height: auto;display: inline-block;font-size: 160%;color: inherit;font-style: italic;margin-right: 4px; } .nwsmhomembtxt { width: 50%; float:left;height: auto;display: inline-block;font-size: 16px;/*font-weight: bold;*/line-height: 150%; padding:20px} .nwsmhomembbtn { width: auto;font-size: 16px;font-weight: bold;color: #ffffff; padding: 12px 60px;text-align: center; display: inline-block;background: #2b388c;box-shadow: 0px 3px 8px #0000006e;border-radius: 3px;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .nwsmhomembbtn:hover { color: #f9c709; } .nwsmhomeshopsection { width: 100%;height: auto;display: inline-block;background: #ffffff;padding: 60px 0px;/*box-shadow: 0px -5px 3px #eee;*/ } .nwsmhomeshoplogoframe { width: 14%;height: auto;display: inline-block;margin: 20px 1% 0% 1%; } .nwsmhomeshoplogo { width: 160px;height: 160px;display: flex;justify-content: center;align-items: center;box-shadow: 0px 0px 18px #dbdbdb;border-radius: 100%; background-color: #fff; } .nwsmhomeshoplogoimg { width: 70%;height: auto;display: inline-block; } .nwsmhomembtxt2_big { width: 100%; padding:2%;float:left;height: auto;display: inline-block;font-size: 16px;font-weight: bold;/*line-height: 150%;*/ } .nwsmhomembtxt2 { width: 100%; padding:20px 20px;float:left;height: auto;display: inline-block;font-size: 14px;/*font-weight: bold;line-height: 150%; */} .box-detail { /* color: #666;*/font-size: 14px;} .smfooter { width: 100%;/*max-width: 1600px;*/height: auto;display: inline-block;background: #fff;padding: 40px 0px;text-align: left; border-top: 2px solid #FF7C13;/*border-radius: 20px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px; */} .smcopyright { width: 100%;height: auto;display: inline-block;font-size: 12px;line-height: 120%;/*font-weight: bold;*/color: #959595; padding-top: 40px;vertical-align: middle; text-align: center;} .smcopyrightlink { color: #959595;padding: 0px 14px;border-left: 1px solid #ccc; } .smappdl { width: 100%;height: auto;display: inline-block;font-size: 14px;line-height: 120%;font-weight: bold;color: #2b388c;padding: 0px 0.5% 0px 0px;vertical-align: middle;text-align: center; } .smappdltxtfr { width: auto;height: auto;display: inline-block;/*color: inherit;*/color:#ff7c00 } .smappdlimgfr { width: auto;height: auto;display: inline-block;color: inherit; padding-top: 5px;float: left;} .smappdlimg { width: auto;height: 42px;display: inline-block;margin: 0px 5px; } .smappdlapp { width: auto;/*height: 40px;*/display: inline-block;/*margin: 0px 5px;*/ } .smappdlapp img{border-radius: 5px;} .app-container {float:right} .smfooter .middle{margin:auto;width:1400px; } .smfooter .left{} .smfooter .right{} .smfooter .left,.smfooter .right {width: 50%; display: inline-block; position: relative;} /*.care-img,.care-content,.smfooter .left,.smfooter .right{float:left}*/ .app-box{float:right} .care-content p{ margin: 5px;text-align: right;} .app-box .care-img {position: relative; margin-right: 18px;} .app-box .care-img img { width: 65px; transform-origin: left; display: block; aspect-ratio: 1;border-radius: 5px; } .app_area{width: 100%;float: right;} .app_txt{float:right} .app_icon{float: right;} .contact-box{text-align: left;} .smfooter .right .contact-box { padding-bottom: 0px; } .dl_txt-s{font-size: 10px;line-height: 120%;text-align: right;padding-top: 10px;color:#959595;} .contact-icon{ /*border-top: 1px solid #f4f4f4; padding-top: 30px;*/color: #959595; font-size: 12px;} .contact-icon a{color: #959595; padding: 0px 14px; border-left: 1px solid #ccc;} .smfooter .left{ width: 49%; height: auto; display: inline-block; font-size: 12px; line-height: 120%; font-weight: bold; color: #959595; padding: 0px 0px 0px 2%; vertical-align: middle;} .smfooter .right{ width: 50%; height: auto; display: inline-block; font-size: 14px; line-height: 120%; font-weight: bold; color: #2b388c; padding: 0px 0.5% 0px 0px; vertical-align: middle; text-align: right;} @media screen and (max-width: 480px){ .smfooter .middle,.app-box,.care-img,.care-content,.smfooter .left,.smfooter .right{width:100%} .smfooter .left,.smfooter .right{padding:15px;text-align: center;} .care-content p,.contact-box{text-align:center} .contact-icon{padding:0px} } .smwtsappcontainer { width: 100%;height: 1px; display: inline-block;position: fixed;bottom: 10%;left: 0%;text-align: right;z-index: 999; } /*.smwtsappcontainerIM { height:50%; width: 33%; display: inline-block;position: fixed;bottom: 2%;right: 1.5%;text-align: right;z-index: 9999; box-shadow: 0px 0px 10px #00A799; overflow: hidden; border-radius:10px; } */ .smwtsappcontainerIM { height:550px; width: 420px; display: inline-block;position: fixed;bottom: 30px;right: 30px;text-align: right;z-index: 9999; box-shadow: 0px 0px 10px #00A799; overflow: hidden; border-radius:10px; } .relative{position: relative; width: auto; height: auto;} .absolute{position: absolute; top: 2%; right: ; cursor: pointer;} .smwtsappiconcontainer { width: 100%;height: 1px; display: inline-block;position: relative; } .smwtsappiconframe { width: 80px;height: auto;display: inline-block;text-align: center;position: absolute;right: 0%;bottom: 0%; /*border-radius: 10px;background: #ffffff;*/padding: 15px 8px 15px 8px;backdrop-filter: blur(12px);border: 1px #ffffff59 solid; box-shadow: 0px 0px 5px #ccc;background: #fff; } .smwtsappiconimgframe { width: auto;height: auto;display: inline-block; } .smwtsappicontalk { width: 55px;height: auto;display: inline-block;margin-bottom: 8px;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .smwtsappicontalk:hover { transform: scale(1.1); } .smwtsappiconlogin { width: 36px;height: auto;display: inline-block;margin-bottom: 15px;cursor: pointer; filter: invert(49%) sepia(93%) saturate(1994%) hue-rotate(1deg) brightness(103%) contrast(105%); /*filter: invert(16%) sepia(38%) saturate(4711%) hue-rotate(226deg) brightness(88%) contrast(86%);*/transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .smwtsappiconlogin:hover {transform: scale(1.1); } .smwtsappiconrecharge { width: 40px;height: auto;display: inline-block;margin-bottom: 15px;cursor: pointer; filter: invert(49%) sepia(93%) saturate(1994%) hue-rotate(1deg) brightness(103%) contrast(105%); /*filter: invert(16%) sepia(38%) saturate(4711%) hue-rotate(226deg) brightness(88%) contrast(86%);*/transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .smwtsappiconrecharge:hover { transform: scale(1.1); } .smwtsappiconshop { width: 40px;height: auto;display: inline-block;margin-bottom: 15px;cursor: pointer; /*filter: invert(16%) sepia(38%) saturate(4711%) hue-rotate(226deg) brightness(88%) contrast(86%);*/transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .smwtsappiconshop:hover { transform: scale(1.1); } .smwtsappiconshop:hover ,.smwtsappiconrecharge:hover,.smwtsappiconlogin:hover {/*filter: invert(49%) sepia(93%) saturate(1994%) hue-rotate(1deg) brightness(103%) contrast(105%);*/ /*filter: invert(63%) sepia(36%) saturate(7480%) hue-rotate(1deg) brightness(103%) contrast(105%);*/} .smwtsappicontop { width: 40px;height: auto;display: inline-block;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .smwtsappicontop:hover { transform: scale(1.1); } /************************************************************************************ crisis *************************************************************************************/ .crstopmsgfr { width: 100%;height: auto;display: inline-block;background-color: #fff;padding: 15px 0px;text-align: center; } .crstopmsgtxt { width: 92%;max-width: 1600px;height: auto;display: inline-block;font-size: 16px;font-weight: bold;line-height: 120%;color: #000;text-align: left; } .crstopclose { width: auto;height: auto;display: inline-block;vertical-align: top; } .crspopmsgfr { width: 800px;height: auto;display: inline-block;font-size: 20px;line-height: 140%;color: #000; } /************************************************************************************ scroll tab menu *************************************************************************************/ .linkTabsRow{ width: 88%; max-width: 1600px; position: relative; } .linkTabs{ background-image: url(tabline.jpg); background-position: bottom; background-repeat: no-repeat; padding-bottom: 2px; cursor: pointer; } .slick-track{ margin-left: 0 !important; margin-right: 0 !important; } .slick-slide{ height: 66px !important; padding-top: 8px; padding-bottom: 8px; background: #2c2c2c; border-right: #000 1px solid; color: #fff; } .slick-selected{ background-image: url(bgtab.jpg); background-size: cover; background-position: center; color: #000000; font-weight: bold; cursor: default; } .slickBtnImg{ position: absolute; left: 0px; top: -68px; cursor: pointer; } /************************************************************************************ CLEARFIX *************************************************************************************/ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } .clearfix { display: block; zoom: 1; } /********************************************/ .achframe-scoll{ position: fixed; top: 73px; left: 8%; background-color: white; width: 88%; max-width: 1600px; z-index: 999999; padding-bottom: 20px; border-top: 1px solid #ddd; margin: auto; left: 0; right: 0; } .achframe-hidden,.achframe-hidden-en{ width: 100%; height: 56px; display: none; } /************************************************************************************ Sosim *************************************************************************************/ .spheader { width: 88%;max-width: 1100px;height: auto;display: inline-block;font-size: 30px;font-weight: bold;line-height: 120%;text-align: center;margin-bottom: 40px; } .frametitle { width: 100%; display: inline-block; padding: 25px 0px; } .hstitle { font-size: 30px; line-height: 120%; font-weight: bold; width: auto; display: inline-block; vertical-align: top; } .sotxtcolor { color:#ff7c00 /*background: linear-gradient(135deg,#293794 .16%,#009aa9 100.16%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ } .txtcolor2 { color: #f4b400; } .somaininfoframe { width: 28%; height: auto; display: inline-block; margin: 20px 20px 40px 20px; vertical-align: top; } .somaininfotxt { font-size: 20px; font-weight: bold; line-height: 120%; width: 100%; height: auto; display: inline-block; } .soinfoframe { width: 49%; height: auto; display: inline-block; vertical-align: top; text-align: left; margin-bottom: 40px; } .soinfotitleframe { width: 100%; height: auto; display: inline-block; } .soinfoiconframe { width: 130px; height: auto; display: inline-block; vertical-align: top; vertical-align: middle; text-align: right; } .soinfoicontxtframe { width: 72%; height: auto; display: inline-block; vertical-align: top; font-size: 16px; line-height: 120%; vertical-align: middle; } .soinfotitletxt { font-size: 32px; font-weight: bold; line-height: 130%; color: #f9c709; display: inline-block; text-align: left; margin-top: 13px; width: 72%; } .soinfotitletxttc { font-size: 20px; font-weight: bold; line-height: 130%; color: #2c2d87; display: inline-block; text-align: left; width: 100%; height: auto; } .soinfotitleimg { width: 70px; height: auto; } .soinfotitleimgframe { width: 130px; height: auto; display: inline-block; vertical-align: top; text-align: right; } .pagetablewidth { width: 88%; max-width: 1600px; } .pagetablewidthpopup { width: 99%; max-width: 1600px; } /************************************************************************************ supreme TNC PV *************************************************************************************/ .sptnc { font-size: 16px;font-weight: bold;line-height: 140%;color: #fff; } .arrownext { width: 20px; } /************************************************************************************ isupreme *************************************************************************************/ .isupcontactusbox { width: 70%; height: auto;display: inline-block;padding: 100px 10px;background-color: #404040;border-radius: 10px; background-image: url(../images/login-bg.webp);background-size: cover;background-position: center; box-shadow: 0px 5px 20px 6px #383838; } .isupcontent { width: 90%;height: auto;display: inline-block;font-size: 24px;font-weight: bold;line-height: 160%;color: #fff;text-align: center; } .isupbtn { width: auto;height: auto;display: inline-block;padding: 10px 20px;background-color: #D0AB50;font-size: 24px;font-weight: bold;line-height: 120%;color: #000;border-radius: 4px;margin-top: 15px; } /************************************************************************************ supreme membership *************************************************************************************/ .supmembersection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 60px 0px 100px 0px;background-color: #212121; } .supmemcardimg { width: 260px;height: auto;display: inline-block; } .supmemtick { width: 20px;height: auto;display: inline-block; } .supmemheader { width: 100%;height: auto;display: inline-block;font-size: 30px;font-weight: bold;line-height: 120%;color: #D0AB50;text-align: center;margin: 20px 0px; } .supmemheaderposh{ width: 100%; height: auto; display: inline-block; font-size: 26px; font-weight: bold; line-height: 140%; color: #D0AB50; text-align: center; margin: 10px 0px; } .supmemsubheader { width: 100%;height: auto;display: inline-block;font-size: 24px;font-weight: bold;line-height: 120%;color: #fff;text-align: center;margin: 0px 0px; } .supmemcontent { width: 100%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 120%;color: #fff;text-align: center; } .supmemlogo { width: 200px;height: auto;display: inline-block;border: 1px #7a7a7a solid;margin: 10px 20px;padding: 20px;border-radius: 10px; } .supmemdelights { width: 94%;height: auto;display: inline-block;border: 2px #D0AB50 solid;border-radius: 16px;padding: 10px;background-color: #242424; } .supmemiconfr { width: 100%;height: auto;display: inline-block;margin: 10px 0px; } .supmemicon { width: 60px;height: auto;display: inline-block;vertical-align: middle; } .supmemicontxt { width: 280px;;height: auto;display: inline-block;vertical-align: middle;line-height: 120%; } .supmemservicecol { width: 49%;height: auto;display: inline-block;vertical-align: top;text-align: center;margin-left: 0%; } /************************************************************************************ supreme offers *************************************************************************************/ .supoffersection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 60px 0px 100px 0px;background-color: #212121; } .supofferfrspace { line-height: 0%; } .supoffersetfr { width: 100%;height: auto;display: inline-block;background-color: #fff;line-height: 120%;position: relative; } .supofferset1a { width: 65%;height: auto;display: inline-block;float: left;overflow: hidden; } .supofferset1b { width: 35%;height: auto;display: inline-block;padding: 0px 20px;position: absolute;right: 0%;top: 50%;transform: translateY(-50%); } .supofferset2a { width: 65%;height: auto;display: inline-block;float: right;overflow: hidden; } .supofferset2b { width: 35%;height: auto;display: inline-block;padding: 0px 20px;position: absolute;left: 0%;top: 50%;transform: translateY(-50%); } .supoffertag { width: 55%;height: auto;display: inline-block; margin-bottom: 10px; -webkit-filter: drop-shadow(1px 0px 4px rgba(105, 83, 28, 0.50)); filter: drop-shadow(1px 0px 4px rgba(105, 83, 28, 0.50));} /*.tagshadow { box-shadow: 10px 10px 5px #000; -moz-box-shadow: 10px 10px 5px #000; -webkit-box-shadow: 10px 10px 5px #000; -khtml-box-shadow: 10px 10px 5px #000;}*/ .supofferheader { height: auto;display: inline-block;font-size: 30px;font-weight: bold;line-height: 120%;color: #000; margin-bottom:5px ;} .supoffercontent { width: 100%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 120%;color: #000; } .supofferpopupbg { background-image: url(../images/offerpopup-bg.webp);background-size: cover;background-repeat: no-repeat;background-position: center top;background-attachment: fixed; } .supofferpopupcontainer { width: 90%;height: auto;display: inline-block;text-align: center;padding: 20px 0px; } .suplistpopupcontainer { width: 100%;height: auto;display: inline-block;text-align: center;padding: 20px 0px; } .supofferpopupimgfr { width: 100%;height: auto;display: inline-block;text-align: center; } .supofferpopupimg { width: 80%;height: auto;display: inline-block; } .supofferpopupheader { width: 100%;height: auto;display: inline-block;font-size: 26px;font-weight: bold;line-height: 120%;text-align: center;padding: 40px 0px 20px 0px;margin-bottom: 20px;/*border-bottom: #D0AB50 1px solid;*/ } .supofferpopupsubheader { width: 100%;height: auto;display: inline-block;font-size: 26px;font-weight: bold;line-height: 120%; } .supofferpopupcontent { width: 100%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 140%;text-align: center; } .supofferpopupul { margin: 0px;padding-left: 25px; } .supofferpopupappicon { width: 80px;height: auto;display: inline-block; } .supofferpopupappqr { width: auto;height: auto;display: inline-block;vertical-align: middle;margin-right: 20px; } .supofferpopupappdlapp { width: 78%;height: auto;display: inline-block;vertical-align: middle; } .supofferdlappbadge { width: 150px;height: auto;display: inline-block;vertical-align: middle;margin-right: 20px;margin-top: 10px; border: 1px #fff solid;border-radius: 8px; } .supofferphoto { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .supofferphoto:hover { transform: scale(1.05); } .supofferremark { color:#000; font-size:12px;line-height: 120%;display: inline-block; } /************************************************************************************ supreme event *************************************************************************************/ .supeventsection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 60px 0px 100px 0px;background-color: #212121; } .supeventyrfr { width: 100%;height: auto;display: inline-block;text-align: center;margin: 10px 0px; } .supeventyr { width: auto;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 100%;color: #828282;margin: 0px 15px;vertical-align: middle;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .supeventyr:hover { color: #D0AB50;vertical-align: middle; } .supeventyron { width: auto;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 100%;color: #D0AB50;margin: 0px 15px;vertical-align: middle; } .supeventyrline { width: 1px;height: 50px;display: inline-block;background-color: #69531C;vertical-align: middle; } /************************************************************************************ supreme app *************************************************************************************/ .appsection1 { width: 100%;height: auto;display: inline-block;background-image: url(../images/app-bg01.webp);background-size: 100% auto;background-repeat: no-repeat;background-position: bottom;margin-top: 30px; } .appsection1L { width: 40%;height: auto;display: inline-block;text-align: left;vertical-align: middle; } .appsection1R { width: 58%;height: auto;display: inline-block;vertical-align: middle; } .appheader { width: 100%;height: auto;display: inline-block;font-size: 24px;font-weight: bold;color: #D0AB50;line-height: 140%; } .appcontent { width: 100%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 140%; } .appsection2 { width: 100%;height: auto;display: inline-block;margin: 100px 0px 0px 0px; } .appsection2T { width: 40%;height: auto;display: inline-block;text-align: right; } .appsection2B { width: 100%;height: auto;display: inline-block;text-align: center; } .appsection2img { width: 100%;height: auto;display: inline-block; } .appsection3 { width: 100%;height: auto;display: inline-block;background-image: url(../images/app-bg02.webp);background-size: 100% auto;background-repeat: no-repeat;background-position: top;margin-bottom: 30px;padding-top: 80px; } .appsection3fr { width: 440px;height: auto;display: inline-block;margin: 20px 10px 0px 10px;border: 1px #D0AB50 solid;position: relative; } .appsection3box { width: 90%;height: 130px;display: inline-block;padding: 20px 10px;position: absolute;left: 5%;bottom: -100px;background-color: #D0AB50; } .appsection3box1line { width: 90%;height: 60px;display: inline-block;padding: 20px 10px;position: absolute;left: 5%;bottom: -40px;background-color: #D0AB50; } .appboxheader { width: 100%;height: auto;display: inline-block;font-size: 24px;font-weight: bold;color: #000;line-height: 120%; } .appboxcontent { width: 100%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;color: #000;line-height: 120%; } .appsection3en { width: 100%;height: auto;display: inline-block;background-image: url(../images/app-bg02.webp);background-size: 100% auto;background-repeat: no-repeat;background-position: top;margin-bottom: 80px;padding-top: 80px; } .appsection3fren { width: 440px;height: auto;display: inline-block;margin: 20px 10px 0px 10px;border: 1px #D0AB50 solid;position: relative; } .appsection3boxen { width: 90%;height: 190px;display: inline-block;padding: 20px 10px;position: absolute;left: 5%;bottom: -100px;background-color: #D0AB50; } .appsection3box1lineen { width: 90%;height: 60px;display: inline-block;padding: 20px 10px;position: absolute;left: 5%;bottom: -40px;background-color: #D0AB50; } .appboxheaderen { width: 100%;height: auto;display: inline-block;font-size: 24px;font-weight: bold;color: #000;line-height: 120%; } .appboxcontenten { width: 100%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;color: #000;line-height: 120%; } .appsection4 { width: 100%;height: auto;display: inline-block;margin: 150px 0px 20px 0px; } .appmysupreme { width: 120px;height: auto;display: inline-block;margin: 0px 10px;vertical-align: middle; } .appdlbadge { width: 180px;height: auto;display: inline-block;border: 1px #fff solid;border-radius: 8px;margin: 0px 10px;vertical-align: middle; } .appheaderlabel { width: auto;height: auto;display: inline-block;padding: 5px 10px 8px 10px;background-color: #D0AB50;font-size: 20px;font-weight: bold;line-height: 100%;color: #000;border-radius: 50px; } .appdlappframe { width: auto;height: auto;display: inline-block;text-align: left;vertical-align: middle; } .appdlappframecoming { margin-left: 10px;margin-bottom: 5px; } .contactuspopup { width: 100%;height: 100px; position: fixed;left: 0px; bottom: 0px; text-align: center; z-index: 99; /*background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));*/ background-image: url(../images/app-dlbg.webp);background-size: cover;background-position: top; display: flex;justify-content: center;align-items: center;padding: 0px 20px; } .myftappiconfr { width: auto;height: auto;display: inline-block; } .myftappiconimg { width: auto;height: 60px;display: inline-block; } .myftdliconfr { width: auto;height: auto;display: inline-block;margin-left: 10px;font-size: 20px;font-weight: bold;line-height: 100%; } .myftdliconimg { width: auto;height: 40px;display: inline-block; } /************************************************************************************ supreme shoplist *************************************************************************************/ .supshoplistsection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 60px 0px 100px 0px;background-color: #212121; } .supshoplistfr { width: 31%; height: auto; text-align: center;display: inline-block;margin: 20px 10px 0px 10px;vertical-align: top; } .supshoplisttxtfr { width: 100%; height: 240px;; text-align: center;display: inline-block;background-color: #D0AB50;font-size: 18px;font-weight: bold;line-height: 130%;color: #000;padding: 20px 15px;text-align: left; } .supshoplisttxtfren { width: 100%; height: 250px;; text-align: center;display: inline-block;background-color: #D0AB50;font-size: 18px;font-weight: bold;line-height: 120%;color: #000;padding: 20px 15px;text-align: left; } .supshoplisticon { width: 5%;height: auto;display: inline-block;vertical-align: top; } .supshoplisticontxt { width: 93%;height: auto;display: inline-block;vertical-align: top;margin-top: 2px; } /************************************************************************************ supreme contactus *************************************************************************************/ .supcontactussection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 60px 0px 100px 0px;background-color: #212121; } .supcontactusbox { width: 70%; height: auto;display: inline-block;padding: 100px 10px;background-color: #404040;border-radius: 10px; background-image: url(../images/login-bg.webp);background-size: cover;background-position: center; box-shadow: 0px 5px 20px 6px #383838; } /************************************************************************************ supreme login *************************************************************************************/ .suploginsection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 60px 0px 100px 0px; } .suploginbg { background-image: url(../images/login-bg.webp);background-size: cover;background-repeat: no-repeat;background-attachment: fixed; } .suplogincontainer { width: 50%;height: auto;display:inline-block;position: relative;text-align: center;padding: 50px 0px 70px 0px;margin: 80px 0px 100px 0px;background-color: rgba(36,36,36,0.8);border-radius: 4px; } .suploginfr { width: 60%;height: auto;display: inline-block;text-align: center; } .suplogininput { background-color: #21212100 !important;border-top: none !important;border-left: none !important;border-right: none !important;border-radius: 0px !important;margin-bottom: 0px !important;padding: 16px 0px !important;outline: none; } .suplogintxt { width: 100%;height: auto;display: inline-block;text-align: center;font-size: 16px;line-height: 120%;color: #fff;margin-top: 20px;text-decoration: underline; } .suploginforgetbtn { width: 93%;height: auto;display: inline-block;text-align: center;font-size: 16px;line-height: 120%;color: #fff;padding: 15px 0px;border: 1px #fff solid;margin-top: 15px;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .suploginforgetbtn:hover { color: #D0AB50;padding: 15px 0px;border: 1px #D0AB50 solid; } .suploginfostepicon { width: 5%;height: auto;display: inline-block;margin-left: 2%;vertical-align: top;margin-top: 15px; } .suplogpwstepfr { width: 18%;height: auto;display: inline-block;margin: 0px 6px 15px 6px;vertical-align: top;text-align: center; } .suplogpwstepimg { width: 100%;height: auto;display: inline-block;margin-top: 5px; } .suplogpwsteptxt { width: 90%;height: auto;display: inline-block;margin-top: 10px;font-size: 18px;font-weight: bold;line-height: 120%;text-align: left; } .stepno { width: 30px;height: 30px;float: left;margin-right: 5px;border-radius: 100%;background-color: #D0AB50;color: #000;display: flex;justify-content: center;align-items: center;font-size: 18px;font-weight: bold;line-height: 100%; } /************************************************************************************ supreme network *************************************************************************************/ .supnetworksection1 { width: 100%; height: auto; text-align: center;display: inline-block;padding: 100px 0px 0px 0px;background-color: #212121; } .supnetworksection2 { width: 100%; height: auto; text-align: center;display: inline-block;padding: 260px 0px 100px 0px;background-color: #212121;background-image: url(../images/network-bg.webp);background-size: cover;background-position: top center;background-repeat: no-repeat; } .supnetworksection3 { width: 100%; height: auto; text-align: center;display: inline-block;padding: 120px 0px 180px 0px;background-color: #212121;background-image: url(../images/network-bg2.webp);background-size: cover;background-position: bottom center;background-repeat: no-repeat; } .supnetworksection4 { width: 100%; height: auto; text-align: center;display: inline-block;padding: 100px 0px 130px 0px;background-color: #212121; } .supnetworkvideocontainer { width: 80%;height: auto;display: inline-block; } .supnetworkvideofr { width: 80%;height: auto;display: inline-block; } .supnetvideocontainer { position: relative;width: 80%;height: 0;padding-bottom: 45.1%; } .supnetvideo { position: absolute;top: 0;left: 0;width: 100%;height: 100%; } .supnettxtbox { width: 100%;height: auto;display: inline-block;padding: 80px 180px;border: 2px #D0AB50 solid;border-radius: 4px; background-color: rgba(255,255,255,0.5);font-size: 24px;font-weight: bold;line-height: 160%;color: #000;text-align: center;position: relative; } .supnettxtbtn { width: 30%;height: auto;display: inline-block;background-color: #D0AB50;font-size: 20px;font-weight: bold;line-height: 120%;color: #000;border-radius: 4px;padding: 20px 40px;position: absolute;left: 35%;bottom: -35px;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .supnettxtbtn:hover { background-color: #d7b55e; } .supnetofferbox { width: 46%;height: 320px;display: inline-block;padding: 46px 20px;margin: 0px 10px;position: relative;text-align: left;vertical-align: top;margin-top: 30px; background-size: 240px, cover; background-position: right 6% top 68%, center; background-repeat: no-repeat,no-repeat; border: 1px #D0AB50 solid;border-radius: 20px; } .supnetofferboxheader { width: 100%;height: auto;display: inline-block;font-size: 30px;font-weight: bold;color: #fff;line-height: 120%;margin-bottom: 16px; } .supnetofferboxheaderlogo { width: auto;height: 52px;display: inline-block;vertical-align: -14px; } .supnetofferboxtxt { width: 60%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;color: #fff;line-height: 120%;margin-left: 17px; } .supnetofferbtn { width: 200px;height: auto;display: inline-block;background-color: #212121;font-size: 20px;font-weight: bold;line-height: 120%;color: #fff;text-align: center;border-radius: 4px;padding: 14px 0px;position: absolute;left: 37px;bottom: 11%;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .supnetofferbtn:hover { background-color: #D0AB50;color: #000; } /************************************************************************************ supreme *************************************************************************************/ .homevideosection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 100px 30px;background-image: url(../images/homevideo-bg.webp);background-size: cover;background-repeat: no-repeat;background-position: center bottom; } .homebrandstorysection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 180px 30px;background-image: url(../images/brandstory-bg.webp);background-size: cover;background-repeat: no-repeat;background-position: center; } .homeexcoffersection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 10px 0px 0px 0px; /*background-image: linear-gradient(rgb(229, 229, 229) 0%, rgb(250, 250, 250) 3%);*/} .homeexcoffersectionplain { width: 100%; height: auto; text-align: center;display: inline-block;padding: 10px 0px 0px 0px;} .homedlappsection { width: 100%; height: auto; text-align: center;display: inline-block;padding: 100px 0px;background-image: url(../images/dlapp-bg.webp);background-size: cover;background-repeat: no-repeat;background-position: center; } .tablewidthcontent { width: 88%;max-width: 1600px;display: inline-block;text-align: left; } .tablewidth { width: 88%;max-width: 1100px;display: inline-block; } .spheader { width: 88%;max-width: 1100px;height: auto;display: inline-block;font-size: 30px;font-weight: bold;line-height: 120%;color: #D0AB50;text-align: center;margin-bottom: 40px; } .spcontent { width: 88%;max-width: 1100px;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 120%;color: #ffffff;text-align: center;margin-bottom: 30px; } .spheaderlinefr { width: 15%;height: auto;display: inline-block;vertical-align: bottom;margin: 0px 18px; } .spheaderline { background-color: #D0AB50; height: 1px; border: 0; } .spstorybtn { width: auto;height: auto;display: inline-block;padding: 10px 20px;background-color: #D0AB50;font-size: 18px;font-weight: bold;line-height: 120%;color: #000;border-radius: 4px;margin-top: 15px; } .spstorypopupimg { width: 100%;height: auto;display: inline-block; } .excphoto { width: 100%;height: auto;display: inline-block; } .exciconcontainer { width: 100%;height: auto;display: inline-block;margin: 80px 0px 100px 0px; } .exciconframe { width: 18%;height: auto;display: inline-block;vertical-align: top;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .exciconframe:hover { transform: scale(1.1); } .excicontxt { width: 100%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 120%;color: #D0AB50;margin-top: 20px; } .exclofferphoto { } .dlappiconframe { width: 100%;height: auto;display: inline-block; } .dlappicon { width: 120px;height: auto;display: inline-block;vertical-align: middle;margin-right: 20px; } .dlappicontxt { width: auto;height: auto;display: inline-block;vertical-align: middle;font-size: 28px;font-weight: bold;line-height: 120%;color: #D0AB50; } .dlappbadgeframe { width: 100%;height: auto;display: inline-block;margin-top: 30px; } .dlappbadge { width: 200px;height: auto;display: inline-block;vertical-align: middle;margin-right: 20px;border: 1px #fff solid;border-radius: 8px; } .dlappphone { width: 280px;height: auto;display: inline-block;position: absolute;bottom: -40%;right: 8%; } .suptotalkcontainer { width: 100%;display: inline-block;position: fixed;bottom: 20%;left: 0%;text-align: center;margin-bottom: 1%;z-index: 999; } .suptotalkframe { width: 88%;max-width: 1600px;height: 1px;display: inline-block;text-align: right; } .suptotalkicon { width: 110px;height: auto;display: inline-block;float: right;margin-right: 1%;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .suptotalkicon:hover { transform: scale(1.1); } /************************************************************************************ table *************************************************************************************/ .set1table { border-collapse: collapse; border: 2px solid #dbdbdb; padding: 0px; text-align: center; font-size: 16px; line-height: 110%; font-weight: normal; padding: 12px 10px; } .set1tabless { border-collapse: collapse; border: 1px solid #D0AB50; padding: 0px; text-align: center;font-size: 20px;line-height: 120%;font-weight: 600;padding: 12px 10px; } .set1tablenormal { font-weight: normal; } .set1tabletitle { background: #000; border-left: #000 1px solid; border-right: #000 1px solid;text-align: center;font-size: 20px;border-top: 1px #8b6f2b solid;border-bottom: 1px #8b6f2b solid;background-color: #8b6f2b5c; } .set1tableheaderso { background-image: linear-gradient(to right, #293794 , #009aa9) !important; color: #fff; } .set1tableL { background: #e4eff5; border-left: #fff 2px solid; text-align: left; } .set1tableR { background: #fff; border-right: #fff 2px solid; } .set1tableheader { background-color: #8B6F2B; color: #fff; } .set1tableheader2 { background: #000; color: #000; } .set1tableheaderprc { background: #000;color: #fff;font-weight: bold;font-size: 120% !important; } .set1tablehighlgt { color: #D0AB50; } .set1tableheaderprcso { background-image: linear-gradient(to right, #293794 , #009aa9) !important; color: #fff; font-weight: bold; font-size: 120% !important; } /************************************************************************************ video n news *************************************************************************************/ .homevideoframe { width: 100%;max-width: 1400px; height: auto; text-align: center;display: inline-block;vertical-align: top;padding: 0px 0px;margin-top: 60px; display: inline-block; } .homevideoslideframeL { width: 50%;height: auto;display: inline-block;vertical-align: top;float: left;padding: 0px 0px;/*border-right: #f4f4f4 2px solid; */} .homevideoslideframeC { width: 33.3%;height: auto;display: inline-block;vertical-align: top;float: left;padding: 10px 0px;/*border-right: #f4f4f4 2px solid; */} .homevideoslideframeR { width: 50%;height: auto;display: inline-block;vertical-align: top;float: left;padding: 0px 0px; } .homevideoslide { width: 76%;height: auto;display: inline-block;position: relative; } .homevideoslidetxtframe { width: 100%;height: auto;padding: 26px 10px;text-align: center;position: relative; /*background-color: #D0AB50;*/ } .homevideoslidetxtbg { width: 80%;height: auto;padding: 20px 10px;text-align: center;background-color: #fff;position: absolute;left: 10%;bottom: 1%; } .homevideoslidetitle { width: 100%;height: auto;display: inline-block;text-align: center;font-size: 24px;font-weight: bold;line-height: 120%;color: #000; } .homevideoslidetxt { width: 100%;height: auto;display: inline-block;text-align: center;font-size: 20px;font-weight: bold;line-height: 120%;color: #000; } .swiper-container2 { margin-left: auto;margin-right: auto;padding: 0px 0px;overflow: hidden;position: relative; } .swiper-container2 .swiper-slide { width: 90%; } .homenewsframe { width: 100%; height: auto; text-align: left;display: inline-block;vertical-align: top;padding: 40px 30px;background-image: url(../images/newsbg.jpg);background-size: cover;background-repeat: no-repeat;background-position: right top; } .homenewstitle { font-size: 34px;font-weight: bold; color: #50489b;line-height: 100%;margin-bottom: 30px; } .homenewsbanner { width: 33.33333%;height: auto;display: inline-block;margin: 0px 0px 0px 0px;text-align: center; } .homenewsbannerinsd { transform: scale(1);width: 80%;height: 600px;display: inline-block;background-size: cover;background-repeat: no-repeat;background-position: center;text-align: center;position: relative;overflow: hidden;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .homenewsbannerinsd:hover { transform: scale(1.04); } .homenewsbannerspc { width: 2%;height: auto;display: inline-block;float: left; } .homenewsbannertitle { font-size: 20px;font-weight: bold;line-height: 120%;color: #fff;width: 100%;height: 110px;padding: 30px 16px; text-align: left;background-color: rgba(208,171,80,0.7); position: absolute;left: 0%;bottom: 0%; } .homenewsbannertitleen { font-size: 17px;font-weight: bold;line-height: 110%;color: #fff;width: 100%;height: 110px;padding: 20px 16px; text-align: left;background-color: rgba(208,171,80,0.7); position: absolute;left: 0%;bottom: 0%; } .homenewsbannerbutframe { width: 100%;height: auto;text-align: center; position: absolute;bottom: 30px; } .homenewsbannerbut { font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;text-shadow: 0px 0px 5px #000; padding: 10px 30px;display: inline-block;border-radius: 8px;background-image:url(../images/bg-button.jpg);background-size: 100%;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .homenewsbannerbut:hover { background-size: 150%; } /************************************************************************************ main sliderVIDEO *************************************************************************************/ .starvideocontainer { position: relative;width: 100%;height: 0;padding-bottom: 56.3%; } .starvideo { position: absolute;top: 0;left: 0;width: 100%;height: 100%; } .digiboxvideocontainer { position: relative;width: 100%;height: 0;padding-bottom: 28.7%; } /************************************************************************************ crisis *************************************************************************************/ .crstopmsgfr { width: 100%;height: auto;display: inline-block;background-color: #000000;padding: 15px 0px;text-align: center; } .crstopmsgtxt { width: 92%;max-width: 1600px;height: auto;display: inline-block;font-size: 16px;font-weight: bold;line-height: 120%;color: #ffffff;text-align: left; } .crstopclose { width: auto;height: auto;display: inline-block;vertical-align: top; } .crspopmsgfr { width: 800px;height: auto;display: inline-block;font-size: 20px;line-height: 140%; } /************************************************************************************ 3bizfd *************************************************************************************/ .bizfdgrid-container { display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto;grid-gap: 20px;margin-top: 20px;margin-bottom: 8px; } .bizfdtoplag { width:auto;height: 90px;display: flex;justify-content: center;align-items: center;float: right; } .bizfdsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 60px 130px;text-align: center; } .bizfdcontent { width: 100%;height: auto;display: inline-block;font-size: 22px;font-weight: bold;line-height: 120%;vertical-align: top;margin-bottom:40px;text-align: center; } .bizfdofferfr { width: 100%;height: auto;display: inline-block;text-align: center;background-color: #fbfaf9; } .bizfdoffertitle { width: 96%;height: auto;display: inline-block;font-size: 22px;font-weight: bold;line-height: 120%;text-align: center;margin: 15px 0px; } .bizfdoffertitleen { width: 96%;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 120%;text-align: center;margin: 15px 0px; } .bizfdoffertitlebold { width: auto;height: auto;display: inline-block;font-size: 32px;line-height: 100%;color: #98815f; } .bizfdoffertitlebolden { width: auto;height: auto;display: inline-block;font-size: 30px;line-height: 100%;color: #98815f; } .bizfdrm { width: 90%;height: auto;display: inline-block;font-size: 12px;font-weight: normal;line-height: 120%;text-align: left;margin: 15px 0px;vertical-align: top; } .bizfdul { padding-left: 18px; } .bizfdwarningfr { width: 100%;height: auto;display: inline-block;margin-bottom: 20px; } .bizfdbtn { font-size: 22px;font-weight: bold;line-height: 100%;color: #fff;padding: 12px 40px;display: inline-block;border-radius: 8px;vertical-align: middle;margin-top: 5px;background-color: #98815f; cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .bizfdbtn:hover { background-color: #b19469; } .bizfdbtnen { font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;padding: 12px 40px;display: inline-block;border-radius: 8px;vertical-align: middle;margin-top: 5px;background-color: #98815f; cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .bizfdbtnen:hover { background-color: #b19469; } .activeframe { width: 100%;height: auto;display: inline-block;position: relative;background: #f7f4f2;padding: 5px 0px;/*box-shadow: 0px 5px 11px #e1e1e1;*/ color: #000;text-align: center;border-radius: 10px;margin-bottom: 40px; } .activetitle { width: auto;height: auto;display: inline-block;font-size: 24px;font-weight: bold;line-height: 120%;vertical-align: middle;margin-right: 10px; } .activetitleen { width: auto;height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 120%;vertical-align: middle;margin-right: 10px; } .activetxt { font-size: 20px;font-weight: bold; line-height: 120%;width: 190px; display: inline-block;text-align: center;vertical-align: middle; } .activebtn { font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;padding: 13px 30px;display: inline-block;border-radius: 8px;vertical-align: middle;background-color: #98815f;margin-left: 10px; cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .activebtn:hover { background-color: #b19469; } .activebtn:active { transform: translateY(3px); } .activebtnen { font-size: 16px;font-weight: bold;line-height: 100%;color: #fff;padding: 13px 30px;display: inline-block;border-radius: 8px;vertical-align: middle;background-color: #98815f;margin-left: 10px; cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .activebtnen:hover { background-color: #b19469; } .activebtnen:active { transform: translateY(3px); } /************************************************************************************ all css *************************************************************************************/ .spectab { width: 100%;display: inline-block;font-size: 22px;line-height: 120%;font-weight: bold; CURSOR: pointer; border-bottom: #000 2px solid; padding-bottom: 10px;margin-bottom: 10px; text-align: left; margin: 0 0.5%;} .spectabtxt { display: inline-block;width: 85%; } .spectabimg { width: 18px;height: auto; float: right;padding: 0px 0px 0px 0px;display: inline-block;} .networksup { color: #4e84a3 !important;font-weight: bold; } /************************************************************************************ whatsnew *************************************************************************************/ .whatsnewsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 60px 30px;text-align: left; } .whatsnewframe { width: 100%; height: auto;display: inline-block; margin-bottom: 40px; } .whatsnewcolL { width: 30%;height: auto;display: inline-block;margin-right: 1%;vertical-align: middle; } .whatsnewcolR { width: 67%;height: auto;display: inline-block;font-size: 18px;font-weight: bold;line-height: 120%;vertical-align: middle; } .whatsnewcol1 { width: 100%;height: auto;display: inline-block;font-size: 18px;font-weight: bold;line-height: 120%;vertical-align: middle; } /************************************************************************************ location *************************************************************************************/ .covertitle { width: 100%;display: inline-block;padding: 10px 3px;font-size: 18px;font-weight: bold;color: #000000;background: #f5f5f5; } .coverloc { width: 12%;display: inline-block;padding: 5px 3px;border-right: #c3c3c3 1px solid;margin: 3px 0px;text-align: left;font-size: 16px;font-weight: bold; line-height: 110%;vertical-align: middle; } .coverhighlight { background: #ff0097;color: #ffffff !important; } .conponappicon { width: 50px;vertical-align: -13px; } /************************************************************************************ FAQ *************************************************************************************/ .faqframe { display: inline-block;padding-bottom: 20px;width: 100%; } .faqimg { width: 90px;height: auto; line-height: 0%;display: inline-block;vertical-align: middle; } .faqcontent { width: 90%;padding-left: 10px; font-size: 18px; line-height: 120%;display: inline-block;vertical-align: middle; } /************************************************************************************ DIGIBOX *************************************************************************************/ /*.digiboxmapbottomfix { width: 100%;max-width: 1600px;height: auto;position: fixed;bottom: 16%;z-index: 20;text-align: right;padding-right: 40px; }*/ .digiboxmapbottomfix { width: auto;max-width: 1600px;height: auto;position: fixed;bottom: 16%;right: 7%; z-index: 20;text-align: right;padding-right: 40px; } .digiboxmapani { width: 180px;height: auto;display: inline-block;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .digiboxmapani:hover { width: 400px;height: auto; } .digiboxmapframe { width: 100%;height: auto;display: inline-block;position: relative; } .digiboxmapimg { width: 100%;height: auto; } .digiboxmapover { background-color: #FFFF00;opacity: 0;border-radius: 200px; position: absolute;cursor: pointer; } .digiboxtitleframe { width: auto;height: auto;display: inline-block; } .digiboxtitle { width: auto;height: auto; font-size: 34px;font-weight: bold;color: #000;line-height: 100%;margin-bottom: 30px;background: linear-gradient(to right, rgba(76, 187, 172, 1), rgba(80, 72, 155, 1));-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: block; } .digihomecolL { width: 58%;height: auto;display: inline-block;margin-right: 2%;font-size: 18px;font-weight: bold;line-height: 120%;vertical-align: top; } .digihomecolR { width: 40%;height: auto;display: inline-block;vertical-align: top;float: right; } .digitablescroll { } .digitablewidthicon { width: 100%; } .digitablewidthiconen { width: 100%; } .digitablewidthicon2 { width: 100%; } .digitablewidthicon2en { width: 100%; } .digitablewidthicon3 { width: 100%; } .digitablewidthicon3en { width: 100%; } .digitablewidthicon4 { width: 100%; } .digitablewidthicon4en { width: 100%; } .digiiconbut { width: auto;height: auto;display: inline-block; font-size: 15px;font-weight: bold;color: #fff; line-height: 100%; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .digiiconbut:hover { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .digiiconbuton { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .digicontactsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 60px 30px;text-align: left; } .digititle { font-size: 34px;font-weight: bold;color: #000;line-height: 100%;margin-bottom: 30px; } .digicolL { width: 40%;height: auto;display: inline-block;margin-right: 2%;vertical-align: top; } .digicolR { width: 58%;height: auto;display: inline-block;font-size: 18px;font-weight: bold;line-height: 120%;vertical-align: top;float: right; } .digipt { font-size: 18px;font-weight: bold;line-height: 180%;padding-left: 24px;margin-top: 10px;margin-bottom: 30px; } .digibut { font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;text-shadow: 0px 0px 5px #000; padding: 10px 30px;margin-top: 20px; display: inline-block;border-radius: 8px;background-image:url(../images/bg-button.jpg);background-size: 100%;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .digibut:hover { background-size: 150%; } .digilogoframe { width: 16%;height: auto;display: inline-block;margin: 10px 12px 20px 12px; } .digizoL { width: 24%;height: auto;display: inline-block;vertical-align: top; } .digizoM { width: 2%;height: auto;display: inline-block;vertical-align: top; } .digizoR { width: 72%;height: auto;display: inline-block;vertical-align: top; } .digiboxlogo { width: auto;height: 100px;display: inline-block;margin-bottom: 30px; } .digitablescroll { } .digitablewidthicon { width: 100%; } .digitablewidthiconen { width: 100%; } .digiiconbut { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .digiiconbut:hover { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .digiiconbuton { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .digiiconpdarrow { width: auto;height: auto;font-size: 16px;font-weight: bold;color: #fff; line-height: 100%;padding: 10px 0px;color: #fff; display: inline-block; cursor: pointer; background-image: url(../images/arrow-off.svg); background-repeat: no-repeat; background-position: right 3% bottom 45%; background-size: 9px; transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s; } .digiiconpdarrow:hover { color: aqua;background-image: url(../images/arrow-on.svg);background-position: right 0% bottom 45%; } .digiiconbut2 { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; background-color: #434448;scroll-snap-align: center; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .digiiconbut2on { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .digisubmenudisplaypc { display: inline; } .digisubmenudisplaymob { display: none; } /************************************************************************************ solution VIDEO *************************************************************************************/ .slvideocontainer { position: relative;width: 40%;height: 0;padding-bottom: 22.3%;display: inline-block;margin-right: 15px; } .slvideo { position: absolute;top: 0;left: 0;width: 100%;height: 100%; } /************************************************************************************ hkpc *************************************************************************************/ .hkpctablewidthicon { width: 100%; } /************************************************************************************ Robotic *************************************************************************************/ .robtablescroll { } .robtablewidthicon { width: 100%; } .robtablewidthiconen { width: 100%; } .robiconbut { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .robiconbut:hover { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .robiconbuton { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .robiconpdarrow { width: auto;height: auto;font-size: 16px;font-weight: bold;color: #fff; line-height: 100%;padding: 10px 0px;color: #fff; display: inline-block; cursor: pointer; background-image: url(../images/arrow-off.svg); background-repeat: no-repeat; background-position: right 3% bottom 45%; background-size: 9px; transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s; } .robiconpdarrow:hover { color: aqua;background-image: url(../images/arrow-on.svg);background-position: right 0% bottom 45%; } .robiconbut2 { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; background-color: #434448;scroll-snap-align: center; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .robiconbut2on { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } /************************************************************************************ Solution *************************************************************************************/ .soltablescroll { } .soltablewidthicon { width: 100%; } .soltablewidthiconen { width: 100%; } .soliconbut { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .soliconbut:hover { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .soliconbuton { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .soliconpdarrow { width: auto;height: auto;font-size: 16px;font-weight: bold;color: #fff; line-height: 100%;padding: 10px 0px;color: #fff; display: inline-block; cursor: pointer; background-image: url(../images/arrow-off.svg); background-repeat: no-repeat; background-position: right 3% bottom 45%; background-size: 9px; transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s; } .soliconpdarrow:hover { color: aqua;background-image: url(../images/arrow-on.svg);background-position: right 0% bottom 45%; } .soliconbut2 { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; background-color: #434448;scroll-snap-align: center; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .soliconbut2on { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .solframe { width: 100%; display: inline-block; text-align: left; } .solstepimg { width: 21%; display: inline-block; text-align: center; vertical-align: middle; } .solsteparrow { width: 20px;display: inline-block;vertical-align: middle; } .solsteparrowrotate { transform: rotate(0deg); } .solsubmenudisplaypc { display: inline; } .solsubmenudisplaymob { display: none; } /************************************************************************************ 3education *************************************************************************************/ .dropdown { display: inline-block;overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none;outline: none;color: #000;padding: 9px 16px;background-color: inherit;font: inherit;margin: 0; } /*.dropdown:hover .dropbtn { background-color: red; }*/ .dropdown-content { display: none;position: absolute;background-color: #555658;width: auto;height: auto; padding: 10px 15px;margin: 12px 0px 0px -15px; text-align: left;box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .edutablewidthicon { width: 100%; } .edutablewidthiconen { width: 100%; } .eduiconbut { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .eduiconbut:hover { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .eduiconbuton { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .eduiconpd { width: 100%;height: auto;font-size: 14px;font-weight: bold;color: #fff; line-height: 100%;padding: 10px 0px; } .eduiconpd:hover { color: aqua; } .edutablescroll { } .eduiconbut2 { width: auto;height: auto;display: inline-block; font-size: 16px;font-weight: bold;color: #fff; line-height: 100%; background-color: #434448;scroll-snap-align: center; text-align: center;cursor: pointer;padding: 12px 15px;display: inline-block;vertical-align: top;float: left; } .eduiconbut2on { background-image: url(../images/bg-button.jpg);background-size: 100% 100%;background-repeat: no-repeat;background-position: center; } .dropdown-content2 { /*position: absolute;*/ left: 0px; background-color: #555658;width: 100%;height: auto; padding: 10px 15px;margin: 0px 0px 0px 0px; text-align: left;box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);z-index: 9999; } .educontactsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 60px 30px;text-align: left; } .edutitle { font-size: 34px;font-weight: bold;color: #000;line-height: 100%;margin-bottom: 30px; } .educolL { width: 58%;height: auto;display: inline-block;margin-right: 2%;font-size: 18px;font-weight: bold;line-height: 120%;vertical-align: top; } .educolR { width: 40%;height: auto;display: inline-block;vertical-align: top;float: right; } .edupt { font-size: 18px;font-weight: bold;line-height: 180%;padding-left: 24px;margin-top: 10px;margin-bottom: 30px; } .edubut { font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;text-shadow: 0px 0px 5px #000; padding: 10px 30px;margin-top: 20px; display: inline-block;border-radius: 8px;background-image:url(../images/bg-button.jpg);background-size: 100%;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .edubut:hover { background-size: 150%; } .eduiconpdarrow { width: auto;height: auto;font-size: 16px;font-weight: bold;color: #fff; line-height: 100%;padding: 10px 0px;color: #fff; display: inline-block; cursor: pointer; background-image: url(../images/arrow-off.svg); background-repeat: no-repeat; background-position: right 3% bottom 45%; background-size: 9px; transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s; } .eduiconpdarrow:hover { color: aqua;background-image: url(../images/arrow-on.svg);background-position: right 0% bottom 45%; } .edusubmenudisplaypc { display: inline; } .edusubmenudisplaymob { display: none; } /************************************************************************************ handset plan *************************************************************************************/ .hsplancontactsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 60px 30px;text-align: center; } .hsplancttitleframe { width: auto;height: auto;display: inline-block;vertical-align: middle;margin-right: 40px; } .hsplancttitle { width: auto;height: auto; font-size: 48px;font-weight: bold;line-height: 100%; background: linear-gradient(to right, rgba(76, 187, 172, 1), rgba(80, 72, 155, 1));-webkit-background-clip: text;-webkit-text-fill-color: transparent; display: block; } .hsplancttitleen { width: auto;height: auto; font-size: 36px;font-weight: bold;line-height: 140%; background: linear-gradient(to right, rgba(76, 187, 172, 1), rgba(80, 72, 155, 1));-webkit-background-clip: text;-webkit-text-fill-color: transparent; display: block; } .hsplanctbut { font-size: 24px;font-weight: bold;line-height: 100%;color: #fff;text-shadow: 0px 0px 5px #000; padding: 16px 60px;display: inline-block;border-radius: 8px;vertical-align: middle;margin-top: 5px; background-image:url(../images/bg-button.jpg);background-size: 100%;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .hsplanctbut:hover { background-size: 150%; } .phone5gsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 40px 30px;background-image: url(../images/bg-homevideo.jpg);background-size: auto 100%;background-repeat: no-repeat;text-align: center; } .swiper-container7 {margin-left: auto;margin-right: auto;position: relative;overflow: hidden;z-index: 1;} .p9sliderframe { width: 100%;height: auto;display: inline-block; } .phone5gframe { transform: scale(0.95); position: relative;width: 14%;height: auto; line-height: 100%;text-align: left;display: inline-block;margin: 0px 46px 0px 46px;vertical-align: top; cursor: default; transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s; } .phone5gframe:hover { transform: scale(1); } .phonedetailbut { font-size: 14px;font-weight: bold;color: #fff; background-color: #000; margin: 0px 0px 0px 0px; padding: 0px 15px 0px 15px; cursor: pointer; display: inline-block; text-align: center;padding: 10px;margin-top: 10px; } .phone5gpdtname { width: 100%;height: 85px; font-size: 18px;font-weight: bold;display: inline-block;text-align: left;line-height: 120%;color: #fff;border-left: 2px solid #fff;padding-left: 8px; } .phone5gpdtimg { width: 100%;height: auto;display: inline-block; } .hsplantitle { font-size: 34px;font-weight: bold; color: #fff;line-height: 100%;margin-bottom: 30px;text-shadow: 0px 0px 8px #000; } .hsplanbut { font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;padding: 15px 90px;margin-top: 10px; display: inline-block;border-radius: 8px;border: 2px #fff solid; cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .hsplanbut:hover { background-color: #479eb1; } .hsplanremarkL { font-size: 12px;font-weight: bold;color: #fff;line-height: 100%;display: inline-block;float: left; } .hsplanremarkR { font-size: 12px;font-weight: bold;color: #fff;line-height: 100%;display: inline-block;float: right; } /************************************************************************************ sme *************************************************************************************/ .smecontactsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 60px 30px;text-align: center; } .smetablewidthicon { width: 100%;margin-bottom: 30px; } .smetablewidthiconen { width: 100%;margin-bottom: 30px; } .smeiconbut { width: auto;height: 35px;display: inline-block; font-size: 18px;font-weight: bold;line-height: 100%; text-align: center;cursor: pointer;margin: 0px 30px;display: inline-block;vertical-align: top; } .smeiconbut:hover { background-image: url(menuline.png);background-size: 100% 4px;background-repeat: no-repeat;background-position: bottom; } .smeiconbuton { background-image: url(menuline.png);background-size: 100% 4px;background-repeat: no-repeat;background-position: bottom; } .smetablewidthplan4 { width: 100%;padding-bottom: 10px; } .smetablewidthplan3 { width: 100%;padding-bottom: 10px; } .smetablewidthplan2 { width: 100%;padding-bottom: 10px; } .smetablewidthplan1 { width: 100%;padding-bottom: 10px; } .smecontentcol4 { width: 23.6%;height: auto;display: inline-block; text-align: center;display: inline-block;vertical-align: top;padding: 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgsmeplan.jpg);background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat; } .smecontentcol3 { width: 32%;height: auto;display: inline-block; text-align: center;display: inline-block;vertical-align: top;padding: 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgsmeplan.jpg);background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat; } .smecontentcol2 { width: 48.5%;height: auto;display: inline-block; text-align: center;display: inline-block;position: relative;vertical-align: top;padding: 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgsmeplan.jpg);background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat; } .smecontentcol1 { width: 60%;height: auto;display: inline-block; text-align: center;display: inline-block;vertical-align: top;padding: 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgsmeplan.jpg);background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat; } .smeplantitle { width: 99.5%;height: auto;display: inline-block;font-size: 34px;font-weight: bold;line-height: 100%;color: #50489b;text-align: left; } .smeplanptframe { width: 99.5%;height: auto;display: inline-block;background: #f2f2f2;text-align: left;margin: 15px 0px; } .smeplanpttxtframe { width: auto;height: auto;display: inline-block;padding: 20px;text-align: left; } .smeplanpttxtul { margin: 0px;padding-left: 20px;line-height: 160%;font-size: 18px;font-weight: bold; } .smetdtitle { font-size: 24px;font-weight: bold;line-height: 100%;width: 100%;height: auto; } .smetdpricetxt { font-size: 18px;font-weight: bold;line-height: 100%;display: inline-block;margin: 25px 0px;width: auto;height: auto; } .smetdprice1 { font-size: 24px;font-weight: bold;line-height: 100%;color: #50489b;display: inline-block;vertical-align: 6px; } .smetdprice2 { font-size: 34px;font-weight: bold;line-height: 100%;color: #50489b;display: inline-block; } .smetdsubtitle { font-size: 18px;font-weight: bold;line-height: 100%;display: inline-block;width: 100%;height: auto;margin-bottom: 15px; } .smeiconframe { width: 60%;height: 70px;display: inline-block;text-align: left;margin: 15px 0px; } .smeiconframeen { width: 70%;height: 70px;display: inline-block;text-align: left;margin: 15px 0px; } .smeiconimg { width: 60px;height: 60px;display: inline-block;vertical-align: middle; } .smeicontxt { width: 72%;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;line-height: 120%; } .smeicontxten { width: 72%;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;line-height: 120%; } .smeicontxtbold { font-size: 24px;font-weight: bold;line-height: 100%; } .smecontenttitleXL { font-size: 18px;font-weight: bold;line-height: 100%;width: 40%;height: auto;display: inline-block;vertical-align: bottom;text-align: left;margin: 10px 0px; padding-left: 20px; } .smecontentcontentXL { font-size: 44px;font-weight: bold;line-height: 100%;color: #50489b; width: 60%;height: auto;display: inline-block;vertical-align: bottom;text-align: right;margin: 10px 0px; padding-right: 20px; } .smecontenttxtframe { width: 100%;height: auto;display: inline-block; } .smecontenttitle { font-size: 18px;font-weight: bold;line-height: 100%;width: auto;height: auto;display: inline-block;vertical-align: bottom;text-align: left;margin: 10px 0px; padding-left: 20px;float: left; } .smecontentcontent { font-size: 18px;font-weight: bold;line-height: 100%;width: auto;height: auto;display: inline-block;vertical-align: bottom;text-align: right;margin: 34px 0px; padding-right: 20px;float: right; } .smetablewidthpdt { width: 100%;padding-bottom: 10px; } .smepdtbanner { width: 32%; height: auto;display: inline-block;box-shadow: 0px 0px 5px #989898;cursor: pointer;float: left; } .smepdtbannerspc { width: 2%; height: auto;display: inline-block;float: left; } .smeplanbgtitle { font-size: 18px;font-weight: bold;color: #fff; line-height: 100%;display: inline-block;width: auto;height: auto;border-radius: 6px; background-color: #4d9da8; /*background-image: url(../images/bg-plantitle.jpg);background-size: 100% 100%;*/padding: 10px 20px; } .smeplanpdtframe { width: 100%;height: auto;display: inline-block;text-align: center;margin: 5px 0px; } .smeplanpdtimg { width: 100px;height: auto;display: inline-block;vertical-align: middle; } .smeplanpdttxt { width: 40%;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;line-height: 120%;text-align:left; } .smeplanpdttxt2 { width: 100%;height: auto;display: inline-block;vertical-align: middle;font-size: 24px;font-weight: bold;line-height: 120%;text-align:center; } .smeplandayicon { width: 100px;height: auto;display: inline-block;position: absolute;top: 20px;right: 20px; } .smeplanbbheight { height: 1200px; } .smeplanbbtablewidthplan2 { width: 100%;padding-bottom: 10px; } .smeroutorcontainer { width: 100%;height: auto;display: inline-block;text-align: center; } .smeroutorframe { width: 16%;height: auto;display: inline-block;vertical-align: top;margin: 0px 10px; } .smeroutorcontent { width: 100%;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;color: #000; line-height: 120%;text-align:center;margin-bottom: 30px; } .smeroutortxt { width: 100%;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;color: #000; line-height: 120%;text-align:center; } .spectable { border-collapse: collapse; border: 2px solid #000000; padding: 0px; text-align: center;font-size: 16px;line-height: 100%;font-weight: bold;margin-bottom: 30px; } .spectitletd { font-size: 16px;line-height: 120%; color: #8e8e8e; padding: 12px 10px;border-left: #ffffff 2px solid;text-align: left;font-weight: normal;width: 25%;vertical-align: top; } .spectitletdtop { } .spectitletdtoppc { border-top: #fff 2px solid; } .speccontenttd { font-size: 16px;line-height: 120%; color: #000000; padding: 12px 10px;border-right: #ffffff 2px solid;text-align: left;font-weight: normal;width: 75%; } .specul { padding-left: 18px; } .smegrid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-gap: 20px; padding: 5px; } .smecontentcolfull { width: 100%;height: auto;display: inline-block; text-align: center;display: inline-block;position: relative;vertical-align: top;padding: 0px 0px 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgsmeplan.jpg);background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat; } .smebbplanframe { background-image: url(../images/bg-plantitle.jpg);background-size: 100% 100%;width: 100%; height: auto;display: inline-block;vertical-align: top;margin: 0px;padding: 15px 0px 15px 0px;color: #fff;position: relative; } .smebbplantitle { width: auto;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;line-height: 120%; position: relative; } .smebbplantitlebold { font-size: 34px;line-height: 100%;font-weight: bold;color: #fff;/*text-shadow: 0px 0px 5px #fff;*/ } .smedaysiconimg { width: 60px;height: auto;display: inline-block; } .smedaysicon { width: auto;height: auto;position: absolute;top: 0%;right: -40%; } .smebbplantxt { width: auto;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;line-height: 140%; position: relative;margin-top: 60px; } .smebbplantxtbold { font-size: 34px;line-height: 100%;font-weight: bold;color: #50489b;width: auto;height: auto;display: inline-block;margin-bottom: 20px; } .smepticonimg { width: 78px;height: auto;display: inline-block; } .smepticon { width: auto;height: auto;position: absolute;top: -45%;right: -22%; } .smepticonen { width: auto;height: auto;position: absolute;top: -43%;right: -10%; } .smebbplanwhttxt { width: 100%;height: auto;display: inline-block;vertical-align: middle;font-size: 18px;font-weight: bold;line-height: 120%;margin: 12px 0px; } .smebbplanoffer { width: auto;height: auto;display: inline-block;font-size: 18px;font-weight: bold;line-height: 120%;cursor: pointer; } .smebbplanofferopenframe {width: auto;height: auto;display: inline-block;vertical-align: 1px; } .smebbplanofferopen { width: 22px;height: 22px;background-color: rgba(0, 0, 0, 0.2);padding: 5px; border-radius: 50px;display: flex;justify-content: center;align-items: center; } /************************************************************************************ plans5g45g *************************************************************************************/ .plancontactsection { background-color: #ffffff;width: 100%;height: auto;display: inline-block;padding: 60px 30px;text-align: center; } .plancttitleframe { width: auto;height: auto;display: inline-block;vertical-align: middle;margin-right: 40px; } .plantitle { font-size: 34px;font-weight: bold; color: #000;line-height: 100%;margin-bottom: 30px; } .plantablewidthicon { width: 100%;margin-bottom: 30px; } .plantablewidthiconen { width: 100%;margin-bottom: 30px; } .planiconbut { width: auto;height: 35px;display: inline-block; font-size: 18px;font-weight: bold;line-height: 100%; text-align: center;cursor: pointer;margin: 0px 30px;display: inline-block;vertical-align: top; } .planiconbut:hover { background-image: url(menuline.png);background-size: 100% 4px;background-repeat: no-repeat;background-position: bottom; } .planiconbuton { background-image: url(menuline.png);background-size: 100% 4px;background-repeat: no-repeat;background-position: bottom; } .plantablewidthplan4 { width: 100%;padding-bottom: 10px; } .plantablewidthplan3 { width: 100%;padding-bottom: 10px; } .plantablewidthplan2 { width: 100%;padding-bottom: 10px; } .plancontentcol4 { width: 23.6%;height: auto;display: inline-block; text-align: center;display: inline-block;vertical-align: top;padding: 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgplan.jpg);background-size: 100% auto;background-position: center; } .plancontentcol3 { width: 32%;height: auto;display: inline-block; text-align: center;display: inline-block;vertical-align: top;padding: 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgplan.jpg);background-size: 100% auto;background-position: center; } .plancontentcol2 { width: 49%;height: auto;display: inline-block; text-align: center;display: inline-block;vertical-align: top;padding: 30px 0px; box-shadow: 0px 0px 5px #989898;background-image: url(../images/bgplan.jpg);background-size: 100% auto;background-position: center; } .plancontentcspace { width: 1%;height: auto;display: inline-block; text-align: center;display: inline-block;vertical-align: top; } .plancontenttxtframe { width: 100%;height: auto;display: inline-block; } .plancontenttitleXL { font-size: 18px;font-weight: bold;line-height: 100%;width: 40%;height: auto;display: inline-block;vertical-align: bottom;text-align: left;margin: 10px 0px; padding-left: 20px; } .plancontentcontentXL { font-size: 34px;font-weight: bold;line-height: 100%;color: #50489b; width: 60%;height: auto;display: inline-block;vertical-align: bottom;text-align: right;margin: 10px 0px; padding-right: 20px; } .plancontenttitle { font-size: 18px;font-weight: bold;line-height: 100%;width: auto;height: auto;display: inline-block;vertical-align: bottom;text-align: left;margin: 10px 0px; padding-left: 20px;float: left; } .plancontentcontent { font-size: 18px;font-weight: bold;line-height: 100%;width: auto;height: auto;display: inline-block;vertical-align: bottom;text-align: right;margin: 10px 0px; padding-right: 20px;float: right; } .plancontentcontentM { font-size: 24px;font-weight: bold;color: #4cbbac;line-height: 100%;width: auto;height: auto;display: inline-block;vertical-align: bottom;text-align: right;margin: 10px 0px; padding-right: 20px;float: right; } .plancontactustitle { font-size: 34px;font-weight: bold; color: #000;line-height: 100%;width: 100%;height: auto;display: inline-block;text-align: center;margin-bottom: 20px; } /************************************************************************************ contact us *************************************************************************************/ .contactussection { width: 100%;height: auto;display: inline-block;padding: 60px 30px;text-align: left; } .contactuscol { width: 50%;height: auto;display:inline-block;position: relative;float: left;text-align: center; } .contactusformboxframe { width: 100%;height: auto;/*border: 1px #dbdbdb solid;background-color: #fff;*/text-align: center; } .contactusformcontentframe { width: 100%;height: auto;display: inline-block;text-align: center;margin: 0px 0px;position: relative; } input[type=text], input[type=password] { width: 100%;padding: 16px 14px;margin: 30px 0px;box-sizing: border-box;border: 1px solid #bdbdbd;border-radius: 4px;font-size: 20px;font-weight: bold;background-color: #212121; } .formpulldown { width: 100%;padding: 16px 10px;margin: 10px 0px;box-sizing: border-box;border: 1px solid #bdbdbd;border-radius: 4px;font-size: 20px;font-weight: bold;color: #1d1d1d; } .formtextarea { width: 100%; padding: 16px 14px; margin: 10px 0px; box-sizing: border-box; border: 1px solid #bdbdbd; border-radius: 4px; font-size: 20px; font-weight: bold; text-align: left;background-color: #212121; } .forminputtxt { font-size: 16px; width: 100%; padding: 5px; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .formerror { color: #FF0000; } .formsubmit { width: 100%; background-color: #D0AB50;color: #000;font-size: 18px;font-weight: bold;text-decoration: none;cursor: pointer;border:none;padding: 15px 0px;margin: 10px 0px; border-radius: 4px;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .formsubmit:hover { background-color: #d7b55e; } ::placeholder { color: #9b9b9b;opacity: 1; } :-ms-input-placeholder { color: #9b9b9b; } ::-ms-input-placeholder { color: #9b9b9b; } .formcheckbox { height: 18px;width: 18px;vertical-align: -2px;cursor: pointer; } .cbcontainer { display: block;position: relative;padding-left: 35px;margin: 10px 0px;cursor: pointer;font-size: 16px;line-height: 120%;text-align: left;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; } .cbcontainer input { position: absolute;opacity: 0; cursor: pointer;height: 0;width: 0; } .checkmark {position: absolute;top: 0;left: 0;height: 20px;width: 20px;border: 1px #bdbdbd solid;border-radius: 5px; } .cbcontainer:hover input ~ .checkmark { background-color: #2e2e2e; } .cbcontainer input:checked ~ .checkmark { background-color: #D0AB50; } .checkmark:after { content: "";position: absolute;display: none; } .cbcontainer input:checked ~ .checkmark:after { display: block; } .cbcontainer .checkmark:after { left: 5px;top: 1px;width: 5px;height: 10px;border: solid #000;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); } .cbtickframe { margin-left: 16px;width: 97%;height: auto;display: inline-block; } .cbticktitle { font-size: 24px;font-weight: bold;line-height: 120%;width: 100%;height: auto;display: inline-block;text-align: left;margin-top: 10px; } .cbtick { font-size: 24px !important; } .contactusconfirmframe { width: 100%;height: auto;background-color:rgba(0,0,0,0.7);position: absolute;top: 0px;left: 0px;padding: 20px 0px;text-align: center; } .contactusconfirmbut { font-size: 18px;font-weight: bold;line-height: 100%;color: #fff;text-shadow: 0px 0px 5px #000; padding: 15px 70px;display: inline-block;border-radius: 8px;background-image:url(../images/bg-button.jpg);background-size: 100%;cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .contactusconfirmbut:hover { background-size: 150%; } .contactusconfirmtxt { font-size: 16px;font-weight: bold;color: #fff;line-height: 100%; } .contactusconfirmcolL { width: 46%;height: auto;display: inline-block;text-align: left; } .contactusconfirmcolR { width: 46%;height: auto;display: inline-block;text-align: right; } .contactuserrormsg { font-size: 14px;color: #ff0000;line-height: 120%;width: 100%;height: auto;text-align: left; } .contactusmsgtxttitle { font-size: 24px;font-weight: bold;line-height: 180%;width: 100%;height: auto;display: inline-block;margin-bottom: 5px; } .contactusmsgtxt { width: 70%;height: auto;display: inline-block;font-size: 18px;font-weight: bold;line-height: 200%;text-align: left; } .contactusmsgtxtcol1 { width: 40%;height: auto;display: inline-block;font-size: 18px;line-height: 100%; } .contactusmsgtxtcol2 { width: 58%;height: auto;display: inline-block;font-size: 18px;line-height: 100%; } .contactusmsgtxtcol1en { width: 40%;height: auto;display: inline-block;font-size: 18px;line-height: 100%; } .contactusmsgtxtcol2en { width: 58%;height: auto;display: inline-block;font-size: 18px;line-height: 100%; } /************************************************************************************ sme *************************************************************************************/ .charticon { width: auto; height: 34px; vertical-align: -10px;padding: 5px 0px; } .buttonicon { width: auto;height: 20px;vertical-align: -3px; } .smetablescroll { } /************************************************************************************ topnav *************************************************************************************/ .topnavframe { width: 100%;display: inline-block;background: #434448;font-size: 16px;line-height: 100%;font-weight: bold; } .topnavbutoff { color: #fff;padding: 15px 30px;display: inline-block;background: #434448;cursor: pointer; } .topnavbutoff:hover { display: inline-block; background-image: -webkit-gradient(linear,right top,left top,from(#743ad5),to(#d53a9d));background-image: -webkit-linear-gradient(right,#743ad5,#d53a9d);background-image: -o-linear-gradient(right,#743ad5 0,#d53a9d 100%);background-image: linear-gradient(270deg,#743ad5 0,#d53a9d); } .topnavbuton { color: #fff;padding: 15px 30px;display: inline-block;background: #434448;background-image: -webkit-gradient(linear,right top,left top,from(#743ad5),to(#d53a9d));background-image: -webkit-linear-gradient(right,#743ad5,#d53a9d);background-image: -o-linear-gradient(right,#743ad5 0,#d53a9d 100%);background-image: linear-gradient(270deg,#743ad5 0,#d53a9d); } .slider { display: flex;font-size: 14px;line-height: 100%;background: #434448;color: #fff;font-weight: bold; } section { padding: 15px 15px;width: auto; scroll-snap-align: center;text-align: center;position: relative;cursor: pointer; } section:hover { background-image: -webkit-gradient(linear,right top,left top,from(#743ad5),to(#d53a9d));background-image: -webkit-linear-gradient(right,#743ad5,#d53a9d);background-image: -o-linear-gradient(right,#743ad5 0,#d53a9d 100%);background-image: linear-gradient(270deg,#743ad5 0,#d53a9d); } .sectionoff { } .sectionon { display: inline-block;background: #434448;background-image: -webkit-gradient(linear,right top,left top,from(#743ad5),to(#d53a9d));background-image: -webkit-linear-gradient(right,#743ad5,#d53a9d);background-image: -o-linear-gradient(right,#743ad5 0,#d53a9d 100%);background-image: linear-gradient(270deg,#743ad5 0,#d53a9d); } .languagebutton { font-size: 14px;color: #000;line-height: 100%;padding: 8px 26px;background-color: #555;display: inline-block;vertical-align: middle;/*border-radius: 10px;margin-left: 10px;*/cursor: pointer;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .languagebutton:hover { background-color: #fff;color: #000; } .pulldownarrow { display: none; } /************************************************************************************ solution new *************************************************************************************/ .coltablewidth { width: 88.8%; max-width: 1600px; } .mainpagepromocolspace { width: 1%;height: auto; display: inline-block;float: left; } .mainpagepromocol3 { width: 32.15%;height: auto; display: inline-block;border: 1px solid #aaa;float: left;margin-bottom: 20px;margin-left: 0.5%;margin-right: 0.5%;cursor: pointer; } .col3L { float: left; } .col3R { float: right; } .mainpagepromocol3photo { width: 100%;height: 215px; display: inline-block;background-size: cover;background-position: center;position: relative; } .mainpagepromocol3photomob { display: none; } .mainpagepromocol3content { width: 100%;height: auto; display: inline-block;position: relative;text-align: center; } .mainpagepromocol3centerframe { vertical-align: middle;display: inline-block;width: 92%;padding: 15px 0px 18px 0px;height: 130px; } .boxsmallcontentline1 { width: 100%;display: inline-block;text-align: center;font-size: 16px;line-height: 120%;color: #000; } .boxsmallcontentline2 { width: 100%;display: inline-block;text-align: center;font-size: 16px;padding-bottom: 30px; } .boxsmallcontentboldtxt { font-size: 1.7rem;color: #f60;font-weight: 700;padding: 0px 4px 0px 4px; } .boxsmallnopad { padding: 0px } .boxsmallcontentboldnormaltxt { font-size: inherit;color: #f60;font-weight: bold; } .boxsmallcontentlinetxt { font-size: inherit;color: #d0d0d0;font-weight: bold;padding: 0px 5px;display: inline-block;vertical-align: 3px; } .boxTitle { position: absolute;bottom: 0px;left: 0px;width: 100%;background-image: -webkit-gradient(linear,right top,left top,from(#743ad5),to(#d53a9d));background-image: -webkit-linear-gradient(right,#743ad5,#d53a9d);background-image: -o-linear-gradient(right,#743ad5 0,#d53a9d 100%);background-image: linear-gradient(270deg,#743ad5 0,#d53a9d); } .boxTitletxt { line-height: 140%;padding: 5px;font-size: 16px;color: #fff;font-weight: 500;text-align: left; } .frametitle { width: 100%;display: inline-block;padding: 0px 0px 25px 0px; } .mainpagetitle { font-size: 2.875em;line-height: 140%;font-weight: 700;width: auto;display: inline-block;vertical-align: top;width: 100%; text-align: left; } .solutionframe { display: inline-block;padding: 0px 0px 50px 0px; } .languagebut { width: 40px; vertical-align: -8px; } .w-webflow-badge {display: none} .heading-company { font-weight: 700; font-size: 20px; line-height: 26px } .anametop { position:relative; top:-110px; display: block; } .pageheader { position: relative; padding: 170px 10px 170px 10px; } .gototop { width: 100%; text-align:right } .top { width: 23px; height: 20px; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px;} .bgaboutus { background-image: url(../images/headerbg_aboutus.jpg); background-position: center -10px; } .abpart1photoarea { width: 56%; display: inline-block; text-align: right; padding-top: 100px; } .abpart1txtarea { width: 42%; display: inline-block; vertical-align: top; } .abpart1photo { width: 1200px } .bgsme { background-image: url(../images/headerbg_sme.jpg); background-position: center;background-size: cover; } .bgsectionsme { background-image: url(../images/sme-offerbg.jpg); background-position: center -30px; } .bgsolution { background-image: url(../images/headerbg_solution.jpg); background-position: center -90px; } .remark { font-size: 12px;line-height: 120%; } .bgworld { background-image: url(../images/headerbg_world.jpg); background-position: center -80px; } .part1txtarea { width: 42%; display: inline-block; vertical-align: top; padding-bottom: 50px; } .part1photoarea { width: 56%; display: inline-block; text-align: right; padding-bottom: 30px; } .part1photosize { width: 80%; } .bgpns { background-image: url(../images/headerbg_pns.jpg); background-position: center 0px; } .meetrm { width: 50%; padding: 20px 0px; } .bgevent { background-image: url(../images/headerbg_event.jpg); background-position: center -80px; } .eventdate { font-size: 16px; } .eventtitle { font-size: 20px; font-weight: bold; } .event-photo { width: 110px; height: 110px; margin-right: 20px; float: left; border-radius: 100%; background-color: #212127; background-image: url("../images/eventphoto.jpg"); background-position: 50% 0px; background-size: auto; background-repeat: no-repeat; } .event-photo._1 { background-image: url("../images/eventphoto01.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._2 { background-image: url("../images/eventphoto02.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._3 { background-image: url("../images/eventphoto03.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._4 { background-image: url("../images/eventphoto04.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._5 { background-image: url("../images/eventphoto05.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._6 { background-image: url("../images/eventphoto06.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._7 { background-image: url("../images/eventphoto07.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._8 { background-image: url("../images/eventphoto08.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._9 { background-image: url("../images/eventphoto09.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._10 { background-image: url("../images/eventphoto10.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._11 { background-image: url("../images/eventphoto11.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._12 { background-image: url("../images/eventphoto12.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._13 { background-image: url("../images/eventphoto13.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._14 { background-image: url("../images/eventphoto14.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._15 { background-image: url("../images/eventphoto15.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._17 { background-image: url("../images/eventphoto17.jpg"); background-position: 50% 0px; background-size: auto; } .event-photo._18 { background-image: url("../images/eventphoto18.jpg"); background-position: 50% 0px; background-size: auto; } /**** form ****/ .formreset { background-color: #AFAFAF;background-image: -webkit-linear-gradient(top, #AFAFAF, #929292);background-image: -moz-linear-gradient(top, #AFAFAF, #929292);background-image: -ms-linear-gradient(top, #AFAFAF, #929292);background-image: -o-linear-gradient(top, #AFAFAF, #929292);background-image: linear-gradient(to bottom, #AFAFAF, #929292);color: #fff;font-size: 20px;text-decoration: none;cursor: pointer;border:none;padding: 5px 20px; } .formreset:hover { background: #AFAFAF; } .formthx { font-size: 20px;font-weight: bold;line-height: 120%; } .newsletterframe { width: 100%;display: inline-block;background: #e6e7e8;padding: 25px 0px;text-align: center; } .newsletterinputtxt { font-size: 14px; width: 30%; padding: 5px; display: inline-block; border: 1px solid #ccc; box-sizing: border-box;vertical-align: middle; } .newslettersubmit { background: url(../images/bg_button.jpg) no-repeat;background-size: 500%;background-position: 0% 95%;color: #fff;font-size: 18px;text-decoration: none;cursor: pointer;border:none;padding: 5px 30px;vertical-align: middle; } .newslettersubmit:hover { background: url(../images/bg_button.jpg) no-repeat; background-size: 250%; } .newsletterformthx { font-size: 18px;font-weight: bold;line-height: 120%; } /**** form ****/ .bgcontactus { background-image: url(../images/headerbg_contactus.jpg); background-position: center; } .contactusframe { width: 48%; display: inline-block; float: left } .titlekeyf { font-size: 18px; font-weight: bold; line-height: 160%; color: #464646; } .keypoint { font-size: 15px; line-height: 160%; color: #464646; padding-left: 25px; list-style-type: disc; } .keypoint2 { padding: 5px 10px; background-color: #bfbfbf; color: #000000; font-size: 14px; border-radius: 20px; line-height: 200%; } .detailbut { background: url(../images/bg_button.jpg) no-repeat; background-size: 500%; background-position: 0% 95%; margin: 0px 10px 10px 0px; padding: 0px 0px 0px 0px; cursor: pointer; float: none; display: inline-block; text-align: center; } .detailbut:hover { background: url(../images/bg_button.jpg) no-repeat; background-size: 200%; } .detailbuttxt { font-size: 16px; clear: both; color: #FFFFFF; margin: 10px 25px 10px 25px; font-weight: bold; pointer-events: none; } .bgsection2 { background-image: url(../images/bg-icon.jpg); background-position: center; } .videotitle { font-size: 22px; line-height: 38px; color: #ffffff } .videotitle:hover { font-size: 22px; line-height: 38px; color: #94efff } .videotitletxt { font-size: 16px; line-height: 24px; padding-left: 28px; color: #94efff } .displaypc { display: inline-block; } .displaymob { display: none } .displaypclogin { display: inline-block; } .displaymoblogin { display: none } .logo { width: auto; height: 90px; padding: 12px 0px; } #topheight {clear: both;height: 90px} /*.homeframe1 { width: 66%; text-align: center;display: inline-block;vertical-align: top; }*/ .homeframe1 { width: 100%; text-align: center;display: inline-block;vertical-align: top; } .photocol2homeframe { width: 49.5%; height: 320px; overflow:hidden; border: 4px solid #fff; border-top-width: 4px; border-bottom-width: 4px; display: inline-block; } .homeframe2 { width: 33%; text-align: center;display: inline-block;vertical-align: top; } .photocol1homeframe { width: 100%; height: 643px; overflow:hidden; border: 4px solid #fff; border-top-width: 4px; border-bottom-width: 4px; display: inline-block; } .photocol1frame { width: 100%; height: 260px; overflow:hidden; border: 0px solid #fff; display: inline-block; margin-top: 4px; padding-bottom: 4px; } .photocol1 { font-size: 40px; line-height: 85%; color: #FFFFFF; text-shadow: 1px 1px 6px #000000; font-weight: bold; padding-top: 40px; width: 100%; height: 260px; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; text-transform: uppercase; vertical-align: top; cursor: pointer; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; float: left; } .photocol1:hover { -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); padding-top: 50px } .photocol2frame { width: 49.5%; height: 640px; overflow:hidden; border: 6px solid #fff; border-top-width: 10px; border-bottom-width: 10px; display: inline-block; } .photocol2 { font-size: 40px; line-height: 85%; color: #FFFFFF; font-weight: bold; text-shadow: 1px 1px 6px #000000; padding-top: 40px; width: 100%; height: 640px; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; text-transform: uppercase; vertical-align: top; cursor: pointer; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; float: left; } .photocol2:hover { -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); padding-top: 50px } .photocol3frame { width: 33%; height: 320px; overflow:hidden; border: 4px solid #fff; border-top-width: 4px; border-bottom-width: 4px; display: inline-block; } .photocol3 { font-size: 40px; line-height: 80%; color: #FFFFFF; font-weight: bold; text-shadow: 1px 1px 6px #000000; padding-top: 30px; width: 100%; height: 320px; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; text-transform: uppercase; vertical-align: top; cursor: pointer; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; float: left; } .photocol3:hover { -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); padding-top: 50px } .photodes { font-size: 16px; line-height: 16px; text-transform: none; font-weight: normal; } .hrline { text-align: center; width: 60px; } .sectionsmeoffer { position: relative;padding: 60px 10px; } .smesubtitle { font-size: 30px; line-height: 36px; color: #383838; font-weight: 700; } .smesubdes { font-size: 18px; line-height: 26px; color: #383838; font-weight: 700; } .subtitletopline { width: 80px; height: 3px; background-color: #e6007e; display: inline-block; margin-bottom: 15px; } /* ========================================================================== solution ========================================================================== */ .solcctv { width: 100%; } /* ========================================================================== plan ========================================================================== */ .tmptable { border-collapse: collapse; border: 1px solid #D1D1D1; padding: 10px 5px; text-align: center; height: 20px; font-size:15px; } .tmptableadd { border-collapse: collapse; border: 1px solid #D1D1D1; padding: 10px 5px; text-align: left; height: 20px; font-size:15px; } .tablewidthev { width: 100% } .tablewidthplan { width: 100% } .tmptrheader { background-color: #8c3d98; font-weight:bold; height: 40px; color:#FFFFFF; } .stepframe { width: 33%; display: inline-block;vertical-align: top;padding-bottom: 50px; font-size: 16px; } .plantablescroll { } .smehsbanner { width: 33%; padding: 5px 5px 5px 0px; display: inline-block; } .smesup { font-size: 12px; vertical-align: 10px; } /* ========================================================================== event6 ========================================================================== */ .evppl {display: inline-block; width: 33%;text-align: center; padding-bottom: 40px; font-size: 18px; vertical-align: top; } .ev6logoframe {display: inline-block; width: 25%;text-align: center; padding-bottom: 40px; font-size: 18px; vertical-align: top; } .ev6logo { width: 180px; } .ev6tabletime { width: 30% } .ev6tabletimeen { width: 30% } .ev6td { font-size: 18px;line-height: 140%; } .ev6tden { font-size: 18px;line-height: 160%; } .ev6name { width: 20%; padding: 5px 5px 0px 0px; display: inline-block; } .ev6nametitle { width: 80%; padding: 5px; display: inline-block; } .ev6li { font-weight: bold; } .ev6nametc { width: 30%; padding: 5px 5px 0px 0px; display: inline-block; } .ev6nametitletc { width: 70%; padding: 5px; display: inline-block; font-weight: bold; } .ev6litc { padding-left: 2px } .ev6comname { width: 25%; padding: 10px 5px 20px 5px; font-weight: bold; border-bottom: #cdcdcd 1px solid; } .ev6comcontent { width: 75%; padding: 10px 5px 20px 5px; border-bottom: #cdcdcd 1px solid; } #tmpheight5px {width:10px; clear:both; height: 5px} #tmpheight10px {width:10px; clear:both; height: 10px} #tmpheight15px {width:10px; clear:both; height: 15px} #tmpheight20px {width:10px; clear:both; height: 20px} #tmpheight30px {width:10px; clear:both; height: 30px} #tmpheight40px {width:10px; clear:both; height: 40px} #tmpheight50px {width:10px; clear:both; height: 50px} #tmpheight60px {width:10px; clear:both; height: 60px} #tmpheight70px {width:10px; clear:both; height: 70px} #tmpheight80px {width:10px; clear:both; height: 80px} #tmpheight90px {width:10px; clear:both; height: 90px} #tmpheight100px {width:10px; clear:both; height: 100px} .tmpeventtable { padding: 10px 5px; text-align: left; height: 20px; font-size:15px; } .eventtablewidthplan { width: 100% } /* ========================================================================== Start of CSS ========================================================================== */ body { color: #000; font-size: 16px; line-height: 20px; } /* h1 { margin-top: 0px; margin-bottom: 10px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; font-size: 32px; line-height: 40px; font-weight: 700; } h3 { margin-top: 0px; margin-bottom: 10px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; font-size: 20px; line-height: 30px; font-weight: 400; } h4 { margin-top: 0px; margin-bottom: 10px; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; font-size: 30px; line-height: 32px; font-weight: 700; } */ .banner { height: 650px; background-color: #ffffff; background-image: url(".jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .banner.with-slider { height: 700px; background-image: none; background-size: auto; background-repeat: repeat; } .banner.style-3 { height: 600px; background-image: url(".jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .navbar { /*padding: 10px 10px;*/ /*border-bottom: 1px solid hsla(0, 0%, 100%, .3);*/ background-color: transparent; } .navbar.style-2 { /*border-bottom-color: #e1e1e1;*/ /*background-color: #000;*/ /* border-radius: 20px; border-top-left-radius: 0px; border-top-right-radius: 0px;*/ } .nav-link { margin-left: 0px; padding: 35px 10px; /*border: 1px solid transparent;*/ color: #000; font-size: 15px; font-weight: 400; vertical-align: middle; } .nav-link:hover { border-color: hsla(0, 0%, 100%, .38); } .nav-link.no-drop { /*padding-right: 10px;*/ } .nav-link.no-drop.w--current { /*border-color: hsla(0, 0%, 100%, .38); */ color: #000; } .nav-link.no-drop.dark.w--current { /* border-color: #ffffff; */ color: #313131; } .nav-link.dark { color: #fff; font-weight: 700; } .nav-link.dark:hover { /*background-color: #f0f0f0;*/ /*background-image: url(menuline.png);*/ background-size: 100% 10px; background-repeat: no-repeat; background-position: bottom; } .arrow-drop { margin-top: 10px; margin-right: 8px; font-size: 12px; width: 14px; } .section { position: relative; padding: 80px 10px; } .section.gray { background-color: #f3f5f7; } .section.no-bottom-margin { padding-bottom: 0px; } .section.with-line { border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; } .section.with-line.more { padding-bottom: 60px; } .section.with-color { background-color: #0f4473; } .section.with-color.with-map { background-image: url("../images/bg-5g.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .section.with-color.less-space { padding-top: 40px; padding-bottom: 40px; } .section.with-image { padding-top: 120px; padding-bottom: 120px; background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(".jpg"); background-image: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(".jpg"); background-position: 0px 0px, 50% 100%; background-size: auto, cover; background-attachment: scroll, fixed; } .container-fluid { display: block; max-width: 98%; margin-right: auto; margin-left: auto; } .container-fluid.center { position: relative; top: 35%; -webkit-transform: translate(0px, -30%); -ms-transform: translate(0px, -30%); transform: translate(0px, -30%); } .container-fluid.center.more { top: 46%; } .heading-1 { font-size: 48px; } .headingland { font-size: 50px; line-height: 80px; } .headinglandsub { font-size: 36px; } .heading-1.smaller { color: #0f2367; font-size: 20px; line-height: 30px; } .heading-1.small { font-size: 28px; } .heading-1.with-color { color: #0f2367; font-size: 18px; line-height: 30px; } .heading-1.pricing-title { font-size: 45px; line-height: 50px; } .heading-1.white { color: #fff; } .heading-1.white.biger { margin-bottom: 20px; font-size: 38px; } .color { color: #0f2367; font-size: 34px; font-weight: 400; } .color.smaller { color: #0f2367; font-size: 22px; } .color.white { color: #fff; } .top-margin { margin-top: 20px; } .top-margin.more { margin-top: 60px; } .top-margin.more.add { margin-top: 80px; } .titledes { color: #464646; font-size: 20px; line-height: 24px; } .paragraph { color: #464646; font-size: 15px; line-height: 30px; } .paragraph.white { color: #fff; } .paragraph.lighter { color: #969696; } .paragraph.more-gray { color: #969696; font-style: italic; } .paragraph.not-block { display: inline-block; padding-right: 15px; border-right: 1px solid #e1e1e1; } .paragraph.not-block.margin { margin-left: 15px; } .paragraph.not-block.margin.no { padding-right: 0px; border-right-style: none; } .paragraph.copy { margin-bottom: 0px; color: #464646; font-size: 12px; } .left-padding { padding-right: 0px; } .line-divider { width: 100%; height: 1px; margin-top: 35px; margin-bottom: 35px; background-color: #e1e1e1; } .div-block { margin-right: 10px; margin-left: 10px; padding: 5px; border: 1px solid #d6d6d6; } .div-block.full { margin-right: 0px; margin-left: 0px; } .light-wrapper:hover { opacity: 0.8; } .heading-2 { color: #363636; font-size: 19px; line-height: 29px; } .heading-2.white { color: #fff; } .logo-slider { top: 19px; height: auto; background-color: transparent; } .slide-nav { position: relative; padding-top: 20px; opacity: 0.7; font-size: 10px; } .slide-nav.white { opacity: 1; } .logo-wrapper { width: 100%; opacity: 0.8; text-align: center; } .logo-wrapper:hover { opacity: 1; } .service-wrapper { padding: 30px 20px 20px; border: 1px solid #d6d6d6; background-color: #fff; } .service-wrapper.add-margin { margin-bottom: 20px; } .service-icon { width: 80px; height: 80px; margin-right: 15px; float: left; background-image: url(".svg"); background-position: 50% 0px; background-size: 45px; background-repeat: no-repeat; } .service-icon.icon-2 { background-image: url(".svg"); background-size: 45px; } .service-icon.icon-3 { background-image: url(".svg"); background-size: 45px; } .service-icon.icon-4 { background-image: url(".svg"); background-size: 45px; } .service-icon.icon-5 { background-image: url(".svg"); background-size: 45px; } .service-icon.icon-6 { background-image: url(".svg"); background-size: 45px; } .service-content { position: relative; overflow: hidden; line-height: 160%; } .heading-4 { font-weight: 700; } .heading-4.biger { font-size: 28px; line-height: 30px; } .heading-4.move { position: relative; top: 4px; } .heading-4.toggle { display: inline-block; } .top-title { margin-bottom: 20px; } .top-title.center { color: #fff; text-align: center; } .top-title.more { margin-bottom: 80px; } .tab-testi { top: 40px; z-index: 3; display: inline-block; background-color: #fff; } .testi-photo { width: 85px; height: 85px; margin-right: 5px; margin-left: 5px; border-radius: 100%; background-image: url(".jpg"); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; opacity: 1; } .testi-photo:hover { opacity: 0.8; } .testi-photo.w--current { opacity: 1; } .testi-photo.photo-2 { background-image: url(".jpeg"); background-size: contain; } .testi-photo.photo-3 { background-image: url(".jpeg"); background-size: contain; } .testi-photo.photo-3.w--current { opacity: 1; } .testi-wrapper { display: block; width: 100%; margin-right: auto; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; color: #464646; font-size: 18px; line-height: 30px; text-align: left; } .fund-wrapper { padding-top: 20px; padding-bottom: 20px; border-right: 1px solid #d6d6d6; text-align: center; } .fund-wrapper.no-line { border-right-style: none; } .smaller { color: #767676; font-size: 16px; font-weight: 400; } .normal { color: #0f2367; font-size: 17px; font-style: normal; font-weight: 700; } .footer { padding-top: 50px; padding-bottom: 50px; border-top: 1px solid #e1e1e1; background-color: #fff; } .subscribe-wrapper { display: block; width: 50%; margin-right: auto; margin-left: auto; } .sub-field { width: 70%; height: 50px; padding-left: 20px; float: left; border-style: none; } .button { padding: 12px 20px; border-radius: 10px; background-color: #0f2367; } .button:hover { background-color: #212127; } .submit-button { width: 30%; height: 50px; float: left; background-color: #212127; -webkit-transition: all 300ms ease; transition: all 300ms ease; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; } .submit-button:hover { background-color: #3a3a42; } .expert-wrapper { padding: 10px; border: 1px solid #ffffff; background-color: #fff; border-radius: 10px; } .expert-photo { width: 110px; height: 110px; margin-right: 20px; float: left; border-radius: 100%; background-color: #212127; background-image: url("../images/company-gobee.jpg"); background-position: 50% 0px; background-size: auto; background-repeat: no-repeat; } .expert-photo._2 { background-image: url("../images/company-beeinventor.jpg"); background-position: 50% 0px; background-size: auto; } .expert-photo._3 { background-image: url("../images/company-greensafety.jpg"); background-size: auto; } .expert-photo._4 { background-image: url("../images/company-tfs.jpg"); background-size: auto; } .expert-photo._5 { background-image: url("../images/company-opticalsensing.jpg"); background-size: auto; } .expert-content { position: relative; overflow: hidden; } .social-icon { width: 20px; height: 20px; margin-right: 10px; float: left; background-image: url(".png"); background-position: 50% 50%; background-size: 16px; background-repeat: no-repeat; opacity: 0.8; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .social-icon:hover { opacity: 1; } .social-icon.twitter { background-image: url(".png"); } .social-icon.google { background-image: url(".png"); background-size: 20px; } .services-style-2 { margin-bottom: 15px; padding-top: 5px; padding-bottom: 5px; padding-left: 50px; background-image: url(".svg"); background-position: 0px 50%; background-size: 35px; background-repeat: no-repeat; } .services-style-2.icon-2 { background-image: url(".svg"); background-size: 35px; } .services-style-2.icon-3 { background-image: url(".svg"); background-size: 35px; } .services-style-2.icon-4 { background-image: url(".svg"); background-size: 35px; } .services-style-2.icon-5 { background-image: url(".svg"); background-size: 35px; } .services-style-2.icon-6 { background-image: url(".svg"); background-size: 35px; } .text-field { height: 50px; } .text-field.quote { width: 95%; } .text-field.biger { height: auto; padding-bottom: 170px; } .text-field.add-big { height: auto; padding-bottom: 140px; } .toggle-header { position: relative; width: 100%; padding-top: 8px; padding-bottom: 8px; padding-left: 10px; border-bottom: 1px solid #e1e1e1; color: #333; text-decoration: none; } .toggle-header:hover { color: #265796; } .toggle-content { position: relative; overflow: hidden; } .toggle-space { padding: 20px 20px 10px 10px; } .toggle-icon-plus { position: absolute; top: 10px; right: 0px; width: 30px; height: 30px; background-image: url("../images/play.png"); background-position: 50% 50%; background-size: 16px; background-repeat: no-repeat; } .toggle-icon-minus { position: absolute; top: 10px; right: 0px; width: 30px; height: 30px; background-image: url("../images/play.png"); background-position: 50% 50%; background-size: 16px; background-repeat: no-repeat; } .pricing-wrapper { border: 1px solid #e1e1e1; text-align: center; } .top-pricing { padding: 30px 10px 20px; } .top-pricing.fixed { padding-top: 20px; } .option-pricing { margin-top: -1px; padding-top: 10px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; } .service-style-4 { position: relative; padding: 120px 20px 20px; background-color: #fff; text-align: center; border-radius: 5px; height: 450px; } .center-icon { position: absolute; left: 50%; top: -50px; display: block; width: 150px; height: 150px; border: 1px solid #e1e1e1; border-radius: 100%; background-color: #fff; background-image: url("../images/smeicon01.jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; -webkit-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); transform: translate(-50%, 0px); } .center-icon.ico-2 { background-image: url("../images/smeicon02.jpg"); } .center-icon.ico-3 { background-image: url("../images/smeicon03.jpg"); } .center-icon.ico-4 { background-image: url("../images/icon04.png"); } .center-icon.ico-5 { background-image: url("../images/icon05.png"); } .center-icon.ico-6 { background-image: url("../images/icon06.png"); } .quote-wrapper { padding-right: 150px; padding-left: 60px; background-image: url(".svg"); background-position: 0px 0px; background-size: 40px; background-repeat: no-repeat; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; color: #464646; font-size: 19px; line-height: 30px; } .lightbox-link { position: relative; } .play-icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .blog-wrapper { width: 100%; -webkit-transition: all 300ms ease; transition: all 300ms ease; color: #333; text-decoration: none; } .blog-wrapper:hover { color: #0f2367; } .blog-wrapper.add-margin { margin-bottom: 50px; } .blog-image { width: 50%; margin-right: 20px; float: left; border: 1px solid #e1e1e1; } .blog-content { position: relative; overflow: hidden; } .align-center { text-align: center; } .brand { /*top: 5px;*/ } .line-divider-footer { width: 100%; height: 1px; margin-top: 20px; margin-bottom: 20px; background-color: #e1e1e1; } .copyright { padding: 30px 20px 30px 20px;background-color: #fff;text-align: center; display: block;} .copyright2 { padding: 30px 20px 30px 20px;background-color: #fff;text-align: center; display: block;} .copyrighttxt { font-size: 12px;font-weight: bold; line-height: 120%;color: #000;width: auto;height: auto;display: inline-block;text-align: left; } .copyrightsocial { width: 49%;height: auto;display: inline-block;text-align: right; } .copyrightsocialtxt { font-size: 12px;font-weight: bold;line-height: 120%;color: #000;display: inline-block; } .copyrightsocialimg { padding: 0px 3px;display: inline-block; } .link-copy { display: inline-block; color: #000; text-decoration: none; } .link-copy:hover { text-decoration: underline; } .link { display: block; } .link-2 { display: inline-block; margin-bottom: 10px; -webkit-transition: all 300ms ease; transition: all 300ms ease; font-family: MHeiHK, Helvetica Neue, Helvetica, Arial, Microsoft JhengHei, 微軟正黑體, sans-serif; color: #464646; font-size: 16px; text-decoration: none; } .link-2:hover { color: #0f2367; } .sub-banner { height: 350px; background-color: #0f2367; } .div-block-2 { position: relative; display: inline-block; } .utility-page-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100vw; height: 70vh; max-height: 100%; max-width: 100%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #0f2367; } .utility-page-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 400px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; } .utility-page-form { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .dropdown-list { /*border: 1px solid #e1e1e1;*/ padding: 10px 0px; } .dropdown-list.w--open { /*border-radius: 5px;*/ background-color: #fff; /*box-shadow: 0px 0px 8px rgba(0,0,0,0.5);*/ } .drop-link { color: #000; font-size: 15px; } .drop-link:hover { color: #0f2367 !important; font-weight: bold; } .drop-link.w--current { color: #222222; } .dropdown-link { font-size: 13px; } .image { display: block; margin-right: auto; margin-left: auto; } .slider-banner { height: 100%; background-color: transparent; } .slide-1 { background-image: url("../images/mainslider.jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .arrow-slider { width: 60px; height: 60px; background-color: #212127; -webkit-transition: all 400ms ease; transition: all 400ms ease; font-size: 20px; } .arrow-slider:hover { background-color: #0f2367; } .biger { font-size: 60px; line-height: 70px; } .biger.more { font-size: 60px; line-height: 60px; } .slide-2 { background-image: url(".jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .move-down { margin-top: 50px; } .success-message { background-color: #086940; color: #fff; } .scroll-navigation { position: fixed; left: 0px; top: 0px; right: 0px; z-index: 9999; display: none; padding-top: 10px; padding-bottom: 12px; background-color: #fff; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .15); } html.w-mod-js *[data-ix="toggle-content-initial-appear"] { height: 0px; } html.w-mod-js *[data-ix="display-none-nav-scroll-first-appear"] { display: none; } @media screen and (max-width: 1366px) { .appsection3fr { width: 30%; } .appboxheader { font-size: 22px; } .appboxcontent { font-size: 18px; } .appsection3fren { width: 30%; } .appboxheaderen { font-size: 22px; } .appboxcontenten { font-size: 18px; } } @media screen and (max-width: 1280px) { .languagebutton { font-size: 14px;padding: 7px 14px;border-radius: 6px;margin-left: 5px; } .nav-link { padding: 35px 6px;font-size: 13px; } .drop-link { font-size: 14px; } .suptotalkframe { width: 98%; } .planiconbut { font-size: 14px; } .eduiconbut { font-size: 14px; } .smeiconbut { font-size: 14px; } .soliconbut { font-size: 14px; } .digiiconbut { font-size: 14px; } .robiconbut { font-size: 14px; } .digiiconbut { font-size: 14px; } .smeiconframeen { width: 86%; } .digiboxmapbottomfix { right: 0%; } } /************************************************************************************ scroll tab menu *************************************************************************************/ @media screen and (min-width: 1100px) { .slickBtnL{ position: absolute; z-index: 1; width: 45px; display: table-cell; left: 0px; } .slickBtnR{ position: absolute; z-index: 1; width: 45px; display: table-cell; right: 0px; } .prevArrow{ right: 505px; right: 505px; } .nextArrow{ left: ; } } @media screen and (max-width: 1099px) { .slickBtnL{ position: absolute; z-index: 1; width: 45px; display: table-cell; } .slickBtnR{ position: absolute; z-index: 1; width: 45px; display: table-cell; } .prevArrow{ left: 0%; } .nextArrow{ right: 0%; } .nwsmhometdimgframeOne { width: 100%;height: 445px;display: inline-block;border-radius: 20px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;background-size: cover;background-position: center;position: relative; } } @media screen and (max-width: 1024px) { .supshoplisttxtfr { width: 100%; height: 240px;; text-align: center;display: inline-block;background-color: #D0AB50;font-size: 16px;font-weight: bold;line-height: 130%;color: #000;padding: 20px 15px;text-align: left; } .supshoplisttxtfren { width: 100%; height: 250px;; text-align: center;display: inline-block;background-color: #D0AB50;font-size: 16px;font-weight: bold;line-height: 120%;color: #000;padding: 20px 15px;text-align: left; } .suptotalkcontainer { margin-bottom: 16%; } .ev6name { width: 30%; } .ev6nametitle { width: 70%; } .ev6nametc { width: 50%; } .ev6nametitletc { width: 50%; } .solstepimg { width: 180px; } .solsteparrow { width: 15px; padding-top: 45px; } .solcctv { width: 100%; } #topheight { height: 70px} .supofferheader { height: auto;display: inline-block;font-size: 20px;font-weight: bold;line-height: 120%;color: #000; margin-bottom:5px ;} /************************************************************************************ NEW sosim home *************************************************************************************/ .nwsmhomeslidesize { width: 90%;padding-bottom: 8px !important; } .nwsmtopbut { font-size: 20px; } .nwsmtopbuten { font-size: 14px; } .app_txt,.app_icon{float:none} .nwsmhomeplanframe { width: 80%; } .smappdlapp { height: auto;} .smappdlapp img {width: 80px;height:80px} .smappdlimg { height: 30px;} .homevideoslide { width: 70%;} .nwsmhomeplanmoretxt { font-size: 14px; } .nwsmhometdmoretxt { font-size: 12px; } .nwsmhomeshoplogoframe { width: 20%; } .nwsmhomembimg { /*width: 60%;*/ } .nwsmhomembtxt { font-size: 18px; } .app-container {float:none} .nwsmhomembframe { /*height: 290px;border-radius: 50px;border-top-left-radius: 20px;*/ } .nwsmhomembframeshop { height: 460px;border-radius: 50px;border-top-left-radius: 20px; } .nwsmhomembframeshop1 { height: auto;border-radius: 50px;border-top-left-radius: 20px; } .nwsmhomembframeshop3 { height: auto;border-radius: 50px;border-top-left-radius: 20px; } .nwsmhomembframeshop4 { height: auto;border-radius: 50px;border-top-left-radius: 20px; } .nwsmhomembstep { /*top: -10%;*/font-size: 18px; } .nwsmhomeshoplogo { width: 140px;height: 140px; } .smwtsappiconframe { width: 60px; } .smwtsappicontalk { width: 50px; } .smwtsappiconlogin { width: 30px; } .smwtsappiconrecharge { width: 32px; } .smwtsappiconshop { width: 34px; } .smwtsappicontop { width: 34px; } /************************************************************************************ SUPREME app *************************************************************************************/ .appboxheaderen { font-size: 20px; } .appboxcontenten { font-size: 16px; } /************************************************************************************ 3bizfd *************************************************************************************/ .bizfdtoplag { height: 70px; } .bizfdsection { padding: 60px 30px; } .bizfdofferfr { width: 100%; } /************************************************************************************ allcss *************************************************************************************/ .spectab { font-size: 20px; } .spectabimg { padding: 7px 0px 0px 0px; } /************************************************************************************ DIGIBOX *************************************************************************************/ .digitablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .digiboxmapbottomfix { padding-right: 20px; } .digiboxmapani { width: 26%; } .digiboxmapani:hover { width: 26%; } .digitablewidthiconen { width: 1460px;} .digitablewidthicon2en { width: 100%;} .digitablewidthicon3en { width: 100%;} .digitablewidthicon4en { width: 100%;} .digiboxmapbottomfix { width: 98%; } .digilogoframe { width: 16%;margin: 10px 5px 20px 5px; } .digizoL { width: auto; } .digizoM { width: auto; } .digizoR { width: 100%; } .digisubmenudisplaypc { display: none; } .digisubmenudisplaymob { display: inline; } /************************************************************************************ menu *************************************************************************************/ .logo { height: 70px;padding: 12px 0px; } .nav-link { padding: 25px 5px;font-size: 12px; } .languagebutton { font-size: 12px;padding: 6px 14px;border-radius: 6px;margin-left: 5px; } .drop-link { font-size: 12px; } /************************************************************************************ handset plan *************************************************************************************/ .hsplancttitle { font-size: 44px; } .hsplancttitleen { font-size: 44px; } .hsplanctbut { font-size: 20px;padding: 10px 50px;margin-top: 6px; } .phone5gframe { width: 18.5%;margin: 0px 20px 0px 40px; } .hsplanremarkL { margin: 8px 0px; } .hsplanremarkR { margin: 8px 0px; } /************************************************************************************ Solution *************************************************************************************/ .solsubmenudisplaypc { display: none; } .solsubmenudisplaymob { display: inline; } /************************************************************************************ 3education *************************************************************************************/ .edubut { font-size: 12px;padding: 8px 25px; } .edusubmenudisplaypc { display: none; } .edusubmenudisplaymob { display: inline; } /************************************************************************************ video n news *************************************************************************************/ .homevideoslideframeL { font-size: 36px; } .homenewsbanner { height: auto; } .homenewsbannerinsd { height: ; } .homenewsbannerbut { font-size: 12px;padding: 8px 25px; } .homenewsbannerbutframe { bottom: 10px; } .homenewsbannertitle { font-size: 18px; } .homenewsbannertitleen { font-size: 15px; } .homevideoslidetitle { font-size: 18px; } .homevideoslidetxt { font-size: 14px; } /************************************************************************************ Contact us *************************************************************************************/ .contactusmsgtxtcol1 { width: 40% } .contactusmsgtxtcol2 { width: 58% } .contactusmsgtxtcol1en { width: 40% } .contactusmsgtxtcol2en { width: 58% } .cbcontainer { font-size: 14px; } .contactusconfirmbut { padding: 15px 50px; } .contactustitleen { width: 40%; } /************************************************************************************ solution new *************************************************************************************/ .coltablewidth { width: 96.8%; } .mainpagepromocol3 { width: 32%;height: 365px; margin-bottom: 25px;margin-left: 0.56%;margin-right: 0.56%; } .boxsmallcontentline1 { font-size: 14px; } .boxsmallcontentline2 { font-size: 14px; } .boxsmallcontentboldtxt { font-size: 1.5rem; } .plantablewidthcol1 { width: 96%; } .plantablewidthcol2 { width: 96%; } .plantablewidthcol3 { width: 96%; } .plantablewidthcol4 { width: 96%; } .plantablewidthcol5 { width: 96%; } .freeimg { height: 170px; } .tableoff { font-size: 14px; } .mainpagetitle { font-size: 2em; } .boxTitletxt { font-size: 14px; } /************************************************************************************ sme *************************************************************************************/ .smeiconframe { width: 76%; } .smeiconframeen { width: 76%; } .smecontentcol3 { width: 31%; } .smecontentcol1 { width: 98%; } /************************************************************************************ topnav *************************************************************************************/ .slider { font-size: 14px; } .slider { scroll-snap-type: mandatory; scroll-snap-points-y: repeat(20vw); scroll-snap-type: x mandatory; display: flex; overflow-x: scroll; font-size: 14px; -webkit-overflow-scrolling:touch; } section { padding: 12px 18px; width: auto; scroll-snap-align: center; text-align: center; position: relative; white-space: nowrap; -webkit-overflow-scrolling:touch; } } @media (max-width: 1024px) { .logo { height: 40px; padding: 0px 10px; } .displaypclogin { display: none; } .displaymoblogin { display: inline-block; padding-left: 10px;} /************************************************************************************ 3bizfd *************************************************************************************/ .bizfdtoplag { height: 50px; } /************************************************************************************ whatsnew *************************************************************************************/ .whatsnewcolR { font-size: 16px; } .whatsnewcol1 { font-size: 16px; } /************************************************************************************ FAQ *************************************************************************************/ .faqcontent { width: 85%; } /************************************************************************************ menu *************************************************************************************/ .nav-link { padding: 8px 12px 8px 20px; border-bottom: 1px #dbdbdb solid; margin-left: 55px; } .nav-link.dark:hover { background-image: url(menuline-mob.png); background-size: 10px 100%; background-position: 0px; border-bottom: 1px #dbdbdb solid; } .w-dropdown-list{ min-width:80% } .dropdown-list { padding: 4px 0px; width: 91%; margin-left: 65px; border-bottom: 1px #dbdbdb solid; } .dropdown-list.w--open { box-shadow: 0px 0px 8px rgba(0,0,0,0); } .w-dropdown-link{ padding:5px 40px 5px 10px; } .languagebutton { font-size: 16px;padding: 8px 30px;border-radius: 5px;margin-left: 77px;margin-top: 15px; } .pulldownarrow { display: inline-block; } /************************************************************************************ sme *************************************************************************************/ .smeiconframe { width: 85%; } .smeiconframeen { width: 85%; } .smeiconimg { width: 50px;height: 50px; } .smeicontxt { width: 68%; } .smeicontxten { width: 80%; } .smetdpricetxt { font-size: 20px; } .smetdprice2 { font-size: 30px; } .smetdprice1 { font-size: 20px; vertical-align: 5px; } .smecontentcontent { margin: 22px 0px; } /************************************************************************************ handset plan *************************************************************************************/ .hsplancttitleframe { margin-right: 10px; } .hsplancttitle { font-size: 40px; } .hsplancttitleen { font-size: 40px; } .hsplanctbut { font-size: 18px;padding: 10px 50px;margin-top: 10px; } .phone5gpdtname { font-size: 16px; } .phone5gframe { width: 18%;margin: 0px 26px 0px 26px; } .hsplantitle { font-size: 30px; } .hsplanbut { padding: 12px 60px; } .hsplanremarkL { margin: 8px 0px; } .hsplanremarkR { margin: 8px 0px; } /************************************************************************************ hkpc *************************************************************************************/ .hkpctablewidthicon { width: 100%; } /************************************************************************************ DIGIBOX *************************************************************************************/ .digitablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .digitablewidthicon { width: 100%; } .digitablewidthiconen { width: 1660px; } .digitablewidthicon2 { width: 100%; } .digitablewidthicon2en { width: 100%; } .digitablewidthicon3 { width: 100%; } .digitablewidthicon3en { width: 100%; } .digitablewidthicon4 { width: 100%; } .digitablewidthicon4en { width: 1100px; } .digiiconbut { scroll-snap-align: center;font-size: 16px; } .digititle { font-size: 28px; } .digihomecolL { font-size: 16px; } .digipt { font-size: 16px; } .digicolR { font-size: 16px; } .digitablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .digitablewidthicon { width: 1100px; } .digitablewidthiconen { width: 1100px; } .digiiconbut { scroll-snap-align: center;font-size: 16px; } /************************************************************************************ Robotic *************************************************************************************/ .robtablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .robtablewidthicon { width: 100%; } .robtablewidthiconen { width: 100%; } .robiconbut { scroll-snap-align: center;font-size: 16px; } /************************************************************************************ solution *************************************************************************************/ .soltablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .soltablewidthicon { width: 1100px; } .soltablewidthiconen { width: 1100px; } .soliconbut { scroll-snap-align: center;font-size: 16px; } /************************************************************************************ 3education *************************************************************************************/ .edutablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .edutablewidthicon { width: 1100px; } .edutablewidthiconen { width: 1200px; } .eduiconbut { scroll-snap-align: center;font-size: 16px; } .edutitle { font-size: 28px; } .educolL { font-size: 16px; } .edupt { font-size: 16px; } /************************************************************************************ video n news *************************************************************************************/ .homevideoslidetitle { font-size: 18px; } .homevideoslidetxt { font-size: 14px; } .homenewsbanner { height: auto; } .homenewsbannerinsd { height: ; } .homenewsbannertitle { font-size: 14px; } .homenewsbannertitleen { font-size: 12px; } /************************************************************************************ Contact us *************************************************************************************/ .contactusmsgtxtcol1 { width: 45% } .contactusmsgtxtcol2 { width: 53% } .contactusmsgtxtcol1en { width: 45% } .contactusmsgtxtcol2en { width: 53% } .cbcontainer { font-size: 14px; } .contactusconfirmbut { padding: 15px 40px; } .contactustitle { font-size: 20px; } .contactustitleen { width: 28%;font-size: 15px; } /************************************************************************************ solution new *************************************************************************************/ .coltablewidth { width: 97.5%; } .mainpagepromocolspace { width: 2%; } .mainpagepromocol3 { width: 48.1%;margin-bottom: 25px;margin-left: 0.8%;margin-right: 0.8%; } .mainpagepromosupport { width: 48.1%;margin-bottom: 25px;margin-left: 0.8%;margin-right: 0.8%; } .mainpagetitle { font-size: 2em; } #topheight { clear: both; height: 50px } .photocol3frame { width: 32%; } .solsteparrow { width: 15px; padding-top: 30px; } .solstepimg { width: 135px; } /**** form ****/ .formreset { font-size: 16px;padding: 5px 10px; } /**** form ****/ .navbar { /*padding-top: 10px; padding-bottom: 10px;*/ } .navbar.style-2 { /*padding-top: 0px; padding-bottom: 4px;*/ } .navbar.color { background-color: #0f2367; } .heading-1.white.biger { font-size: 35px; } .service-wrapper { margin-bottom: 20px; padding-left: 10px; } .service-icon { width: 60px; height: 60px; } .subscribe-wrapper { width: 70%; } .expert-wrapper { margin-bottom: 20px; } .brand { top: 6px; } .move-down { margin-top: 0px; } .menu-button.w--open { background-color: #ffffff; background-image: url(../images/mainmenu-mobilemenu-on.png); background-size: 72% 65%; background-repeat: no-repeat;background-position: center; transform: rotate(180deg); } .nav-menu { padding: 0px 10px 20px 10px; /*background-color: #f1f1f7;*/ background-image: url(menubg-mob.png); background-position: left bottom; background-repeat: no-repeat; background-size: 430px auto; } .nav-menu.color { background-color: rgba(0, 0, 0, .9); } .div-block-3 { margin-bottom: 20px; } .div-block-4 { margin-bottom: 20px; } .white-icon { color: #fff; } .white-icon.w--open { background-color: #0f2367; } .suptotalkcontainer { margin-bottom: 16%; } } @media (max-width: 767px) { .banner { height: 800px; } .left-padding { margin-bottom: 20px; padding-right: 0px; } .div-block.full { margin-bottom: 20px; } .logo-wrapper { margin-bottom: 20px; } .fund-wrapper { border-right-style: none; } .subscribe-wrapper { width: 90%; } .text-field.quote { width: 100%; } .pricing-wrapper { margin-bottom: 20px; } .service-style-4 { margin-bottom: 70px; } .quote-wrapper { padding-right: 0px; } .blog-wrapper { margin-bottom: 20px; } .move-down { margin-bottom: 50px; } .div-block-5 { margin-bottom: 20px; } .suptotalkcontainer { margin-bottom: 18%; } } @media (max-width: 480px) { .swiper-button-next { width: 26px;height: 26px;background-size: 100%;right:7px; } .swiper-button-prev { width: 26px;height: 26px;background-size: 100%;left:7px; } .slick-slide{ border-right: none; } /************************************************************************************ NEW sosim home *************************************************************************************/ .nwsmbutframe { margin-top: 10px; } .nwsmbutimg { height: 36px;vertical-align: -10px; } .nwsmtopbutframe { width: 46%;margin: 4px 2px; } .nwsmtopbut { height: 46px; font-size: 16px; } .nwsmtopbuten { height: 46px; font-size: 14px; } .nwsmtopbutso { height: 46px; font-size: 16px; margin-top: 20px; margin-bottom: 10px;} .nwsmtopbutsoen { height: 46px; font-size: 14px; margin-top: 20px; margin-bottom: 10px;} .nwsmtopregbut { width: 100%;position: fixed;left: 0px;bottom: -1px;z-index: 99;padding: 4px 0px; } .nwsmhomeplanframe { width: 97%;margin-top: 12px; } .nwsmhomeslidesize { width: 100%; } .nwsmhomeslideheight { height: 560px !important; } .nwsmhometdimgframe { height: 130px; } .nwsmhometdimgframeOne { height: 386px; } .nwsmhomeplancontentframe { padding: 20px 0px 38px 0px; } .nwsmhomeplantitle { padding: 14px 0px;font-size: 20px; } .nwsmhomeplansubtitle { font-size: 20px; } .nwsmhomeplansubtitle2 { font-size: 16px; } .nwsmhomeplancnt { padding: 12px 0px; } .nwsmhomeplancntline { padding: 12px 0px; } .nwsmhometdbtn { margin-bottom: 38px;padding: 10px 0px; } .nwsmhomeplanbtn { padding: 12px 0px;margin-top: 14px; } .nwsmhometdoffertitle { font-size: 18px; } .homevideoslide { width: 76%;} .nwsmhomembsection { padding: 0px 0px 20px 0px;/*margin-top: 15px;*/ } .nwsmhomembframe { width: 96%;height: auto;margin: 2%;/*padding: 10px 0px 10px 0px;*/margin-top: 36px;/*border-radius: 40px;border-top-left-radius: 20px; */} .nwsmhomembframeshop { width: 90%;height: auto;margin: 0px 0%;padding: 50px 0px 20px 0px;margin-top: 36px;border-radius: 40px;border-top-left-radius: 20px; } .nwsmhomembframeshop1 { width: 90%;height: auto;margin: 0px 0%;padding: 0px 0px 20px 0px;margin-top: 36px;border-radius: 40px;border-top-left-radius: 20px; } .nwsmhomembframeshop3 { width: 90%;height: auto;margin: 0px 0%;padding: 50px 0px 20px 0px;margin-top: 36px;border-radius: 40px;border-top-left-radius: 20px; } .nwsmhomembframeshop4 { width: 90%;height: auto;margin: 0px 0%;padding: 50px 0px 20px 0px;margin-top: 36px;border-radius: 40px;border-top-left-radius: 20px; } .nwsmhomembstep { font-size: 16px;/*top: -10%;*/ } .nwsmhomembimg { width: 100%; } .nwsmhomembtxt { font-size: 16px;margin-bottom: 5px; width:100%} .nwsmhomembbtn { padding: 10px 40px; } .nwsmhomeshopsection { padding: 30px 0px; } .nwsmhomeshoplogoframe { width: 40%;margin: 20px 1% 0% 1%; } .nwsmhomeshoplogo { width: 120px;height: 120px; } .smfooter { padding: 30px 0px 70px 0px;text-align: center; } .smcopyright { width: 96%;margin-bottom: 20px;padding: 0; } .smcopyrightlink { color: #959595; } .smappdl { width: 96%;font-size: 16px;padding: 0;text-align: center; } .smappdltxtfr { width: 100%;margin-bottom: 10px; } .smappdlimgfr { width: 30%; /*margin: 1% 35%;*/ float: none;} .smappdlimg { height: auto;margin: 0px 0px; } .app-icon{margin: 1% 35%;} .smwtsappcontainer { bottom: 5%; } .smwtsappcontainerIM { bottom: 0; width: 100%; height: 100%; right: 0; box-shadow: none;} .smwtsappiconframe { width: 60px;padding: 15px 4px 15px 4px; } .smwtsappicontalk { width: 50px; } .smwtsappiconlogin { width: 30px; } .smwtsappiconrecharge { width: 32px; } .smwtsappiconshop { width: 34px; } .smwtsappicontop { width: 34px; } /************************************************************************************ crisis *************************************************************************************/ .crstopmsgtxt { width: 80%;height: auto;font-size: 14px; } .crspopmsgfr { width: 90%;font-size: 18px; } /************************************************************************************ supreme TNC PV *************************************************************************************/ .sptnc { font-size: 12px; } /************************************************************************************ table *************************************************************************************/ .set1table { font-size: 16px;padding: 14px 5px; } /************************************************************************************ isupreme *************************************************************************************/ .isupcontactusbox { width: 95%; padding: 50px 10px; } .isupcontent { font-size: 20px; } .isupbtn { font-size: 20px; } /************************************************************************************ supreme membership *************************************************************************************/ .supmembersection { padding: 40px 0px 60px 0px; } .supmemcardimg { width: 100%; } .supmemheader { font-size: 26px;margin: 15px 0px; } .supmemheaderposh{font-size: 26px; margin: 15px 0px; } .supmemcontent { font-size: 18px; } .supmemlogo { width: 120px;margin: 8px 3px;padding: 15px 10px; } .supmemiconfr { width: 100%;height: auto;display: inline-block;margin: 10px 0px; } .supmemicon { width: 50px; } .supmemicontxt { width: 60%; } .supmemservicecol { width: 100%;margin-left: 0%;text-align: center; } /************************************************************************************ supreme offers *************************************************************************************/ .supoffersection { padding: 40px 0px 60px 0px; } .supofferfrspace { line-height: 100%; } .supoffersetfr { margin-bottom: 20px; } .supofferset1a { width: 100%;float: none; } .supofferset1b { width: 100%;padding: 15px 10px;position: inherit;right: 0%;top: 0%;transform: translateY(0%); } .supofferset2a { width: 100%;float: none; } .supofferset2b { width: 100%;padding: 15px 10px;position: inherit;left: 0%;top: 0%;transform: translateY(0%); } .supoffertag { width: 30%;height: auto;display: inline-block;} .supofferheader { font-size: 24px; } .supoffercontent { font-size: 18px; } .supofferpopupimg { width: 100%; } .supofferpopupheader { font-size: 24px;padding: 20px 0px 10px 0px;margin-bottom: 10px; } .supofferpopupsubheader { font-size: 24px; } .supofferpopupcontent { font-size: 18px; } .supofferpopupappicon { width: 45px;vertical-align: -15px; } .supofferpopupappqr { display: none; } .supofferpopupappdlapp { width: 100%; } .supofferdlappbadge { width: 32%;margin-right: 0px;border-radius: 3px; } /************************************************************************************ supreme event *************************************************************************************/ .supeventsection { padding: 40px 0px 60px 0px; } /************************************************************************************ supreme app *************************************************************************************/ .appsection1 { background-size: cover;padding-top: 40px;margin-top: 20px; } .appsection1L { width: 100%;text-align: center; } .appsection1R { width: 100%;height: auto;display: inline-block;vertical-align: middle; } .appheader { font-size: 22px; } .appcontent { font-size: 18px; } .appsection2 { margin: 50px 0px 0px 0px; } .appsection2T { width: 100%;text-align: center; } .appsection2B { width: 100%;overflow: hidden;margin-top: 20px } .appsection2img { width: 900px;max-width: 900px; } .appsection3 { background-size: auto;margin-bottom: 30px;padding-top: 40px; } .appsection3fr { width: 100%;margin: 0px 0px 150px 0px;border: 1px #D0AB50 solid;position: relative; } .appsection3box { padding: 18px 10px;top: 190px;height: 130px; } .appsection3box1line { padding: 18px 10px;top: 190px;height: 60px; } .appboxheader { font-size: 22px; } .appboxcontent { font-size: 18px; } .appsection3en { background-size: auto;margin-bottom: 30px;padding-top: 40px; } .appsection3fren { width: 100%;margin: 0px 0px 200px 0px;border: 1px #D0AB50 solid;position: relative; } .appsection3boxen { padding: 18px 10px;top: 190px;height: 130px; } .appsection3boxen { padding: 18px 10px;top: 190px;height: 60px; } .appboxheaderen { font-size: 22px; } .appboxcontenten { font-size: 18px; } .appsection4 { margin: 0px 0px 0px 0px; } .appmysupreme { margin: 0px 10px 30px 10px; } .appdlbadge { margin: 0px 30px 30px 30px; } .appdlappframe { text-align: center;vertical-align: top; } .appdlappframecoming { margin-left: 0px;margin-bottom: 20px; } .contactuspopup { height: 100px;padding: 0px 10px; } .myftappiconimg { height: 50px; } .myftdliconfr { margin-left: 8px;font-size: 18px; } .myftdliconimg { height: 30px; } /************************************************************************************ supreme shoplist *************************************************************************************/ .supshoplistsection { padding: 40px 0px 60px 0px; } .supshoplistfr { width: 100%; margin: 0px 0px 20px 0px; } .supshoplisttxtfr { height: auto;font-size: 16px;padding: 15px 10px; } .supshoplisttxtfren { height: auto;font-size: 16px;padding: 15px 10px; } /************************************************************************************ supreme contactus *************************************************************************************/ .supcontactussection { padding: 40px 0px 60px 0px; } .supcontactusbox { width: 95%; } /************************************************************************************ supreme login *************************************************************************************/ .suploginsection { padding: 40px 0px 60px 0px; } .suplogincontainer { width: 96%;padding: 30px 0px 50px 0px;margin: 20px 0px 180px 0px; } .suploginfr { width: 80%; } .suplogininput { margin-bottom: 10px !important; } .suplogintxt { font-size: 14px;margin-top: 20px; } .suploginforgetbtn { width: 91%;font-size: 14px; } .suploginfostepicon { width: 7%;margin-left: 2%; } .suplogpwstepfr { width: 44%;margin: 0px 6px 25px 6px; } .suplogpwsteptxt { font-size: 16px; } /************************************************************************************ supreme network *************************************************************************************/ .supnetworksection1 { padding: 30px 0px 0px 0px; } .supnetworksection2 { padding: 80px 0px 60px 0px;background-size: cover; } .supnetworksection3 { padding: 40px 0px 100px 0px; } .supnetworksection4 { padding: 40px 0px 60px 0px; } .supnetworkvideocontainer { width: 90%; } .supnettxtbox { padding: 30px 15px 45px 15px;font-size: 18px; } .supnettxtbtn { width: 90%;font-size: 18px;padding: 14px 0px;left: 5%;bottom: -27px; } .supnetofferbox { width: 100%;height: 320px;padding: 25px 15px;margin: 0px 0px;margin-top: 20px; background-size: 180px, cover; background-position: right 6% top 80%, center; } .supnetofferboxheader { font-size: 24px;margin-bottom: 12px; } .supnetofferboxheaderlogo { height: 40px;vertical-align: -10px; } .supnetofferboxtxt { width: 100%;font-size: 18px;margin-left: 12px; } .supnetofferbtn { width: 160px;font-size: 18px;padding: 10px 0px;left: 27px; } /************************************************************************************ supreme *************************************************************************************/ .homevideosection { padding: 40px 20px; } .homebrandstorysection { padding: 80px 20px; } .homeexcoffersection { padding: 10px 0px 0px 0px; } .homeexcoffersectionplain { padding: 10px 0px 0px 0px; } .homedlappsection { padding: 60px 20px;overflow: hidden; } .tablewidthcontent { width: 100%; } .tablewidth { width: 100%; } .spheader { font-size: 28px;margin-bottom: 25px; } .spcontent { font-size: 18px;margin-bottom: 24px; } .spheaderlinefr { width: 7%;margin: 0px 4px; } .exciconcontainer { margin: 30px 0px 40px 0px; } .exciconframe { width: 30%;padding: 0px 10px;margin-bottom: 20px } .excicontxt { font-size: 18px;margin-top: 10px; } .swiper-container2 { margin-left: auto;margin-right: auto;padding: 0px 0px;overflow: hidden; } .dlappiconframe { width: 60%;text-align: center; } .dlappicon { width: 80px;margin-right: 0px; } .dlappicontxt { width: 100%;font-size: 22px;margin-top: 10px; } .dlappbadgeframe { width: 60%;text-align: center;margin-top: 15px; } .dlappbadge { width: 120px;margin-right: 0px;border-radius: 5px;margin-bottom: 8px; } .dlappphone { width: 50%;bottom: -9%;right: -6%; } .suptotalkcontainer { margin-bottom: 6%; } .suptotalkframe { width: 96%; } .suptotalkicon { width: 80px;margin-right: 1%; } /************************************************************************************ video n news *************************************************************************************/ .homevideoframe { height: auto; display: inline-block;margin-top: 20px; } .homevideoslideframeL { width: 100%;margin-bottom: 10px;border-right: none; } .homevideoslideframeR { width: 100%;padding: 10px 0px; } .homevideoslidetitle { font-size: 20px; } .homevideoslidetxt { font-size: 16px; } .swiper-container2 .swiper-slide { width: 90%; } .homevideoslidetxtframe { height: auto;padding: 18px 10px; } .homevideoslidetxtbg { padding: 15px 10px; } .homenewsframe { padding: 20px 15px;background-size: 250%; } .homenewstitle { font-size: 28px;margin-bottom: 15px; } .homenewsbanner { width: 100%;height: auto; } .homenewsbannerinsd { width: 78%;height: 460px; } .homenewsbannerspc { display: none; } .homenewsbannertitle { font-size: 18px;padding: 15px 10px;height: 100px; } .homenewsbannertitleen { font-size: 15px;padding: 15px 10px;height: 100px; } .homenewsbannerbutframe { bottom: 20px; } .homenewsbannerbut { font-size: 14px;padding: 8px 20px; } /************************************************************************************ crisis *************************************************************************************/ .crstopmsgtxt { width: 80%;height: auto;font-size: 14px; } .crspopmsgfr { width: 90%;font-size: 18px; } /************************************************************************************ 3bizfd *************************************************************************************/ .bizfdgrid-container { grid-template-columns: 1fr;margin-top: 0px;margin-bottom: 0px; } .bizfdtoplag { height: 50px; } .bizfdsection { padding: 20px 15px; } .bizfdcontent { font-size: 18px;margin-bottom:30px; } .bizfdofferfr { width: 100%;margin: 0px 0px 0px 0px; } .bizfdoffertitle { font-size: 20px; } .bizfdoffertitleen { font-size: 18px; } .bizfdoffertitlebold { font-size: 26px; } .bizfdoffertitlebolden { font-size: 24px; } .bizfdrm { height: auto;margin: 10px 0px; } .bizfdul { padding-left: 18px; } .bizfdbtn { font-size: 18px;padding: 10px 40px;margin-top: 0px; } .bizfdbtnen { font-size: 16px;padding: 10px 40px;margin-top: 0px; } .activeframe { width: 100%;margin-bottom: 30px; } .activetitle { font-size: 20px;margin-right: 0px;width: 100%; } .activetitleen { font-size: 16px;margin-right: 0px;width: 100%; } .activetxt { font-size: 20px;width: 140px; } .activebtn { font-size: 16px;padding: 12px 20px;margin-left: 3px; } .activebtnen { font-size: 14px;padding: 12px 15px;margin-left: 3px; } /************************************************************************************ all css *************************************************************************************/ .spectab { font-size: 16px; } .spectabimg { padding: 0px 0px 0px 0px; } /************************************************************************************ whatsnew *************************************************************************************/ .whatsnewsection { padding: 20px 15px; } .whatsnewcolL { width: 100%;margin-right: 0%;margin-bottom: 10px; } .whatsnewcolR { width: 100%;font-size: 16px; } .whatsnewcol1 { width: 100%;font-size: 16px; } /************************************************************************************ location *************************************************************************************/ .covertitle { width: 98%;padding: 3px;font-size: 15px; } .coverloc { width: 31.5%;padding: 5px;margin: 3px 0px;font-size: 14px;line-height: 120% } /************************************************************************************ FAQ *************************************************************************************/ .faqframe { padding-bottom: 30px; } .faqimg { width: 75px;vertical-align: top; } .faqcontent { width: 70%; font-size: 16px;vertical-align: top; } .faqcontent { width: 70%; font-size: 16px;vertical-align: top; } /************************************************************************************ DIGIBOX *************************************************************************************/ .digiboxmapbottomfix { width: 100%;bottom: 12%;padding-right: 0px;position: inherit; } .digiboxmapani { width: 100%; } .digiboxmapani:hover { width: 100%; } .digitablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .digitablewidthicon { width: 1200px; } .digitablewidthiconen { width: 1700px; } .digitablewidthicon2 { width: 1500px; } .digitablewidthicon2en { width: 1600px; } .digitablewidthicon3 { width: 900px; } .digitablewidthicon3en { width: 900px; } .digitablewidthicon4 { width: 1200px; } .digitablewidthicon4en { width: 1200px; } .digiiconbut { scroll-snap-align: center; } .digihomecolL { width: 100%;margin-right: 0%;font-size: 16px;margin-bottom: 25px; } .digihomecolR { width: 100%;margin-bottom: 25px;float: none; } .digicontactsection { padding: 20px 15px; } .digicolL { width: 100%;margin-right: 0%;margin-bottom: 25px; } .digicolR { width: 100%;font-size: 16px;margin-bottom: 25px;float: none; } .digititle { font-size: 24px;margin-bottom: 15px; } .digipt { font-size: 16px;margin-bottom: 15px; } .digibut { font-size: 18px;padding: 12px 18px;margin-top: 15px;width: 100%;text-align: center; } .digilogoframe { width: 21%;margin: 10px 5px 20px 5px; } .digizoL { width: auto; } .digizoM { width: auto; } .digizoR { width: 100%; } .digiboxlogo { height: 80px;margin-bottom: 20px;margin-top: 20px; } .digitablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .digitablewidthicon { width: 1200px; } .digitablewidthiconen { width: 1800px; } .digiiconbut { scroll-snap-align: center; } /************************************************************************************ footer *************************************************************************************/ .copyright { padding: 20px 15px 80px 15px; } .copyrighttxt { width: 100%;text-align: center;margin-bottom: 10px;line-height: 160%; } .copyrightsocial { width: 100%;text-align: center; } .copyrightsocialtxt { width: 100%;height: auto;margin-bottom: 5px; } .copyrightsocialimg { padding: 0px 2px; } /************************************************************************************ main sliderVIDEO *************************************************************************************/ .starvideocontainer { padding-bottom: 55.7%; } .digiboxvideocontainer { padding-bottom: 28.7%; } /************************************************************************************ solution VIDEO *************************************************************************************/ .slvideocontainer { width: 100%;padding-bottom: 56.7%;margin-right: 0px;margin-bottom: 20px; } /************************************************************************************ handset plan *************************************************************************************/ .hsplancontactsection { padding: 20px 15px; } .hsplancttitleframe { margin-right: 0px; } .hsplancttitle { font-size: 28px; } .hsplancttitleen { font-size: 28px;line-height: 100%; } .hsplanctbut { font-size: 18px;padding: 10px 50px;margin-top: 10px; } .phone5gsection { padding: 20px 15px; } .p9sliderframe { width: 98%; } .phone5gframe { width: 38%;margin: 0px 0px 0px 40px; } .phone5gpdtname { height: 90px; font-size: 18px;padding-left: 6px; } .hsplanbut { font-size: 14px;padding: 10px 50px;margin-bottom: 10px; } .hsplanremarkL { text-align: left;float: left;margin: 5px 0px; } .hsplanremarkR { text-align: left;float: left;margin: 5px 0px; } /************************************************************************************ hkpc *************************************************************************************/ .hkpctablewidthicon { width: 800px; } /************************************************************************************ Robotic *************************************************************************************/ .robtablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .robtablewidthicon { width: 500px; } .robtablewidthiconen { width: 800px; } .robiconbut { scroll-snap-align: center; } /************************************************************************************ solution *************************************************************************************/ .soltablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .soltablewidthicon { width: 1200px; } .soltablewidthiconen { width: 1800px; } .soliconbut { scroll-snap-align: center; } .solframe { text-align: center; } .solstepimg { width: 80%; } .solsteparrow { width: 80%; text-align: center; padding-top: 0px; } .solsteparrowrotate { transform: rotate(90deg); } /************************************************************************************ 3education *************************************************************************************/ .dropdown-content { padding: 10px 0px;margin: 12px 0px 0px 0px;width: 100%;left: 0px; } .edutablewidthicon { width: 750px; } .edutablewidthiconen { width: 1000px; } .eduiconbut { scroll-snap-align: center; } .eduiconpd { width: 95%;padding: 10px 0px 10px 10px; } .edutablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .educontactsection { padding: 20px 15px; } .educolL { width: 100%;margin-right: 0%;font-size: 16px;margin-bottom: 25px; } .educolR { width: 100%;margin-bottom: 25px;float: none; } .edutitle { font-size: 24px;margin-bottom: 15px; } .edupt { font-size: 16px;margin-bottom: 15px; } .edubut { font-size: 18px;padding: 12px 18px;margin-top: 15px;width: 100%;text-align: center; } /************************************************************************************ sme *************************************************************************************/ .smecontactsection { padding: 20px 15px; } .smetablewidthicon { width: 560px;margin-bottom: 20px; } .smetablewidthiconen { width: 900px;margin-bottom: 20px; } .smeiconbut { margin: 0px 10px;scroll-snap-align: center;font-size: 16px; } .smetablewidthplan4 { width: 1200px; } .smetablewidthplan3 { width: 950px; } .smetablewidthplan2 { width: 620px; } .smetablewidthplan1 { width: 99%; } .smecontentcol4 { padding: 20px 0px;scroll-snap-align: center; } .smecontentcol3 { width: 31.8%; padding: 20px 0px;scroll-snap-align: center; } .smecontentcol2 { width: 48%; padding: 20px 0px;scroll-snap-align: center; } .smecontentcol1 { width: 100%; padding: 20px 0px;scroll-snap-align: center; } .smeplantitle { font-size: 26px; } .smeplanpttxtul { font-size: 16px; } .smeiconframe { width: 76%;margin: 8px 0px; } .smeiconframeen { width: 98%;margin: 8px 0px;height: auto; } .smecontenttitleXL { font-size: 16px; padding-left: 16px; } .smecontentcontentXL { font-size: 32px; padding-right: 16px; } .smecontenttitle { font-size: 16px; padding-left: 16px;line-height: 120%;width: 100%;margin-bottom: 0px; } .smecontentcontent { font-size: 16px; padding-right: 16px;line-height: 120%;width: 100%;margin-top: 0px;text-align: left;padding-left: 121px; } .smetablewidthpdt { width: 900px; } .smepdtbanner { width: 31.8%;scroll-snap-align: center; } .smetablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .smeplanbbtablewidthplan2 { width: 100%; } .smeplanbgtitle { font-size: 16px; } .smeplanpdtimg { width: 90px; } .smeplanpdttxt { width: 60%;font-size: 16px; } .smeplanpdttxt2 { font-size: 20px; } .smeplandayicon { width: 75px;top: 5px;right: 0px; } .smeplanbbheight { height: auto; } .smeplanbbwidth { width: 98%; } .smeroutorcontainer { text-align: left; } .smeroutorframe { width: 45%;margin: 0px 5px 20px 5px; } .smeroutorcontent { font-size: 16px;margin-bottom: 20px; } .smeroutortxt { font-size: 16px; } .spectable { font-size: 14px; } .spectitletd { font-size: 14px;padding: 8px 6px;width: 40%; } .speccontenttd { font-size: 14px;padding: 8px 6px; } .smegrid-container { grid-template-columns: auto; grid-template-rows: auto; } .smecontentcolfull { padding: 0px 0px 20px 0px; } .smedaysiconimg { width: 55px; } .smebbplantitlebold { font-size: 30px; } .smebbplantxtbold { font-size: 30px; } .smebbplantxt { font-size: 16px; } .smebbplanoffer { font-size: 16px; } .smebbplanwhttxt { font-size: 16px;width: 80%; } .smepticonimg { width: 74px; } /************************************************************************************ plans5g45g *************************************************************************************/ .plancontactsection { padding: 20px 15px; } .plancttitleframe { margin-right: 0px; } .plancttitle { font-size: 28px; } .plantablescroll { width: 100%; overflow: scroll;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory; } .plantablewidthicon { width: 700px;margin-bottom: 20px; } .plantablewidthiconen { width: 900px;margin-bottom: 20px; } .planiconbut { margin: 0px 10px;scroll-snap-align: center;font-size: 16px; } .plantablewidthplan4 { width: 1200px; } .plantablewidthplan3 { width: 950px; } .plantablewidthplan2 { width: 620px; } .plancontentcol4 { padding: 20px 0px;scroll-snap-align: center; } .plancontentcol3 { width: 31.8%; padding: 20px 0px;scroll-snap-align: center; } .plancontentcol2 { width: 48%; padding: 20px 0px;scroll-snap-align: center; } .plancontenttitleXL { font-size: 16px; padding-left: 16px; } .plancontentcontentXL { font-size: 32px; padding-right: 16px; } .plancontenttitle { font-size: 16px; padding-left: 16px;line-height: 16px; } .plancontentcontent { font-size: 16px; padding-right: 16px;line-height: 16px; } .plancontentcontentM { font-size: 22px; padding-right: 16px;line-height: 10px; } .plantitle { font-size: 26px;margin-bottom: 20px; } .plancontactustitle { font-size: 26px;margin-bottom: 15px; } /************************************************************************************ contact us *************************************************************************************/ .contactussection { padding: 20px 15px; } .contactuscol { width: 100%;height: auto;position: inherit;float: none; } .contactusformboxframe { position: inherit;top: 0px;left: 0px; } .contactusformcontentframe { width: 100%;margin: 0px 0px; } .cbcontainer { font-size: 14px; } .contactusconfirmbut { padding: 15px 45px; } .contactusmsgtxt { width: 100%;font-size: 16px;margin: 50px 0px 0px 0px; } .contactusmsgtxttitle { font-size: 18px;line-height: 140%; } .contactusmsgtxtcol1 { width: 40%; } .contactusmsgtxtcol2 { width: 58%; } .contactusmsgtxtcol1en { width: 48%;font-size: 16px; } .contactusmsgtxtcol2en { width: 50%;font-size: 16px; } input[type=text], input[type=password] { font-size: 18px; } .cbticktitle { font-size: 18px; } .cbtick { font-size: 18px !important; } .formtextarea { font-size: 18px; } /************************************************************************************ solution new *************************************************************************************/ .coltablewidth { width: 97%; } .frametitle { padding: 0px 0px 20px 0px; } .framehsprice { width: 100%; } .framehsoffer { width: 100%; } .mainpagepromocol3photomob { display: inline; } .mainpagepromocol3 { width: 98.2%;height: auto;margin-bottom: 25px; } .mainpagepromosupport { width: 98%;margin-bottom: 25px; } .col3L { float: none; } .col3R { float: none; } .mainpagepromocol3photo { width: 100%;height: auto;line-height: 0%;height: 215px; } .mainpagepromocol3.mainslidertxt1 photomob { display: inline; } .boxsmallnopad { padding: 0px 4px 0px 4px; } .frametitle { padding: 0px 0px 20px 0px; } .mainpagetitle { font-size: 1.8em;line-height: 140%; width: 100%; } /************************************************************************************ topnav *************************************************************************************/ .topnavframe { width: 900px;font-size: 14px; } .topnavbutoff { padding: 12px 18px; } .topnavbuton { padding: 12px 18px; } .languagebutton { font-size: 14px;padding: 8px 30px;border-radius: 5px;margin-left: 70px;margin-top: 15px; } .slider { scroll-snap-type: mandatory; scroll-snap-points-y: repeat(20vw); scroll-snap-type: x mandatory; display: flex; overflow-x: scroll; font-size: 14px; -webkit-overflow-scrolling:touch; } section { padding: 12px 18px; width: auto; scroll-snap-align: center; text-align: center; position: relative; white-space: nowrap; -webkit-overflow-scrolling:touch; } .nav-link { padding: 8px 12px 8px 15px; border-bottom: 1px #dbdbdb solid; margin-left: 55px; } .nav-link.dark:hover { background-image: url(menuline-mob.png); background-size: 10px 100%; background-position: 0px; border-bottom: 1px #dbdbdb solid; } .w-dropdown-list{ min-width:80% } .dropdown-list { padding: 4px 0px; width: 80%; margin-left: 65px; border-bottom: 1px #dbdbdb solid; } .dropdown-list.w--open { box-shadow: 0px 0px 8px rgba(0,0,0,0); } /* ========================================================================== solution ========================================================================== */ .solcctv { width: 100%; } /**** form ****/ .formreset { font-size: 17px;padding: 5px 10px; } .newsletterinputtxt { font-size: 14px; width: 45%; } .newslettersubmit { font-size: 16px;padding: 5px 20px; } /**** form ****/ .section { padding: 40px 10px; } .detailbut { width: 100% } .evppl { width: 48%; padding-bottom: 40px; font-size: 15px; } .ev6logoframe {display: inline-block; width: 48%;text-align: center; padding-bottom: 40px; font-size: 18px; vertical-align: top; } .ev6logo { width: 120px; } .ev6tabletime { width: 50% } .ev6tabletimeen { width: 40% } .ev6td { font-size: 16px } .ev6tden { font-size: 14px } .ev6name { width: 100%; } .ev6nametitle { width: 100%; padding-left: 25px; padding-top: 0px; padding-bottom: 20px; } .ev6nametc { width: 100%; } .ev6nametitletc { width: 100%; padding-left: 27px; padding-top: 0px; padding-bottom: 20px; } .ev6comname { width: 40%; } .ev6comcontent { width: 60%; } .tablewidthcontent { width: 88% } .tablewidth { width: 100% } .tablewidthev { width: 100% } .tablewidthplan { width: 580px } .eventtablewidthplan { width: 100% } .tmpeventtable { font-size:14px; } .tmptable { font-size:14px; } .tmptableadd { font-size:14px; } .stepframe { width: 49%; padding-bottom: 30px; font-size: 12px; } .smehsbanner { width: 100%; padding: 0px 0px 20px 0px; } .awplanbutover { width: 96%; margin: 0px 0px 10px 0px } .awplanbut { width: 96%; margin: 0px 0px 10px 0px } .homeframe1 { width: 100%; } .photocol2homeframe { width: 100%; height: 260px; border: 0px solid #fff; } .homeframe2 { width: 100%; } .photocol1homeframe { width: 100%; height: 800px; border: 0px solid #fff; } .photocol1frame { width: 100%; height: 260px; border: 0px solid #fff; margin-top: 0px; } .photocol1 { font-size: 30px; line-height: 85%; width: 100%; height: 260px; padding-top: 20px; background-size: cover; background-position: -770px 0px; } .photocol2frame { width: 100%; height: 380px; border: 0px solid #fff; } .photocol2 { font-size: 30px; line-height: 85%; width: 100%; height: 380px; padding-top: 20px; } .photocol3frame { width: 100%; height: 260px; border: 0px solid #fff; } .photocol3 { font-size: 30px; line-height: 85%; width: 100%; height: 260px; padding-top: 20px; } .photodes { font-size: 15px; line-height: 16px; text-transform: none;} /* .contactuspopup { background-image: url(../images/bg-contactus-mob.png);justify-content: center;padding: 0px 5px; } .contactuspopupicon { padding-top: 12px; padding-right: 18px; width: 50px; height: 50px; } .contactusformframe { width: 96%;margin-bottom: 50px; } .contactusformtable { width: 100%; } .contactustitle { font-size: 16px;margin-right: 5px;width: 32%; } .contactusbut { font-size: 12px;padding: 4px 5px;margin: 0px 3px; } .contactusbutimg { height: 22px; vertical-align: -6px; } .contactuspopupen { display: inline-block;text-align: center; } .contactustitleen { font-size: 12px;margin-right: 0px;width: 100%;display: inline-block;margin-bottom: 7px;margin-top: 4px; text-align: center; } .contactusbuten { padding: 2px 5px; } */ .top-margin.more.add { margin-top: 10px; } .biger { font-size: 34px; line-height: 45px; } .anametop { top: -90px; } .pageheader { padding: 30px 10px 60px 10px; } .bgaboutus { background-size: cover; background-position: center top; } .abpart1photoarea { width: 100%; text-align: center; padding-top: 20px; } .abpart1txtarea { width: 100%; } .abpart1photo { width: 100% } .bgsme { background-size: cover; background-position: center top; } .bgsolution { background-size: cover; background-position: center top; } .bgworld { background-size: cover; background-position: center top; } .part1txtarea { width: 100%; padding-bottom: 0px; } .part1photoarea { width: 100%; text-align: center; padding-bottom: 80px; } .part1photosize { width: 100%; } .bgpns { background-size: cover; background-position: center top; } .meetrm { width: 100%; } .bgevent { background-size: cover; background-position: center top; } .bgcontactus { background-size: cover; background-position: center top; } .contactusframe { width: 100%; padding-bottom: 70px } .titlekeyf { font-size: 16px; } .keypoint { font-size: 16px; } .bgsection2 { background-size: cover; } .bgsection3 { background-size: cover; } .videotitle { font-size: 18px; } .videotitletxt { font-size: 14px; } .displaypc { display: none } .displaymob { display: inline-block; } .displaypclogin { display: none } .displaymoblogin { display: inline-block; padding-left: 15px; } .headingland { font-size: 30px; line-height: 40px; } .headinglandsub { font-size: 26px; } .logo { width: auto; height: 40px;padding: 0px 13px; } #topheight {clear: both;height: 50px} .bgsectionsme { background-image: url(../images/sme-offerbg-mob.jpg); background-position: center top; background-size: cover; } .smesubtitle { font-size: 26px; line-height: 32px; } .paragraph { font-size: 15px; line-height: 24px; } .service-style-4 { height: auto; } .heading-1 { font-size: 32px; } .titledes { color: #464646; font-size: 16px; line-height: 30px; } .slide-1 { background-image: url("../images/mainslider-mob.jpg"); background-size: cover; } .banner.with-slider { height: 500px; } .banner.style-3 { height: 400px; } .section.no-bottom-margin { padding-bottom: 80px; } .heading-1.white.biger { font-size: 30px; } .div-block { margin-bottom: 20px; } .tab-testi { top: auto; } .testi-photo { display: inline-block; } .testi-wrapper { width: 100%; } .subscribe-wrapper { width: 100%; } .sub-field { width: 60%; } .submit-button { width: 40%; } .blog-image { width: 100%; margin-right: 0px; margin-bottom: 20px; float: none; } .biger.more { font-size: 40px; line-height: 50px; } } @media screen and (max-width: 1600px) { .achframe-scoll{ position: fixed; top: 73px; /*left: 0;*/ background-color: #fff; width: 100%; z-index: 999999; } } @media screen and (max-width: 1024px) { .achframe-scoll{ top: 55px; } .nwsmhomembbtn { padding: 10px 40px; font-size: 14px; } } @media screen and (max-width: 768px) { .achframe-hidden-en{ height: 63px; } .supofferheader2 { height: auto;display: inline-block;font-size: 16px;font-weight: bold;line-height: 120%;color: #000; margin-bottom:5px ;} .nwsmhomembbtn { padding: 10px 40px; font-size: 10px; } .smwtsappcontainerIM { border-radius: 0; bottom: 0; right: 0; width: 100%; height: 90%; box-shadow: none; } .achframe-scoll{ top: 60px; } } @media screen and (max-width: 700px) { .achframe-hidden-en{ height: 90px; } } @media screen and (max-width: 414px) { .achframe-scoll{ top: 51px; width: 96%; } } @media screen and (min-width: 414px) and (max-width: 480px){ .achframe-scoll{ top: 50px; width: 96%; } } /*@media screen and (max-width: 880px) { .achframe-scoll{ width: 96%; left: 2%; } }*/ /* ========================================================================== offer pages ========================================================================== */ .sainfocolL { width: 10%; height: auto; display: inline-block; vertical-align: top; margin-bottom: 10px; } .sainfocolR { width: 88%; height: auto; display: inline-block; vertical-align: top; margin-bottom: 10px; } @media screen and (min-width: 414px) and (max-width: 480px){ .sainfocolL { width: 30%; } .sainfocolR { width: 68%; } } /* ========================================================================== offer pages ========================================================================== */ .supoffersetfr2 { width: 100%; height: auto; display: inline-block; background-color: #fff; line-height: 120%; position: relative; box-shadow: 0px 4px 12px #00000015;; } .sellingptframe { width: 25%; height: auto; display: inline-block; margin: 20px 1% 0% 1%; vertical-align: top; } .sellingpt{ width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; border-radius: 100%; } .supofferremark { font-size: 16px; line-height: 120%; display: inline-block; } /*------------new style------------*/ .supofferset3b1 { width: 30%; height: auto; display: inline-block; vertical-align: middle; overflow: hidden; } .supofferset3b2 { width: 48%; height: auto; display: inline-block; padding: 20px 0px 0px 20px; vertical-align: top; /*position: absolute; left: 0%; top: 50%; transform: translateY(-50%);*/ } .supofferset3b3 { width: 20%; height: auto; display: inline-block; padding: 0px 10px 0px 0px; vertical-align: middle; text-align: center; } .supoffertitle{ font-size: 28px; font-weight: bold; line-height: 120%; margin-bottom: 5px; height:auto; } .supoffertitleen{ font-size: 22px; font-weight: bold; line-height: 120%; margin-bottom: 5px; height:auto; } /*------------new style------------*/ .supofferset2a2 { width: 42%; height: auto; display: inline-block; float: right; overflow: hidden; } .supofferset2b2 { width: 58%; height: auto; display: inline-block; padding: 0px 0px 0px 40px; position: absolute; left: 0%; top: 50%; transform: translateY(-50%); } .supofferheader2 { height: auto; display: inline-block; font-size: 24px; font-weight: bold; line-height: 120%; color: #000; margin-bottom: 5px; } .nwsmtopbutframe2{ width: 90%; height: auto;display: inline-block;margin: 0px 1%; } .nwsmtopbut2 { width: 100%; height: auto; font-size: 20px; color: #fff; font-weight: bold; line-height: 100%; background-image: linear-gradient(to right, #293794 , #009aa9); border-radius: 10px; cursor: pointer; padding: 12px 0px; border-radius: 60px; box-shadow: 0px 3px 10px #a9a9a9; display: flex; justify-content: center; align-items: center; text-align: center; } .nwsmtopbut2:hover{ color: #ffce02; text-decoration: none !important; } .offerdetailtxt{ font-size: 18px; color: #e6007e !important; } .nwsmtopbut2id { width: 100%; height: auto; font-size: 18px; color: #fff; font-weight: bold; line-height: 100%; background-image: linear-gradient(to right, #293794 , #009aa9); border-radius: 10px; cursor: pointer; padding: 12px 0px; border-radius: 60px; box-shadow: 0px 3px 10px #a9a9a9; display: flex; justify-content: center; align-items: center; text-align: center; } .nwsmtopbut2id:hover{ color: #ffce02; text-decoration: none !important; } .offertitle { width: auto; height: auto; display: inline-block; padding: 12px 36px; background: #2b338c; font-size: 16px; font-weight: bold; line-height: 120%; color: #ffce02; margin: 5px 0px; border-radius: 30px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; } .offertitleen { width: auto; height: auto; display: inline-block; padding: 4px 24px; background: #2b338c; font-size: 16px; font-weight: bold; line-height: 120%; color: #ffce02; margin: 2px 0px; border-radius: 30px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; } .offerdate { display: inline-block; font-size: 16px; line-height: 120%; color: #f20000; } .offerdateen { display: inline-block; font-size: 12px; line-height: 120%; color: #f20000; } .offerremark { display: inline-block; font-size: 18px; line-height: 120%; color: #000; margin: 5px 0px; } .offerremarken { display: inline-block; font-size: 15px; line-height: 120%; color: #000; margin: 5px 0px; } .offerdataprice { width: auto; height: auto; display: inline-block; font-size: 20px; font-weight: bold; line-height: 120%; padding-left: 10px; border-bottom: 3px solid #ffce02; } .offerpro { font-size: 28px; line-height: 135%; font-weight: bold; display: inline-block; vertical-align: top; } @media screen and (max-width: 1342px){ .supoffertitle{ font-size:25px ; } .supoffertitleen{ font-size:20px ; } .offerdate{ font-size: 14px; } .offerdateen{ font-size: 9px; } .offerdetailtxt{ font-size: 16px; } } @media screen and (max-width: 1260px){ .nwsmbutimgoff { width: 26px;height: 26px; } .nwsmbutimgon { width: 26px;height: 26px; } .nwsmtopbut2 { font-size: 16px; padding: 8px 0px; } .supoffertitle{ font-size:24px ; } .supoffertitle{ font-size:19px ; } .offerremark{ font-size: 14px; } .offerremarken{ font-size: 12px; } .offerdetailtxt{ font-size: 14px; } } @media screen and (max-width: 1150px){ .supofferset3b3 { padding: 0px 10px 0px 0px; } .nwsmbutimgoff { width: 22px;height: 22px; } .nwsmbutimgon { width: 22px;height: 22px; } .supoffertitle{ font-size:20px ; } .supoffertitleen{ font-size:16px ; } .offerremark{ font-size: 13px; } .offerremarken{ font-size: 11px; } .offertitle { padding: 4px 20px; font-size: 12px; margin: 5px 0px; } .offertitleen { padding: 4px 20px; font-size: 10px; margin: 5px 0px; } .offerpro { font-size: 20px; } .offerdetailtxt{ font-size: 12px; } } @media screen and (max-width: 1024px){ .supofferset3b3 { padding: 0px 10px 0px 0px; } .offerdate { font-size: 10px; } .offerdateen { font-size: 6px; } .offerremark{ font-size: 12px; } .offerremarken{ font-size: 10px; } .supoffertitle{ font-size: 19px; } .supoffertitleen{ font-size: 15px; } .offerdetailtxt{ font-size: 11px; } .nwsmbutimgoff { width: 21px;height: 21px; } .nwsmbutimgon { width: 21px;height: 21px; } .sellingpt { width: 140px; height: 140px; } .nwsmtopbutframe2 { width: 90%; } } @media screen and (max-width: 960px) { .supofferset3b2 { padding: 10px 0px 0px 20px; } .supofferset3b3 { padding: 0 10px 0px 0px; } .nwsmbutimgoff { width: 20px;height: 20px; } .nwsmbutimgon { width: 20px;height: 20px; } .offerdetailtxt{ font-size: 10px; } .supoffertitle{ font-size: 14px; } .supoffertitleen{ font-size: 10px; } .supofferset2b2 { padding: 0 10px; } .offerremark{ font-size: 8px; } .offerremarken{ font-size: 6px; } .nwsmtopbut2 { padding: 6px 0px; font-size: 11px; } .sellingptframe { width: 40%; } .supofferheader2 { font-size: 18px; } .offertitle { padding: 4px 20px; font-size: 10px; margin: 1px 0px; } .offertitleen { padding: 3px 20px; font-size: 10px; margin: 1px 0px; } .offerpro { font-size: 16px; } .nwsmtopbutframe2 { width: 90%; } } @media screen and (max-width: 684px) { .nwsmbutimgoff { width: 20px;height: 20px; } .nwsmbutimgon { width: 20px;height: 20px; } .offertitle { padding: 4px 20px; font-size: 22px; margin: 8px 10px; } .offertitle { padding: 4px 20px; font-size: 20px; margin: 8px 10px; } .offerpro { font-size: 30px; } .supoffertitle { font-size: 28px; } .supoffertitleen { font-size: 23px; } .nwsmtopbut2 { padding: 10px 0px; font-size: 18px; } .offerdate { font-size: 16px; } .offerdateen { font-size: 13px; } .offerdetailtxt{ font-size: 16px; } .supofferset3b1 { width: 100%; float: none; } .nwsmtopbutframe2 { width: 50%; } .supofferset3b2 { width: 100%; padding: 15px 10px; position: inherit; right: 0%; top: 0%; transform: translateY(0%); text-align: center; } .offerremark{ font-size: 14px; } .offerremarken{ font-size: 12px; } .supofferset3b3 { width: 100%; padding: 15px 10px; position: inherit; right: 0%; top: 0%; transform: translateY(0%); text-align: center; } .supofferset2a2 { width: 100%; float: none; } .supofferset2b2 { width: 100%; padding: 15px 10px; position: inherit; right: 0%; top: 0%; transform: translateY(0%); text-align: center; } } @media screen and (max-width: 480px) { .suplistpopupcontainer{ width: 150% !important; } .supoffertitle { font-size: 20px; } .supoffertitleen { font-size: 20px; } .offerdetailtxt{ font-size: 16px; } .supofferset3b1 { width: 100%; float: none; } .supofferset3b2 { width: 100%; padding: 15px 10px; position: inherit; right: 0%; top: 0%; transform: translateY(0%); text-align: center; } .supofferset3b3 { width: 100%; padding: 15px 10px; position: inherit; right: 0%; top: 0%; transform: translateY(0%); text-align: center; } .supofferset2a2 { width: 100%; float: none; } .supofferset2b2 { width: 100%; padding: 15px 10px; position: inherit; right: 0%; top: 0%; transform: translateY(0%); text-align: center; } .sellingptframe { width: 40%; margin: 20px 1% 0% 1%; } .nwsmtopbut2 { padding: 8px 0px; font-size: 16px; } .sellingpt { width: 120px; height: 120px; } .nwsmtopbutframe2 { width: 70%; } .offerdate { font-size: 14px; } .offerdateen { font-size: 11px; } .offerremark { font-size: 14px; } .offerremarken { font-size: 14px; } .supoffersetfr2 { margin-bottom: 20px; } } /* ========================================================================== shop TC,EN,ID ========================================================================== */ .txtblue{ color: #293794; font-size: 20px; line-height: 125%; font-weight: bold; } /* .set3table { border-collapse: collapse; border: 2px solid #dbdbdb; padding: 0px; text-align: center; font-size: 16px; line-height: 110%; font-weight: normal; padding: 24px 40px; border-radius: 30px; }*/ /* .roamactivepgbut3shop { width: auto; font-size: 15px; font-weight: bold; color: #fff; padding: 10px 40px; text-align: center; display: inline-block; background-image: linear-gradient(to right, #293794 , #009aa9); box-shadow: 0px 3px 10px #a9a9a9; border-radius: 60px; cursor: pointer; justify-content: center; align-items: center; text-align: center; }*/ .roamactivepgbutframe2new { width: 100%; text-align: center; display: inline-block; padding: 1px 10px; } .set1tableLnew { background: #e4eff5; } .set1tableRnew { background: #fff; } .carticon{ width: 18px; height: auto; padding-bottom: 2px; display: inline-block; } .blankicon{ width: 1px; height: auto; padding-bottom: 2px; display: inline-block; } /* .roamactivepgbuthft{ width: auto; font-size: 15px; font-weight: bold; color: #fff; padding: 10px 40px; text-align: center; display: inline-block; border-radius: 10px; margin: 10px 0px; }*/ .nwsmtopbutframeshop { width: 80%; height: auto; display: inline-block; margin: 10px 1%; } .nwsmtopbut { /*width: 100%; width: fit-content;*/ height: auto; width:100%; float:left; font-size: 18px; color: #fff; font-weight: bold; /*border-bottom: 3px solid #ff7c00;*/ line-height: 150%; background: #ff7c00;/*background-image: linear-gradient(to right, #000000 , #333);*/ cursor: pointer; /*padding:22px 0px;*/ padding: 5px 10px; /*border-radius: 20px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;*/ /*box-shadow: 0px 3px 10px #a9a9a9;*/box-shadow: none !important; display: flex; justify-content: center; align-items: center; text-align: center; } .nwsmtopbutempty { width: 100%; height: auto; font-size: 18px; color: #fff; font-weight: bold; line-height: 100%; background-color: #fff; border-radius: 10px; padding:12px 0px; border-radius: 60px; display: flex; justify-content: center; align-items: center; text-align: center; } .nwsmbutimgoff { width: 36px; height: 36px; display: inline-block; vertical-align: -10px; margin: 0px 3px; filter: invert(100%) sepia(0%) saturate(27%) hue-rotate(118deg) brightness(107%) contrast(107%); } .nwsmbutimgoff-s { width: 26px; height: 26px; display: inline-block; /*vertical-align: -10px;*/vertical-align: -5px; margin: 0px 3px; filter: invert(100%) sepia(0%) saturate(27%) hue-rotate(118deg) brightness(107%) contrast(107%); } .nwsmbutimgon { width: 24px;height: 24px;display: inline-block;vertical-align: -10px;margin: 0px 3px;filter: invert(74%) sepia(86%) saturate(1392%) hue-rotate(359deg) brightness(103%) contrast(107%); } .nwsmtopbutframeshop{ width: 24%; height: auto; display: inline-block; margin: 10px 1%; } .nwsmtopbutframeshopbtn { width: 80%; height: auto; display: inline-block; margin: 10px 1%; } @media screen and (max-width: 1024px) { .nwsmbutimgoff { width: 20px;height: 20px; } .nwsmbutimgon { width: 20px;height: 20px; } .nwsmtopbutempty { font-size: 14px; } .nwsmtopbut { font-size: 14px; } .nwsmhomembframeshop1{ height: auto; border-radius: 50px; border-top-left-radius: 1px; } .nwsmhomembframeshop3{ height: auto; border-radius: 50px; border-top-left-radius: 1px; } .nwsmhomembframeshop4 { height: auto; border-radius: 50px; border-top-left-radius: 1px; } } @media screen and (max-width: 768px) { .nwsmtopbutframeshopbtn{ width: 90%; margin: 4px 2px; } .nwsmbutimgoff { width: 18px;height: 18px; } .nwsmbutimgon { width: 18px;height: 18px; } .nwsmtopbut { font-size: 12px; } .nwsmtopbutempty { font-size: 12px; } .nwsmtopbutframeshop { width: 90%; margin: 4px 2px; } .nwsmtopbut { /*height: 46px;*/ font-size: 16px; } .nwsmhomembframeshop1 { width: 90%; height: auto; margin: 10px 20px; /*padding: 50px 0px 20px 0px;*/ margin-top: 36px; border-radius: 40px; border-top-left-radius: 1px; } .nwsmhomembframeshop3 { width: 90%; height: auto; margin: 10px 20px; /*padding: 50px 0px 20px 0px;*/ margin-top: 36px; border-radius: 40px; border-top-left-radius: 1px; } .nwsmhomembframeshop4 { width: 40%; height: auto; margin: 10px 20px; /*padding: 50px 0px 20px 0px;*/ margin-top: 36px; border-radius: 40px; border-top-left-radius: 1px; } } @media screen and (max-width: 700px) { .nwsmtopbutframeshop{ width: 80%; } } @media screen and (max-width: 480px) { .set3table { border-collapse: collapse; /*border: 2px solid #dbdbdb; padding: 0px; */ text-align: center; font-size: 16px; line-height: 110%; font-weight: normal; padding: 24px 10px; border-radius: 30px; } .roamactivepgbut3 { width: auto; font-size: 18px; font-weight: bold; color: #f9c709; padding: 10px 30px; text-align: center; display: inline-block; background-color: #2c2d87; cursor: pointer; } .roamactivepgbutframe2new { width: 100%; text-align: center; display: inline-block; padding: 1px 10px; } .normalbuton { padding: 10px 0px; width: 100%; margin-bottom: 14px; text-align: center; } .nwsmtopbutframeshop { width: 90%; margin: 4px 2px; } .nwsmtopbut { /*height: 46px;*/ font-size: 18px; } .nwsmbutimgoff { width: 30px;height: 30px; } .nwsmbutimgon { width: 30px;height: 30px; } .nwsmhomembframeshop1 { width: 90%; height: auto; margin: 0px 0%; padding: 0px 0px 20px 0px; margin-top: 36px; border-radius: 40px; border-top-left-radius: 1px; } .nwsmhomembframeshop3 { width: 90%; height: auto; margin: 0px 0%; padding: 50px 0px 20px 0px; margin-top: 36px; border-radius: 40px; border-top-left-radius: 1px; } .nwsmhomembframeshop4 { width: 90%; height: auto; margin: 0px 0%; padding: 50px 0px 20px 0px; margin-top: 36px; border-radius: 40px; border-top-left-radius: 1px; } } .ccontainer{ display: flex; flex-wrap: nowrap; grid-gap:2%; } .ccontainer > div{ display: inline-block; margin: 0px; vertical-align: top; scroll-snap-align: center; } .clefttext{ font-weight: bold; font-size: medium; text-align:right; width:36%; } .crighttext{ text-align:left; width:64%; } .cborder{ /* color: #293794; */ font-size:xx-large; color: #009aa9; float: right; /* border: #009aa9 2px solid; */ padding-top: 8px; width: 100%; height: auto; vertical-align: top; } @media screen and (max-width: 1150px) { .clefttext{ text-align:right; width:26%; } .crighttext{ text-align:left; width:74%; } .cborder{ padding-top: 4px; font-size:x-large; } } @media screen and (max-width: 800px) { .clefttext{ text-align:right; width:32%; } .crighttext{ text-align:left; width:68%; } .cborder{ padding-top: 1px; font-size:large; } } @media screen and (max-width: 700px) { .clefttext{ font-weight: bold; font-size: medium; text-align:right; width:25%; } .crighttext{ text-align:left; width:75%; } }