html{font-family:'SourceHanSansHC';font-weight:300;color:#000f45;font-size:20px;scroll-behavior:smooth;}html,body{min-width:450px;}@media(max-width:1199.98px){html{font-size:18px;}}@media(max-width:767.98px){html{font-size:14px;}}body{background:repeat url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/BGPattern.png) #fafafa;position:relative;color:#000f45;}header{position:relative;}footer a:hover{color:#e4edeb;transition:.2s ease-in-out;}.bg-c1,.bg-c1l.active{background:#e36510;color:#fff;}.bg-c2,.bg-c2l.active{background:#dae314;}.bg-c3,.bg-c3l.active{background:#14e319;}.bg-c4,.bg-c4l.active{background:#10d0e3;}.bg-c5,.bg-c5l.active{background:#126ce3;color:#fff;}.bg-c6,.bg-c6l.active{background:#4d11f0;color:#fff;}.bg-c1l{background:#e3c9b7;}.bg-c2l{background:#e1e3b7;}.bg-c3l{background:#b7e3b8;}.bg-c4l{background:#b7dfe3;}.bg-c5l{background:#b7cae3;}.bg-c6l{background:#d0c5f0;}.bd-1{border-style:solid;border-width:1px;}.bd-2{border-style:solid;border-width:2px;}.bd-3{border-style:solid;border-width:3px;}.bd-4{border-style:solid;border-width:4px;}.bd-c0{border-color:#fff;}.bd-c1{border-color:#e36510;}.bd-c2{border-color:#dae314;}.bd-c3{border-color:#14e319;}.bd-c4{border-color:#10d0e3;}.bd-c5{border-color:#126ce3;}.bd-c6{border-color:#4d11f0;}.bd-c1l{border-color:#e3c9b7;}.bd-c2l{border-color:#e1e3b7;}.bd-c3l{border-color:#b7e3b8;}.bd-c4l{border-color:#b7dfe3;}.bd-c5l{border-color:#b7cae3;}.bd-c6l{border-color:#d0c5f0;}.rounded-10{border-radius:10px;}.rounded-left-10{border-radius:10px 0 0 10px;}.rounded-right-10{border-radius:0 10px 10px 0;}.myOrderedList{padding:0 0 0 2rem;margin:0;}.myOrderedList li{position:relative;padding-left:.25rem;}.myOrderedList li::before{content:'';position:absolute;left:-1.4rem;top:.2rem;width:1.3rem;height:1.3rem;background:#e36510;z-index:-1;border-radius:5px;}.myOrderedList li::marker{color:#fff;}.myOrderedList.long{padding-left:2.4rem;}.myOrderedList.long li::before{width:1.7rem;left:-1.8rem;}.myOrderedList.dark li::marker{color:#000f45;}.myOrderedList.c1 li::before{background-color:#e36510;}.myOrderedList.c2 li::before{background-color:#dae314;}.myOrderedList.c3 li::before{background-color:#14e319;}.myOrderedList.c4 li::before{background-color:#10d0e3;}.myOrderedList.c5 li::before{background-color:#126ce3;}.myOrderedList.c6 li::before{background-color:#4d11f0;}.btn.btn-stop{cursor:not-allowed;}.cursor-pointer{cursor:pointer;}footer{color:#0c6191;font-size:16px;background:center center no-repeat;background-color:rgba(68,135,164,.95);background-size:cover;background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/BluePaintBG.jpg);}footer a{color:#0c6191;}.audPlayer{position:relative;overflow:hidden;}.audPlayer.playBtn::before{content:'';display:inline-block;vertical-align:middle;width:1rem;height:1rem;border:.5rem solid transparent;border-right-width:0;border-left-width:.9rem;border-left-color:#fffd17;margin:-.3rem .2rem 0;transition:.2s ease-in-out;}.audPlayer:hover:not([disabled="disabled"]){filter:brightness(108%);}.audPlayer .progressBar{display:block;position:absolute;bottom:0;left:0;width:1%;height:100%;transition:ease-in-out .1s;opacity:0;visibility:hidden;}.audPlayer.active .progressBar{opacity:1;visibility:visible;background:rgba(0,0,0,.1);}.audPlayer.active.playBtn::before{border-left-color:rgba(0,0,0,.6) !important;}.mcTest .ques{border-radius:.25rem;overflow:hidden;background:#f3f3f3;border:1px solid #eee;}.mcTest .ques button{display:block;width:100%;height:100%;background:#00688b;color:#fff;border:none;}.mcTest .ques button:hover{background:#084e65;}.mcTest .ques label{vertical-align:middle;position:relative;cursor:pointer;}.mcTest .ques.answered,.mcTest .ques.correct{background:#e4edeb;}.mcTest .ques.wrong{background:#f2dcea;}.mcTest .ques.wrong button{background:#bd1181;}.mcTest .ques.wrong button.playBtn::before{border-left-color:#f2dcea;}.mcTest .ques.wrong .radioBtn::after{background:#cfbbc6;}.mcTest .ques.wrong .correctAns .radioBtn::after{opacity:1;background:#bd1181;}.mcTest .ques.wrong .wrongAns .ansText,.mcTest .ques.correct .wrongAns .ansText{opacity:.3;}.mcTest .ques.wrong .icon.cross,.mcTest .ques.correct .icon.tick,.mcTest .ques.wrong .icon.info,.mcTest .ques.correct .icon.info{display:inline-block;opacity:1;}.mcTest input[type=radio]{position:absolute;width:1px;height:1px;border:0;left:0;top:0;margin:0;padding:0;opacity:0;-moz-appearance:none;-webkit-appearance:none;}.mcTest input[type=radio]~.radioBtn{content:'';display:inline-block;vertical-align:middle;width:1rem;height:1rem;background:#ddd;border:1px solid #ddd;position:relative;border-radius:100%;margin:0 .3rem;vertical-align:middle;}.mcTest input[type=radio]~.radioBtn::after{content:'';display:block;position:absolute;width:.6rem;height:.6rem;left:calc(.2rem - 1px);top:calc(.2rem - 1px);background:#00688b;border-radius:100%;opacity:0;transition:.2s ease-in-out;}.mcTest input[type=radio]:active~.radioBtn{background:#c9c9c9;border-color:#bbb;}.mcTest input[type=radio]:active~.radioBtn::after{opacity:.3;}.mcTest input[type=radio]:checked~.radioBtn::after{opacity:1;}.mcTest input[type=radio]:checked~.radioBtn{background:#c9c9c9;border-color:#bbb;}.mcTest .ques label:hover .radioBtn{background:#c9c9c9;}.mcTest .btnSubmitMC{background:#00688b;border:none;color:#fff;}.mcTest .btnSubmitMC:hover{background:#084e65;}.mcTest .ansOptions{border-left:2px solid #fff;}.mcTest .icon{width:2rem;height:2rem;display:none;opacity:0;}.fillInTheBlanks input[type="text"]{width:1.6rem;padding:0 .1rem;height:1.5rem;}.fillInTheBlanks .ans{display:inline;margin:0 2px;}.fillInTheBlanks .ques{overflow:hidden;border-radius:10px;border:1px solid #eee;background:#f3f3f3;transition:.2s ease-in-out;}.fillInTheBlanks .div_desc{position:relative;}.fillInTheBlanks .div_desc .chinese{font-size:1.2rem;}.fillInTheBlanks .div_img{background:#00688b;transition:.2s ease-in-out;border-right:1px solid #fff;}.fillInTheBlanks .div_img img{border:2px solid rgba(255,255,255,.1);height:5rem;width:5rem;}.fillInTheBlanks .btnSubmit{background:#00688b;border:none;color:#fff;}.fillInTheBlanks .btnSubmit:hover{background:#084e65;}.fillInTheBlanks .feedback{position:absolute;bottom:0;right:0;}.fillInTheBlanks .icon{width:2rem;height:2rem;display:none;opacity:0;}.fillInTheBlanks .wrong .icon.cross,.fillInTheBlanks .correct .icon.tick{opacity:1;display:inline-block;}.fillInTheBlanks .wrong.ques{background:#f2dcea;border-color:#cfbbc6;}.fillInTheBlanks .wrong .div_img{background:#bd1181;}.fillInTheBlanks .wrong input[type="text"]{border:1px solid #bd1181;background:#f2dcea;color:#bd1181;}.icon{display:inline-block;width:1rem;height:1rem;vertical-align:middle;}.icon::before{content:'';display:block;width:100%;height:100%;background:center center no-repeat;background-size:contain;}.icon.cross::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNDNzEyODgiIGQ9Ik02MC44NjIzLDUwbDI0LjM4ODItMjQuMzg4N2MzLTIuOTk5LDMtNy44NjIzLDAtMTAuODYxM2MtMi45OTk1LTMtNy44NjIzLTMtMTAuODYxOCwwTDUwLDM5LjEzODcgTDI1LjYxMTgsMTQuNzVjLTIuOTk5NS0zLTcuODYyOC0zLTEwLjg2MTgsMGMtMywyLjk5OS0zLDcuODYyMywwLDEwLjg2MTNMMzkuMTM4Miw1MEwxNC43NSw3NC4zODg3Yy0zLDIuOTk5LTMsNy44NjEzLDAsMTAuODYxMyBjMS40OTk1LDEuNSwzLjQ2NDgsMi4yNSw1LjQzMDcsMi4yNWMxLjk2NTMsMCwzLjkzMTYtMC43NSw1LjQzMTItMi4yNUw1MCw2MC44NjEzTDc0LjM4ODcsODUuMjUgYzEuNDk5NSwxLjUsMy40NjUzLDIuMjUsNS40MzA3LDIuMjVjMS45NjU4LDAsMy45MzE2LTAuNzUsNS40MzEyLTIuMjVjMy0zLDMtNy44NjIzLDAtMTAuODYxM0w2MC44NjIzLDUweiIvPjwvc3ZnPg==");}.icon.tick::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PHBhdGggZmlsbD0iIzAwRTcyRCIgZD0iTTMwLjM0MzMsODcuMjY5NWMtMi4xNzUzLDAtNC4zNTAxLTAuODI5MS02LjAwOTgtMi40ODgzTDUuMjAyNiw2NS42NTUzIGMtMy4zMTk4LTMuMzE5My0zLjMyMDMtOC43MDEyLTAuMDAxNS0xMi4wMjA1YzMuMzE5My0zLjMyMDMsOC43MDEyLTMuMzIxMywxMi4wMjEtMC4wMDJMMzAuMzQyOCw2Ni43NWw1Mi40MzU1LTUyLjQzNTUgYzMuMzE5My0zLjMxOTMsOC43MDEyLTMuMzE5MywxMi4wMjA1LDBzMy4zMTkzLDguNzAxMiwwLDEyLjAyMDVMMzYuMzUzNSw4NC43ODAzQzM0LjY5NDMsODYuNDQwNCwzMi41MTg2LDg3LjI2OTUsMzAuMzQzMyw4Ny4yNjk1eiIvPjwvc3ZnPg==");}.icon.info::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PHBhdGggZmlsbD0iI0IzQjNCMyIgZD0iTTUwLDEwYy0yMi4wNTYyLDAtNDAsMTcuOTQzNC00MCw0MHMxNy45NDM4LDQwLDQwLDQwczQwLTE3Ljk0MzQsNDAtNDBTNzIuMDU2MiwxMCw1MCwxMHogTTUwLDg1IGMtMTkuMjk4OCwwLTM1LTE1LjcwMTItMzUtMzVzMTUuNzAxMi0zNSwzNS0zNXMzNSwxNS43MDEyLDM1LDM1UzY5LjI5ODgsODUsNTAsODV6IE01Niw0OXYyMGMwLDMuNTg5OC0yLjkxMDIsNi41LTYuNSw2LjUgUzQzLDcyLjU4OTgsNDMsNjlWNDljMC0zLjU4OTgsMi45MTAyLTYuNSw2LjUtNi41UzU2LDQ1LjQxMDIsNTYsNDl6IE01Ni40MTY1LDMyLjgzNGMwLDMuODQzOC0zLjExNTIsNi45NTktNi45NTg1LDYuOTU5IGMtMy44NDQ3LDAtNi45NTk1LTMuMTE1Mi02Ljk1OTUtNi45NTlzMy4xMTQ3LTYuOTU5LDYuOTU5NS02Ljk1OUM1My4zMDEzLDI1Ljg3NSw1Ni40MTY1LDI4Ljk5MDIsNTYuNDE2NSwzMi44MzR6Ii8+PC9zdmc+");}.mainHeader{position:relative;}.mainLogo{position:absolute;top:3.5rem;left:2.3rem;}.mainLogo a{display:inline-block;margin-right:.1rem;}.mainTitle{position:absolute;top:6.5rem;left:2rem;}.mainTitle .chinese{color:#fffd17;font-weight:bolder;font-size:4rem;}.mainTitle .romanization{color:#fff;font-size:1.4rem;word-spacing:.5rem;}@media(max-width:1199.98px){.mainLogo{top:calc(15vw - 45px);left:.5rem;}.mainLogo img{height:45px;}.mainTitle{top:15vw;left:0;}}@media(max-width:991.98px){.mainLogo img{height:40px;}.mainTitle{left:0;}.mainTitle .chinese{font-size:3rem;}.mainTitle .romanization{font-size:1rem;}}@media(max-width:767.98px){.mainLogo{top:calc(5vw - 25px);}.mainLogo img{height:30px;}.mainTitle{top:5vw;}}@media(max-width:575.98px){.mainLogo{top:1rem;left:.5rem;}.mainLogo img{height:25px;}.mainTitle{top:2.5rem;}}.bluePaintBG{background:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/BluePaintBG.jpg);background-size:cover;}.main header::before{content:'';display:block;width:100%;height:720px;position:absolute;top:0;left:0;background:calc(50% - 90px) bottom no-repeat;background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/mainPlane.png);background-size:1542px auto;}.mainHeader{height:750px;}@media(max-width:1199.98px){.main header::before{height:40vw;top:10vw;background-position:center bottom;background-size:contain;}.mainHeader{height:55vw;}}@media(max-width:991.98px){.main header::before{left:auto;right:0;}}@media(max-width:767.98px){.main header::before{right:auto;left:2rem;top:3rem;height:9rem;}.mainHeader{height:13rem;}}.mainMenu{background:#cff3ff;border-bottom:5px solid #d1e9f1;position:relative;margin-top:10rem;}.mainMenuArrow{position:absolute;height:100%;width:100%;}.mainMenuArrow::before,.mainMenuArrow::after{content:'';display:block;width:50.5%;height:100%;position:absolute;background:#cff3ff;border:3px solid #cff3ff;border-top-color:#d1e9f1;top:-3.5rem;}.mainMenuArrow::before{left:0;transform:skewY(7deg);}.mainMenuArrow::after{right:0;transform:skewY(-7deg);}.mainMenu ul{z-index:99;}.mainMenu .menuItem{color:#000f45;font-size:1.3rem;display:block;height:100%;}.mainMenu .menuItem::before{content:'';display:block;width:80px;height:80px;margin:0 auto 20px;}.mainMenu .menuItem::before{background:center center no-repeat;background-size:contain;}.mainMenu .menuItem:hover{border-radius:10px;background:rgba(0,0,0,.05);}.mainMenu .menuItem.intro::before{background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/icon_intro.png);}.mainMenu .menuItem.initials::before{background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/icon_initials.png);}.mainMenu .menuItem.finals::before{background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/icon_finals.png);}.mainMenu .menuItem.tones::before{background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/icon_tones.png);}@media(max-width:991.98px){.mainMenu .menuItem::before{width:60px;height:60px;}}@media(max-width:767.98px){.mainMenu{margin-top:7rem;}.mainMenu .menuItem::before{width:50px;height:50px;margin:0 auto 10px;}}.cnt header{overflow:hidden;height:21rem;}.cnt header::before{content:'';display:block;width:150%;height:42rem;position:absolute;top:-28rem;left:-20%;transform-origin:top left;transform:rotate(.5deg);background:center bottom no-repeat;background-size:cover;background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/BluePaintBG.jpg);}.cnt header::after{content:'';display:block;position:absolute;background:center bottom no-repeat;background-size:contain;background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/cntPlane.png);}.cnt header::after{width:73rem;height:17rem;left:calc(50% - 40rem);top:2.5rem;}@media(max-width:991.98px){.cnt header::after{height:15rem;top:3.5rem;left:auto;right:-13rem;}}@media(max-width:767.98px){.cnt header{height:17rem;}.cnt header::before{height:41rem;}.cnt header::after{height:8rem;top:7.8rem;right:-23rem;transform:rotate(.5deg);}}.cnt .cntHeader{position:relative;height:14rem;}.cnt .cntHeader .cntTitle{position:absolute;left:1rem;top:6rem;z-index:10;}.cnt .cntHeader .cntTitle a{text-decoration:none;border:none;display:inline-block;}.cnt .cntHeader .cntTitle .chinese{font-size:2.5rem;color:#fffd17;font-weight:bolder;}.cnt .cntHeader .cntTitle .romanization{font-size:1rem;color:#fff;}.cnt .cntLogo{position:absolute;top:10px;right:10px;}.cnt .cntLogo img{height:40px;}@media(max-width:991.98px){.cnt .cntLogo{top:5px;}.cnt .cntLogo img{height:30px;}}@media(max-width:575.98px){.cnt .cntLogo img{height:20px;}}.cnt .cntMenu{position:absolute;top:0;left:0;z-index:99;}.cnt .cntMenu .cntSubmenu{font-weight:bolder;}.cnt .cntMenu .cntSubmenu .cntSubmenuLink{line-height:1rem;padding:0;color:#000f45;outline:none;color:#000f45;}.cnt .cntMenu .cntSubmenu .cntSubmenuLink:not([class~="collapsed"]){background:#00688b;}.cnt .cntMenu .cntSubmenu .cntSubmenuLink::after{content:'';display:inline-block;width:10px;height:10px;border:10px solid transparent;border-top-width:5px;border-bottom-width:0;border-top-color:#00688b;opacity:0;}.cnt .cntMenu .cntSubmenu .cntSubmenuLink.collapsed{padding-bottom:1.5rem;}.cnt .cntMenu .cntSubmenu .cntSubmenuLink.collapsed::after{opacity:.4;}.cnt .cntMenu .cntSubmenu .cntSubmenuLink[aria-expanded="true"]{color:#fff;}.cnt .cntMenu .cntSubmenu .cntSubmenuLink[aria-expanded="true"]~div .submenu_list{background:#00688b;}.cnt .cntMenu .cntSubmenu.active{background:#00688b;background:#00688b;}.cnt .cntMenu .cntSubmenu.active .cntSubmenuLink{color:#c7c612;}.cnt .cntMenu .cntSubmenu.active .cntSubmenuLink::after{border-top-color:#fff;}.cnt .cntMenu .cntMenuItem{color:#fff;outline:none;text-decoration:none;transition:.2s ease-in-out;}.cnt .cntMenu .cntMenuItem.active{font-weight:bold;color:#c7c612;}.cnt .cntMenu .cntMenuItem:hover{background:#084e65;}.cnt .spacer{height:6rem;}.cnt h3::after{content:'';display:inline-block;position:relative;top:.4rem;left:.2rem;border:2px solid #c7c612;width:.7rem;height:.7rem;border-radius:100%;}#chapter-navbar.pin{position:fixed;top:50px;}#chapter-navbar.pin.bottom{position:absolute;bottom:0;top:auto;}#chapter-navbar a{color:#586585;}#chapter-navbar a.active{background:none;position:relative;}#chapter-navbar a.active::before{content:'';display:block;position:absolute;left:0;width:4px;height:1.3rem;background:#00688b;}.chTitle{color:#00688b;font-size:2.8rem;letter-spacing:-.1rem;}.chTitle .wrapper{background:bottom left no-repeat;background-size:1992px 16px;background-image:url(/20230901000741oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/Cantonese/Romanization/img/titleBar.png);padding:0 4rem 2px 35px;margin-left:-35px;}.secTitle{color:#00688b;font-size:1.8rem;}.secSubTitle{font-size:1.2rem;font-weight:bolder;}.nextPageBtn{transition:.2s ease-in-out;}.nextPageBtn,.nextPageBtn:hover,.nextPageBtn:focus,.nextPageBtn:active{outline:none !important;border:none !important;box-shadow:none !important;color:#00688b;}.nextPageBtn,.nextPageBtn:focus,.nextPageBtn:active{background:none !important;}.nextPageBtn:hover{background:#e4edeb !important;}.initialTable .bg_c1 button,.initialGrpTable .bg_c1 button{background:#e3c9b7;}.initialTable .bg_c1 button.active,.initialGrpTable .bg_c1 button.active{background:#e36510;color:#fff;}.initialTable .bg_c2 button,.initialGrpTable .bg_c2 button{background:#e1e3b7;}.initialTable .bg_c2 button.active,.initialGrpTable .bg_c2 button.active{background:#dae314;}.initialTable .bg_c3 button,.initialGrpTable .bg_c3 button{background:#b7e3b8;}.initialTable .bg_c3 button.active,.initialGrpTable .bg_c3 button.active{background:#14e319;}.initialTable .bg_c4 button,.initialGrpTable .bg_c4 button{background:#b7dfe3;}.initialTable .bg_c4 button.active,.initialGrpTable .bg_c4 button.active{background:#10d0e3;}.initialTable .bg_c5 button,.initialGrpTable .bg_c5 button{background:#b7cae3;}.initialTable .bg_c5 button.active,.initialGrpTable .bg_c5 button.active{background:#126ce3;color:#fff;}.initialTable .bg_c6 button,.initialGrpTable .bg_c6 button{background:#d0c5f0;}.initialTable .bg_c6 button.active,.initialGrpTable .bg_c6 button.active{background:#4d11f0;color:#fff;}.initialTable [class^="bg_c"] button,.initialGrpTable [class^="bg_c"] button{transition:.2s ease-in-out;}.initialGrpTable button{border-radius:0;}.initialGrpTable tr td:first-child button{border-radius:10px 0 0 10px;overflow:hidden;}.initialGrpTable tr *:last-child>button{border-radius:0 10px 10px 0;overflow:hidden;}.initialGrpTable .td_initials,.initialGrpTable .td_examples div div{padding:1px;}.initialGrpTable .roman{font-size:.8rem;}.initialGrpTable .bg_c1 .initials{background:#e36510;}.initialGrpTable .bg_c2 .initials{background:#dae314;}.initialGrpTable .bg_c3 .initials{background:#14e319;}.initialGrpTable .bg_c4 .initials{background:#10d0e3;}.initialGrpTable .bg_c5 .initials{background:#126ce3;}.initialGrpTable .bg_c6 .initials{background:#4d11f0;}.initialGrpTable [class*="bg_c"] .lightText{color:#fff;}.initialGrpTable [class*="bd_c"]{border:1px solid;}.initialGrpTable .bd_c1{border-color:#e36510;}.initialGrpTable .bd_c2{border-color:#dae314;}.initialGrpTable .bd_c3{border-color:#14e319;}.initialGrpTable .bd_c4{border-color:#10d0e3;}.initialGrpTable .bd_c5{border-color:#126ce3;}.initialGrpTable .bd_c6{border-color:#4d11f0;}.initialGrpTable .freq{white-space:nowrap;color:rgba(0,0,0,.5);}.initialGrpTable .lightText .freq{color:rgba(255,255,255,.5);}.initialGrpTable small{color:rgba(0,0,0,.5);}.readingEx{overflow:hidden;}.readingEx .chinese,.readingEx .romanization{text-wrap:none;white-space:nowrap;}.readingEx .quesHolderBox_wrapper{padding:2rem 4rem;border:1px solid #00688b;background-color:#e4edeb;border-radius:10px;position:relative;}.readingEx .quesHolderBox{overflow:hidden;padding:0;}.readingEx .quesHolder{width:500%;display:flex;flex-direction:row;flex-grow:1;left:0%;position:relative;transition:.2s ease-in-out;}.readingEx .quesHolder[data-slide="1"]{left:0%;}.readingEx .quesHolder[data-slide="2"]{left:-100%;}.readingEx .quesHolder[data-slide="3"]{left:-200%;}.readingEx .quesHolder[data-slide="4"]{left:-300%;}.readingEx .quesHolder[data-slide="5"]{left:-400%;}.readingEx .ques{width:20%;display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s ease-in-out;}.readingEx .ques.active{opacity:1;}.readingEx .quesText{overflow:hidden;z-index:10;padding:15px;}.readingEx .navHolder{top:0;left:0;}.readingEx .prevBtn_div{top:50%;left:1rem;vertical-align:middle;}.readingEx .nextBtn_div{top:50%;right:1rem;vertical-align:middle;}.readingEx .pageBtn_div{bottom:0;left:0;}.readingEx .prevBtn,.readingEx nextBtn{outline:none !important;user-select:none !important;}.readingEx .prevBtn::before,.readingEx .nextBtn::before{display:block;width:2.5rem;height:10rem;margin-top:-5rem;content:'';background:center no-repeat;background-size:contain;opacity:.1;transition:.2s ease-in-out;}.readingEx .prevBtn:hover::before,.readingEx .nextBtn:hover::before{opacity:1;}.readingEx .nextBtn::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1Ni41cHgiIGhlaWdodD0iMjUzcHgiPjxwb2x5Z29uIGlkPSJwYWdlUmlnaHQiIGZpbGw9IiMwMDY4OEIiIHBvaW50cz0iMCwyNTMgNDAuNSwxMjYuNTAxIDAsMCAxNiwwIDU2LjUsMTI2LjUwMSAxNiwyNTMgIi8+PC9zdmc+DQo=");}.readingEx .prevBtn::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1Ni41cHgiIGhlaWdodD0iMjUzcHgiPjxwb2x5Z29uIGlkPSJwYWdlTGVmdCIgZmlsbD0iIzAwNjg4QiIgcG9pbnRzPSI1Ni41LDI1MyAxNiwxMjYuNTAxIDU2LjUsMCA0MC41LDAgMCwxMjYuNTAxIDQwLjUsMjUzICIvPjwvc3ZnPg==");}.readingEx .pageBtn{width:.5rem;height:.5rem;margin:0 .1rem;display:inline-block;vertical-align:middle;}.readingEx .pageBtn::before{content:'';display:block;width:100%;height:100%;border:1px solid #00688b;border-radius:100%;transition:.2s ease-in-out;}.readingEx .pageBtn.active::before{background-color:#00688b;}.readingEx .mPlayer .control button{background-color:#00688b;line-height:.1rem;height:auto;padding:.3rem .4rem;}.readingEx .mPlayer .control button:hover{background-color:#084e65;}.readingEx .mPlayer .control button .icon{width:.8rem;height:.8rem;margin:0;padding:0;}.readingEx .mPlayer .progressBar{border-radius:.25rem;overflow:hidden;vertical-align:text-bottom;border:1px solid #00688b;background-color:#e4edeb;}.readingEx .mPlayer .progressBarInner{background-color:#00688b;}.cantonAdv .slideBtn{background:#00688b;border-radius:5px 5px 0 0;color:#fff;}.cantonAdv .slideBtn:hover{color:#e4edeb;background:#084e65;}.cantonAdv .slideBtn.active{color:#c7c612;background:#084e65;font-weight:bold;}.cantonAdv .frame{border:2px solid #00688b;border-radius:5px;}.cantonAdv .slideHolder{display:flex;margin:0;padding:0;}.cantonAdv .slide{width:100%;margin:0;padding:0;opacity:0;visibility:hidden;transition:.2s ease-in-out;}.cantonAdv .slide:nth-child(n+2){margin-left:-100%;}.cantonAdv .slide.active{opacity:1;z-index:99;}.cantonAdv .slide .details{opacity:0;transform:translateX(60px);transition:.2s ease-in-out;transition-delay:.2s;}.cantonAdv .slide.active{visibility:visible;}.cantonAdv .slide.active .details{opacity:1;visibility:visible;transform:none;}.cantonAdv .slide .audPlayer{border:1px solid #00688b;background:#e4edeb;border-radius:5px;transition:.2s ease-in-out;}.cantonAdv .slide .audPlayer::before{border-left-color:#00688b;}.cantonAdv .slide .audPlayer.active{background:#00688b;color:#fff;}.finalsCategory{border:1px solid #00688b;border-radius:5px;}.finalsCategory #svg_arrow{position:absolute !important;z-index:0;}.finalsCategory .arw{stroke:#00688b;}.finalsCategory .arw_head{fill:#00688b;}.finalsCategory .from,.finalsCategory .to{border-radius:5px;z-index:10;}.finalsCategory .from{background:#00688b;color:#fff;}.finalsCategory .to{border:2px solid #00688b;}.finalsCategory .to.group1{border-color:#e36510;background:#e36510;}.finalsCategory .to.group2{border-color:#dae314;background:#dae314;}.finalsCategory .to.group3{border-color:#14e319;background:#14e319;}.finalsCategory .to.group4{border-color:#10d0e3;background:#10d0e3;}.finalsCategory .to.group5{border-color:#4d11f0;background:#4d11f0;color:#fff;}.finalsGroupings .group{border-radius:5px;overflow:hidden;}.finalsGroupings .category{background:#126ce3;color:#fff;}.finalsGroupings .finals{background:#b7cae3;}.finalsExampleTable .finals{line-height:1rem;}.finalsExampleTable .finals span{display:block;}.finalsExampleTable .header{text-align:center;font-weight:bold;}.finalsExampleTable .header.group1{color:#e36510;}.finalsExampleTable .header.group2{color:#c7c612;}.finalsExampleTable .header.group3{color:#14e319;}.finalsExampleTable .header.group4{color:#00688b;}.finalsExampleTable .header.group5{color:#4d11f0;}.finalsExampleTable .group1 .finals{background:#e36510;}.finalsExampleTable .group2 .finals{background:#dae314;}.finalsExampleTable .group3 .finals{background:#14e319;}.finalsExampleTable .group4 .finals{background:#10d0e3;}.finalsExampleTable .group5 .finals{background:#4d11f0;color:#fff;}.finalsCompareTable{border-spacing:.5rem 1px;border-collapse:separate;}.finalsCompareTable tr button{border-radius:0;}.finalsCompareTable tr.c1 .final,.finalsCompareTable tr.c1 .example.active{background:#e36510;color:#fff;}.finalsCompareTable tr.c1 .example{background:#e3c9b7;}.finalsCompareTable tr.c2 .final,.finalsCompareTable tr.c2 .example.active{background:#dae314;}.finalsCompareTable tr.c2 .example{background:#e1e3b7;}.finalsCompareTable tr.c3 .final,.finalsCompareTable tr.c3 .example.active{background:#14e319;}.finalsCompareTable tr.c3 .example{background:#b7e3b8;}.finalsCompareTable tr.c4 .final,.finalsCompareTable tr.c4 .example.active{background:#10d0e3;}.finalsCompareTable tr.c4 .example{background:#b7dfe3;}.finalsCompareTable td span[class*="col-"]{padding:0 0;}.finalsCompareTable .final{border-radius:10px 0 0 10px;font-weight:bold;}.finalsCompareTable .example{border-radius:0 10px 10px 0;}.cantonAdv .vdoPlayer{border:1px solid #00688b;background:#e4edeb;border-radius:5px;transition:.2s ease-in-out;}.cantonAdv .vdoPlayer::before{border-left-color:#00688b;}.cantonAdv .vdoPlayer.active{background:#00688b;color:#fff;}.cantonAdv .vdoPlayer.playBtn::before{content:'';display:inline-block;vertical-align:middle;width:20px;height:20px;border:.5rem solid transparent;border-right-width:0;border-left-width:.9rem;border-left-color:#00688b;margin:-.3rem .2rem 0;transition:.2s ease-in-out;}.cantonAdv .vdoPlayer.active.playBtn::before{border-left-color:rgba(0,0,0,.6) !important;}.tonesTable th{padding:3px 5px;}.tonesTable td{border:1px solid #fff;padding:3px 5px;}.tonesExampleTable .tones{line-height:1.2em;}.tonesExampleTable .tones span{display:block;}.tonesExampleTable .c1 .tones{background-color:#e3c9b7;}.tonesExampleTable .c1 .tones.active{background-color:#e36510;color:#fff;}.tonesExampleTable .c2 .tones{background-color:#e1e3b7;}.tonesExampleTable .c2 .tones.active{background-color:#dae314;}.tonesExampleTable .c3 .tones{background-color:#b7e3b8;}.tonesExampleTable .c3 .tones.active{background-color:#14e319;}.tonesExampleTable .c4 .tones{background-color:#b7dfe3;}.tonesExampleTable .c4 .tones.active{background-color:#10d0e3;}.tonesExampleTable .c5 .tones{background-color:#b7cae3;}.tonesExampleTable .c5 .tones.active{background-color:#126ce3;color:#fff;}.tonesExampleTable .c6 .tones{background-color:#d0c5f0;}.tonesExampleTable .c6 .tones.active{background-color:#4d11f0;color:#fff;}.toneCompareTable{border-collapse:separate;border-spacing:1px;}.toneCompareTable .tones span{display:block;}.toneCompareTable .tones{border:1px solid #fff;}