@font-face{
	font-family: mheihk;
	src: url('/r/cms/pccw/2017/20170703/font/MHeiHK-Bold.ttf');
}
.dis{display: none;}
.main{font-family: "mheihk";}
.banner{width: 100%;}
.cle{clear: both;}
.fl{float: left;}
.txtcen{text-align: center;}
.main{max-width: 1000px;background-color: #dbe4e3;margin: 0 auto;padding-bottom: 2%;}
.cen{text-align: center;}
.top76 img{width: 100%;}
.cenwhite{width: 90%;margin: 0 auto;background-color: #fff;padding: 10px 2%;color: #666;}
.main > span > img{margin-left: 1%;}
.yellow{background-color: #f6ab00;max-width: 1000px;width: 100%;margin: 0 auto;position: relative;overflow: hidden;}
.yellowbanner{position: relative;}
.yellowbanner>img{position: absolute;top: 10%;right: 10%;width: 25%;}
.other{overflow: hidden;position: relative;}
.scroll{width: 100%;position: relative;left: -0%;margin-top: 2%;}
.banleft{width: 16%;float: left;border-right: 1px solid #000;margin-right: 2%;}
.banright{width: 73%;}
.gray{font-size: 15px;color: #6d6e71;}
.middlewhite{font-size: 24px;color: #fff;font-weight: bold;}
#yinyang{margin-top: 0;}
.Rotation{padding: 2% 1%;}
.roleft{width: 100%;position: relative;}
.smallwhites{font-size: 14px;color: #fff;border-bottom: 1px solid #6d6e71;padding: 6% 0;display: block;}
.smallblacks{font-size: 14px;color: #000;padding: 6% 0;display: block;}
#roimg{width: 100%;}
#immediately{text-align: right;display: block;}
.graybg{position: absolute;top: 0;left: 0;}
.graybg img{width: 100%;}
.bigwhite{font-size: 40px;color: #fff;display: block;margin: 30% 0;}
.smallwhite{font-size: 20px; color: #fff;display: block;}
.smallwhitea{font-size: 15px;color: #fff;display: block;}
.font13{font-size: 13px;color: #fff;display: block;}
.grayp{position: absolute;top: 5%;left: 0;width: 25%;text-align: center;}
.carousel-control{background-image: none !important;padding: 14% 0;width: 10% !important;}
.carousel-control img{width: 40%;}
#yellowdiv{bottom: 0;}
#roli{top: 0;right: 45%;left: initial;width: 140px;}
.scroll .item > div{width: 31.3%;position: relative;float: left;margin: 0 1%;}
.scrollmobile .item > div{width: 48%;position: relative;float: left;margin-right: 2%;}
.scrollmobile{display: none;margin-top: 2%;}
.item img{width: 100%;}
.item .graybg{width: 100%;}
.scrollpwhite{font-size: 14px;color: #fff;border-bottom: 1px solid #6d6e71;padding: 4% 0;display: block;}
.scrollpblack{font-size: 14px;color: #000;padding: 4% 0;display: block;}
.itemyellowdiv{background-color: #f6ab00;padding: 4% 6%;}
.csltitle{font-size: 20px;width: 100%;}
.csltitle img{margin-left:10px;}
.fl img{width: 87%;}
@media screen and (max-width: 888px){
	.scrollpwhite{padding: 2% 0;}
	.scroll .bigwhite{font-size: 30px;}
	.fl img{width: 87%;}
}
@media screen and (max-width: 850px){
	.smallwhite{font-size: 16px;}
	.scrollpblack{font-size: 13px;}
}
@media screen and (max-width: 800px){
	.middlewhite{font-size: 18px;}
	.smallwhites{font-size: 11px;padding: 3% 0;}
	.smallblacks{font-size: 12px;padding: 3% 0;}
	.csltitle{font-size: 20px;}
	.fl img{width: 86%;}
}
@media screen and (max-width: 650px){
	.scroll{display: none;}
	.scrollmobile{display: block;}
	.fl img{width: 81%;}
	.other .carousel-control img{width: 80%;min-width: 40px;margin: 100% 0;}
	.smallwhite{font-size: 17px;}
	.scrollpblack{font-size: 14px;}
}
@media screen and (max-width: 500px){
	.other .bigwhite{font-size: 30px;}
	.other .smallwhite{font-size: 13px;}
	.fl img{width: 75%;}
}
@media screen and (max-width: 385px){
	.other .bigwhite{font-size: 23px;}
	.fl img{width: 75%;}
}