.u-section-1 .u-sheet-1 {min-height: 375px}
.u-section-1 .u-slider-1 {width: 1140px; min-height: 375px; margin: 0}
.u-section-1 .u-carousel-indicators-1 {position: absolute; bottom: 10px}
.u-section-1 .u-container-layout-1 {padding: 30px}
.u-section-1 .u-carousel-control-1 {background-image: none; width: 50px; height: 50px; left: 490px; top: 413px; position: absolute}
.u-section-1 .u-carousel-control-2 {background-image: none; width: 50px; height: 50px; left: 603px; top: 413px; position: absolute} 
.u-section-1 .u-image-1 {background-image: url("/content/dam/hutchison/dt-mobileonline/mo-mini-site/demo-site/image/introduction/tc/landing-slider-1440.png"); background-position: 50% 50%}
.content_width{max-width: 1440px;margin: 0 auto; }


@media (max-width: 1199px){ .u-section-1 .u-slider-1 {width: 940px}
.u-section-1 .u-carousel-control-1 {left: calc(((100% - 940px) / 2)  + 389px); top: auto; right: auto; bottom: -89px}
.u-section-1 .u-carousel-control-2 {left: auto; top: auto; right: calc(((100% - 940px) / 2)  + 389px); bottom: -89px} 

@media (max-width: 991px){ .u-section-1 .u-slider-1 {width: 720px}
.u-section-1 .u-carousel-control-1 {left: calc(((100% - 720px) / 2)  + 279px)}
.u-section-1 .u-carousel-control-2 {right: calc(((100% - 720px) / 2)  + 279px)} }

@media (max-width: 767px){ .u-section-1 .u-sheet-1 {min-height: 400px; height: 400px;}
.u-section-1 .u-slider-1 {width: 540px;margin-bottom: 60px}
.u-section-1 .u-container-layout-1 {padding-left: 10px; padding-right: 10px}
.u-section-1 .u-carousel-control-1 {left: calc(((100% - 540px) / 2)  + 189px)}
.u-section-1 .u-carousel-control-2 {right: calc(((100% - 540px) / 2)  + 189px)} }
.u-section-2 {height: 700px; min-height: 700px;}
.u-section-2 {height: 650px; min-height: 650px;}}

@media (max-width: 575px){ .u-section-1 .u-slider-1 {width: 340px}
.u-section-1 .u-carousel-control-1 {left: calc(((100% - 340px) / 2)  + 89px)}
.u-section-1 .u-carousel-control-2 {right: calc(((100% - 340px) / 2)  + 89px)} }.u-section-2 .u-sheet-1 {min-height: 710px}
.u-section-2 .u-layout-wrap-1 {pointer-events: auto; margin: 37px 0 60px}
.u-section-2 .u-image-1 {min-height: 590px; pointer-events: auto; background-image: url("/content/dam/hutchison/dt-mobileonline/mo-mini-site/demo-site/image/introduction/tc/1.png"); background-position: 50% 50%}
.u-section-2 .u-container-layout-1 {padding: 30px 60px}
.u-section-2 .u-layout-cell-2 {min-height: 590px; pointer-events: auto}
.u-section-2 .u-container-layout-2 {padding: 30px 60px}
.u-section-2 .u-text-1 {margin: 0}
.u-section-2 .u-text-2 {margin: 20px 0 0}
.u-section-2 .u-image-2 {width: 200px; margin: 0 10px 10px 0}
.u-section-2 .u-btn-1 {text-transform: uppercase; font-size: 0.875rem; letter-spacing: 2px; background-image: none; border-style: solid; margin: 20px auto 0 0; padding: 10px 34px} 
.u-section-1 .u-image-1 {background-image: url("/content/dam/hutchison/dt-mobileonline/mo-mini-site/demo-site/image/introduction/tc/landing-slider-m-c.png"); background-position: 50% 50%}


@media (max-width: 1199px){ .u-section-2 .u-sheet-1 {min-height: 481px}
.u-section-2 .u-layout-wrap-1 {margin-right: initial; margin-left: initial}
.u-section-2 .u-image-1 {min-height: 486px}
.u-section-2 .u-layout-cell-2 {min-height: 486px} }

@media (max-width: 991px){ .u-section-2 .u-sheet-1 {min-height: 367px}
.u-section-2 .u-image-1 {min-height: 372px}
.u-section-2 .u-container-layout-1 {padding-left: 30px; padding-right: 30px}
.u-section-2 .u-layout-cell-2 {min-height: 100px}
.u-section-2 .u-container-layout-2 {padding-left: 30px; padding-right: 30px} }

@media (max-width: 767px){ .u-section-2 .u-sheet-1 {min-height: 653px}
.u-section-2 .u-image-1 {min-height: 558px}
.u-section-2 .u-container-layout-1 {padding-left: 10px; padding-right: 10px}
.u-section-2 .u-container-layout-2 {padding-left: 10px; padding-right: 10px} }

@media (max-width: 575px){ .u-section-2 .u-sheet-1 {min-height: 446px}
.u-section-2 .u-image-1 {min-height: 300px} }.u-section-3 .u-sheet-1 {min-height: 654px}
.u-section-3 .u-layout-wrap-1 {pointer-events: auto; margin: 0 0 60px}
.u-section-3 .u-image-1 {min-height: 590px; pointer-events: auto; background-image: url("/content/dam/hutchison/dt-mobileonline/mo-mini-site/demo-site/image/introduction/tc/21.png"); background-position: 50% 50%}
.u-section-3 .u-container-layout-1 {padding: 30px 60px}
.u-section-3 .u-layout-cell-2 {min-height: 590px; pointer-events: auto}
.u-section-3 .u-container-layout-2 {padding: 30px 60px}
.u-section-3 .u-text-1 {margin: 0}
.u-section-3 .u-text-2 {margin: 20px 0 0}
.u-section-3 .u-image-2 {width: 200px; margin: 0 10px 10px 0}
.u-section-3 .u-btn-1 {text-transform: uppercase; font-size: 0.875rem; letter-spacing: 2px; background-image: none; border-style: solid; margin: 20px auto 0 0; padding: 10px 34px} 

@media (max-width: 1199px){ .u-section-3 .u-sheet-1 {min-height: 481px}
.u-section-3 .u-layout-wrap-1 {margin-right: initial; margin-left: initial}
.u-section-3 .u-image-1 {min-height: 486px}
.u-section-3 .u-layout-cell-2 {min-height: 486px} }

@media (max-width: 991px){ .u-section-3 .u-sheet-1 {min-height: 367px}
.u-section-3 .u-image-1 {min-height: 372px}
.u-section-3 .u-container-layout-1 {padding-left: 30px; padding-right: 30px}
.u-section-3 .u-layout-cell-2 {min-height: 100px}
.u-section-3 .u-container-layout-2 {padding-left: 30px; padding-right: 30px} }

@media (max-width: 767px){ .u-section-3 .u-sheet-1 {min-height: 653px}
.u-section-3 .u-image-1 {min-height: 558px}
.u-section-3 .u-container-layout-1 {padding-left: 10px; padding-right: 10px}
.u-section-3 .u-container-layout-2 {padding-left: 10px; padding-right: 10px} }

@media (max-width: 575px){ .u-section-3 .u-sheet-1 {min-height: 446px}
.u-section-3 .u-image-1 {min-height: 351px} }.u-section-4 {background-image: none}
.u-section-4 .u-sheet-1 {min-height: 735px}
.u-section-4 .u-text-1 {width: 144px; margin: 40px auto 0}
.u-section-4 .u-repeater-1 {min-height: 658px; grid-template-columns: calc(((100% - 1140px) / 2)  + 559px) calc(((100% - 1140px) / 2)  + 559px); height: auto; grid-gap: 22px 22px; margin: 20px auto 31px 0}
.u-section-4 .u-repeater-item-1 {background-image: none}
.u-section-4 .u-container-layout-1 {padding: 30px}
.u-section-4 .u-image-1 {height: 400px; margin: 0 -60px 0 auto}
.u-section-4 .u-text-2 {margin: 17px 0 0}
.u-section-4 .u-text-3 {font-size: 1.125rem; margin: 20px 0 0}
.u-section-4 .u-btn-1 {border-style: solid; background-image: none; margin: 20px auto 0}
.u-section-4 .u-repeater-item-2 {background-size: auto}
.u-section-4 .u-container-layout-2 {padding: 30px}
.u-section-4 .u-image-2 {height: 400px; margin: 0 -60px 0 auto}
.u-section-4 .u-text-4 {margin: 17px 0 0}
.u-section-4 .u-text-5 {font-size: 1.125rem; margin: 20px 0 0}
.u-section-4 .u-btn-2 {border-style: solid; background-image: none; margin: 20px auto 0} 

@media (max-width: 1199px){ .u-section-4 .u-sheet-1 {min-height: 663px}
.u-section-4 .u-repeater-1 {min-height: 542px; grid-template-columns: repeat(2, calc(((100% - 940px) / 2)  + 459px)); margin-right: initial; margin-left: initial}
.u-section-4 .u-image-1 {height: 329px; margin-right: initial; margin-left: initial}
.u-section-4 .u-image-2 {height: 329px; margin-right: initial; margin-left: initial} }

@media (max-width: 991px){ .u-section-4 .u-repeater-1 {grid-template-columns: 100%; margin-right: initial; margin-left: initial} }

@media (max-width: 767px){ .u-section-4 .u-sheet-1 {min-height: 715px}
.u-section-4 .u-container-layout-1 {padding-left: 20px; padding-right: 20px}
.u-section-4 .u-container-layout-2 {padding-left: 20px; padding-right: 20px} }

@media (max-width: 575px){ .u-section-4 .u-image-1 {height: 273px; margin-right: initial; margin-left: initial}
.u-section-4 .u-image-2 {height: 273px; margin-right: initial; margin-left: initial} }.u-section-5 .u-sheet-1 {min-height: 494px}
.u-section-5 .u-text-1 {width: 545px; font-weight: 700; margin: 40px auto 0}
.u-section-5 .u-repeater-1 {width: 1140px; margin-top: 20px; margin-bottom: 25px; min-height: 375px; grid-template-columns: calc(33.3333% - 15px) calc(33.3333% - 15px) calc(33.3333% - 15px); grid-gap: 22px 22px}
.u-section-5 .u-repeater-2 {width: 1140px; margin-top: 20px; margin-bottom: 25px; min-height: 375px; grid-template-columns: calc(50% - 15px) calc(27.5% - 15px) calc(27.5% - 15px); grid-gap: 22px 22px}
.u-section-5 .u-repeater-item-1 {background-size: auto}
.u-section-5 .u-container-layout-0 {padding: 10px 100px}
.u-section-5 .u-container-layout-1 {padding: 30px 20px}
.u-section-5 .u-image-1 {margin: 0}
.u-section-5 .u-text-2 {margin: 32px 0 0}
.u-section-5 .u-repeater-item-2 {background-size: auto}
.u-section-5 .u-container-layout-2 {padding: 30px 20px}
.u-section-5 .u-image-2 {margin: 0}
.u-section-5 .u-text-3 {margin: 32px 0 0}
.u-section-5 .u-repeater-item-3 {background-size: auto}
.u-section-5 .u-container-layout-3 {padding: 30px 20px}
.u-section-5 .u-image-3 {margin: 0}
.u-section-5 .u-text-4 {margin: 32px 0 0} 

@media (max-width: 1199px){ .u-section-5 .u-sheet-1 {min-height: 428px}
.u-section-5 .u-repeater-1 {width: 940px; min-height: 309px; grid-template-columns: repeat(3, calc(33.333333333333336% - 15px))}
.u-section-5 .u-repeater-2 {width: 940px; min-height: 309px; grid-template-columns: repeat(3, calc(33.333333333333336% - 15px))}
.u-section-5 .u-image-1 {margin-right: initial; margin-left: initial}
.u-section-5 .u-image-2 {margin-right: initial; margin-left: initial}
.u-section-5 .u-image-3 {margin-right: initial; margin-left: initial} }

@media (max-width: 991px){ .u-section-5 .u-sheet-1 {min-height: 830px}
.u-section-5 .u-repeater-1 {width: 720px; min-height: 711px; grid-template-columns: repeat(2, calc(((100% - 720px) / 2)  + 349px))} }


@media (max-width: 767px){ .u-section-5 .u-sheet-1 {min-height: 1637px}
.u-section-5 .u-text-1 {width: 540px}
.u-section-5 .u-repeater-1 {grid-template-columns: repeat(1, calc(100% - 0)); height: auto; width: auto}
.u-section-5 .u-repeater-2 {min-height: 1517px; grid-template-columns: repeat(1, calc(100% - 0)); height: auto; width: auto}
.u-section-5 .u-container-layout-1 {padding-left: 30px; padding-right: 30px}
.u-section-5 .u-container-layout-2 {padding-left: 30px; padding-right: 30px}
.u-section-5 .u-container-layout-3 {padding-left: 30px; padding-right: 30px} }


@media (max-width: 575px){ .u-section-5 .u-sheet-1 {min-height: 1289px}
.u-section-5 .u-text-1 {width: 280px}
.u-section-5 .u-repeater-1 {grid-template-columns: 100%; width: auto}
.u-section-5 .u-repeater-2 {min-height: 1169px; grid-template-columns: 100%; width: auto}
.u-section-5 .u-container-layout-1 {padding-left: 10px; padding-right: 10px}
.u-section-5 .u-container-layout-2 {padding-left: 10px; padding-right: 10px}
.u-section-5 .u-container-layout-3 {padding-left: 10px; padding-right: 10px} }.u-section-6 .u-sheet-1 {min-height: 494px}
.u-section-6 .u-text-1 {width: 545px; margin: 40px auto 0}
.u-section-6 .u-repeater-1 {width: 1140px; margin-top: 20px; margin-bottom: 25px; min-height: 375px; grid-template-columns: calc(33.3333% - 15px) calc(33.3333% - 15px) calc(33.3333% - 15px); grid-gap: 22px 22px}
.u-section-6 .u-repeater-item-1 {background-size: auto}
.u-section-6 .u-container-layout-1 {padding: 30px 20px}
.u-section-6 .u-image-1 {margin: 0}
.u-section-6 .u-text-2 {margin: 32px 0 0}
.u-section-6 .u-repeater-item-2 {background-size: auto}
.u-section-6 .u-container-layout-2 {padding: 30px 20px}
.u-section-6 .u-image-2 {margin: 0}
.u-section-6 .u-text-3 {margin: 32px 0 0}
.u-section-6 .u-repeater-item-3 {background-size: auto}
.u-section-6 .u-container-layout-3 {padding: 30px 20px}
.u-section-6 .u-image-3 {margin: 0}
.u-section-6 .u-text-4 {margin: 32px 0 0} 

@media (max-width: 1199px){ .u-section-6 .u-sheet-1 {min-height: 428px}
.u-section-6 .u-repeater-1 {width: 940px; min-height: 309px; grid-template-columns: repeat(3, calc(33.333333333333336% - 15px))}
.u-section-6 .u-repeater-2 {width: 940px; min-height: 309px; grid-template-columns: repeat(3, calc(33.333333333333336% - 15px))}
.u-section-6 .u-image-1 {margin-right: initial; margin-left: initial}
.u-section-6 .u-image-2 {margin-right: initial; margin-left: initial}
.u-section-6 .u-image-3 {margin-right: initial; margin-left: initial} }

@media (max-width: 991px){ .u-section-6 .u-sheet-1 {min-height: 830px}
.u-section-6 .u-repeater-1 {width: 720px; min-height: 711px; grid-template-columns: repeat(2, calc(((100% - 720px) / 2)  + 349px))} }
.u-section-6 .u-repeater-2 {width: 720px; min-height: 711px; grid-template-columns: repeat(2, calc(((100% - 720px) / 2)  + 349px))} }

@media (max-width: 767px){ .u-section-6 .u-sheet-1 {min-height: 1637px}
.u-section-6 .u-text-1 {width: 540px}
.u-section-6 .u-repeater-1 {min-height: 1517px; grid-template-columns: repeat(1, calc(100% - 0)); height: auto; width: auto}
.u-section-6 .u-repeater-2 {min-height: 1517px; grid-template-columns: repeat(1, calc(100% - 0)); height: auto; width: auto}
.u-section-6 .u-container-layout-1 {padding-left: 30px; padding-right: 30px}
.u-section-6 .u-container-layout-2 {padding-left: 30px; padding-right: 30px}
.u-section-6 .u-container-layout-3 {padding-left: 30px; padding-right: 30px} }

@media (max-width: 575px){ .u-section-6 .u-sheet-1 {min-height: 1289px}
.u-section-6 .u-text-1 {width: 340px}
.u-section-6 .u-repeater-1 {min-height: 1169px; grid-template-columns: 100%; width: auto}
.u-section-6 .u-repeater-2 {min-height: 1169px; grid-template-columns: 100%; width: auto}
.u-section-6 .u-container-layout-1 {padding-left: 10px; padding-right: 10px}
.u-section-6 .u-container-layout-2 {padding-left: 10px; padding-right: 10px}
.u-section-6 .u-container-layout-3 {padding-left: 10px; padding-right: 10px} }

@font-face {
  font-family: "HouseSlant";
  font-display: swap;
  src: url("https://prod.mobileonline.hk/production/static/media/HouseSlant.b17c2393.woff") format("woff");
}  
 @font-face {
  font-family: "Soleil";
  font-display: swap;
  src: url("https://prod.mobileonline.hk/production/static/media/Soleil_Regular.89a10c0d.woff") format("woff");
}
body {
    font-family: "Soleil","WenQuanYi Zen Hei","Heiti TC","Microsoft JhengHei",sans-serif!important;}
	@media screen and (min-width: 960px) {
		/*--background--*/
		.background-row {min-height: 600px;}
	}

	@media screen and (max-width: 768px) {
        .header_img{width: 100%;}
        .content_width{margin: 0 auto; display: block; width: 100%;}
	}


	@media screen and (max-width: 500px) {
        .header_img{width: 100%;}
        .content_width{margin: 0 auto; display: block; width: 100%;}
	}