@media only screen and (max-width: 1500px) {
    header .menu ul li:nth-child(6) .dropdown ,
    header .menu ul li:nth-child(7) .dropdown {
        width: 176px;
    }
}

@media only screen and (min-width: 1351px){
    .reward .list1,
    .reward .list2,
    .reward .list3,
    .reward .list4,
    .reward .list5{padding-left: 20px!important;width: 100%}
}

@media only screen and (max-width: 1350px){
    header .menu ul li:nth-child(6) .dropdown ,
    header .menu ul li:nth-child(7) .dropdown {
        width: 160px;
    }
    header .menu ul li:nth-child(7) .dropdown{
        left: auto;
        transform: unset;
        right: -10px;
    }
    .footer_bottom .col-w7{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer_bottom .col-w3{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer_bottom .col-w3 p{
        padding-left: 15px;
        margin-top: 20px;
    }
    .footer_bottom ul li{
        padding-right: 40px;
    }
    .index .carousel .carousel-caption {
        left: 15px;
        /*top: 0;*/
    }
    .index .carousel .carousel-caption .banner-text{
        padding: 10px 15px;
        max-width: 50%;
    }
    .reward .container .row{
        margin-right: 15px;
        margin-left: 15px;
    }

    .timeline > li > div.box-border1:before {
        width: 18px;
    }
    .timeline > li > div.box-border3:before {
        width: 64px;
        left: -21px;
    }
    .timeline > li > div.box-border4:before {
        width: 57px;
    }
    .timeline > li > div.box-border2:before {
        width: 24px;
        left: -25px;
    }
}
@media only screen and (max-width: 1200px){
    header .menu li > a {
        font-size: 16px;
        color: #17711e;
        display: inline-block;
        line-height: 20px;
        font-family: NotoSansCJKscBold;
    }
    header .menu ul li .dropdown{
        width: 211px;
    }
    .footer_bottom ul li{
        padding-right: 30px;
    }
    .index .what-new .new-text {
        padding-left: 70px;
        position: relative;
    }
    .index .what-new img {
        height: auto;
        vertical-align: top;
        position: absolute;
        top: 0;
        left: -15px;
        width: auto;
    }

    .timeline > li > div.box-border1:before {
        width: 10px;
    }
    .timeline > li > div.box-border3:before {
        width: 54px;
        left: -11px;
    }
    .timeline > li > div.box-border4:before {
        width: 46px;
    }
    .timeline > li > div.box-border2:before {
        width: 14px;
        left: -16px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1100px){
    header .menu li > a i {
        width: 13px;
        height: 24px;
        top: 40%;
        right: -14px;
    }
    .footer_bottom ul li{
        padding-right: 15px;
    }
    .index .carousel .carousel-caption{
        padding: 0;
        left: 0;
    }
    .index .carousel .carousel-caption .banner-text a{
        padding: 5px 20px;
    }
}

@media only screen and (max-width: 991px) {
    header .menu > ul > li,
    header .menu > ul > li:hover,
    header .menu > ul > li:active,
    header .menu > ul > li.active{
        border-bottom: unset;
        border-bottom:0;
    }

    header {
        position: relative;
    }
    html.nav-open .mobile-menu .stripe {
        background: white;
    }

   .nav-open header .mobile-menu .stripes {
        height: 34px;
        padding-top: 15px;
    }
    .nav-open  header .mobile-menu  .stripe1 {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
    }

    .nav-open header .mobile-menu .stripe2 {
        display: none;
    }

    .nav-open header .mobile-menu .stripe3 {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }


    html .menu-wrapper {
        opacity: 0;
        max-height: 0;
        overflow-y: auto;
        -webkit-transition: height, opacity .3s linear;
        -moz-transition: height, opacity .3s linear;
        -o-transition: height, opacity .3s linear;
        transition: height, opacity .3s linear;
    }
    /*update 20190919*/
    html.nav-open .menu-wrapper {
        max-height: none;
        z-index: 2050;
        opacity: 1;
        height: 100%;
        position: fixed;
        left: 20%;
        top: 0;
        /*transition: all 0.6s;*/
        /*-webkit-transition: all 0.6s;*/
        /*-moz-transition: all 0.6s;*/
        /*-o-transition:  all 0.6s;*/
        width: 80%;
        background-color: white;
        padding: 74px 8px 0 0;
        box-shadow: -2px 2px 3px #12121263;
    }
    html.nav-open header{
        right: 80%;
        left: auto;
    }
    header .menu ul {
        flex-wrap: wrap;
        padding-left: 0;
        font-weight: bold;
        /*height: calc(100vh - 74px);*/
        overflow-y: auto;
    }
    header .menu li {
        width: 100%;
        padding: 6px 0;
    }
    /**/
    header .head-con {
        background-color: #781f95;
        padding:0;
        position: relative;
        width: 100%;
        height: 74px;
    }
    /*update by shirley 20190920*/
    header .head-con > div.container{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .nav-open header .head-con > div.container{
        position: relative;
        top: unset;
        transform: unset;
    }
    .nav-open body{
        position: fixed;

    }
    /*.nav-open .index{*/
        /*opacity: .5;*/
    /*}*/
    /*.nav-open header .head-con{*/
        /*background-color: rgba(119, 31, 148, 0.5);*/
    /*}*/

    .nav-open #mobile_overlay {
        background-color: rgba(255, 255, 255, 0.8);
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2050;
    }
    .nav-open header{
        z-index: 2500;
    }

    .container {
        max-width: 100%;
    }

    header .head-top {
        display: none;
        padding: 0;
    }
    .nav-open header .head-top {
        display: block;
        padding: 0;
    }
    header .menu > ul > li {
        padding:6px 0;
        max-width: 100%;
        text-align: left;
        position: relative;
        color: white;
        font-family: NotoSansCJKscBold;
        display: block;
    }

    header .head-top span.language{
        display: inline-block;
        position: fixed;
        top: 28px;
        z-index: 9999;
        left: /*74%*/22%;
        width: 198px;
    }
    header .head-top span a{
        font-size: 16px;
        color: #FFFFFF;
        display: inline-block;
    }
    header .head-top span.text-size {
        display: inline-block;
        position: fixed;
        top: 28px;
        z-index: 9999;
        left: 46%;
        /*width: 198px;*/
    }/*   	
    header .head-top span.text-size {
        border: 1px solid white;
        padding: 0px 10px;
        border-radius: 30px;
        font-size: 15px!important;
        line-height: 20px;
        text-align: center;
        display: flex;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: none;
    }*/
    header .head-top .search-box01{
        position: fixed;
        top: 74px;
        z-index: 9999;
        padding: 16px;
        padding-left: 23px;
        /* padding: 6px; */
        left: 20%;
        width: 100%;
        background-color: white;
    }
    header .head-top span.search-input {
        display: inline-block;
        padding: 8px 8px;
        left: 29%;
        border: 1px solid #771f94;
        border-radius: 30px;
        background-color: white;
    }
    header .head-top span.search-input input{
        width: 200px;
    }
    header .head-top .container span:nth-child(4){
        display: inline-block;
        position: fixed;
        top: 24px;
        z-index: 9999;
        left: 79%;
    }
    header .head-top .container span:nth-child(5) {
        display: inline-block;
        position: fixed;
        top: 24px;
        z-index: 9999;
        left: 86%;
    }
    header .head-top .social-icon {
        display: inline-block;
        position: fixed;
        top: 24px;
        z-index: 9999;
        left: 93%;
    }   	
    .nav-open .menu-title .mobile-top{
        height: 40px;
    }
    header ul li.search-li{
        height: 65px;
    }


    header .menu li > a {
        font-size: 17px;
        color: #17711e;
        display:block;
        line-height: 55px;
        padding:0 20px;
        width: 80%;
    }

    /*update 2019.09.11*/
    header .menu li > i {
        box-sizing: content-box;
        display: block;
        width: 40px;
        height: 40px;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        transform: unset;
        right: 23px;
        left: auto;
        border: 0;
    }
    header .menu li > i.icon-down:before {
        position: absolute;
        top: 8px;
        left: 50%;
        display: inline-block;
        border-top: 10px solid transparent;
        border-left: 10px solid #17711e;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        content: " ";
    }
    header .menu ul li.open-dropdown >i:before{
        border-top: 10px solid #17711e;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        top: 16px;
        left: 27%;
    }
    header .menu ul li.open-dropdown >i{
        right: 20px;
        top: 10px;
        bottom: auto;
    }
    /*update 2019.09.11 end*/

    header .menu li > a i{
        display: none;
    }
    header .menu ul li .dropdown{
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        /*background-color: transparent;*/
        box-shadow: none;
        max-height: none;
        transition: all 0s;
        /* z-index: 999; */
        overflow: hidden;
        border-top: none;
        width: auto;
        background-color: white;
        display: none;
    }
    header .menu ul li:nth-child(6) .dropdown ,
    header .menu ul li:nth-child(7) .dropdown {
        width: auto;
    }
    header .menu ul li:nth-child(7) .dropdown{
        left: auto;
        transform: unset;
        right: auto;
    }
    header .menu ul li .dropdown p {
        margin: 0 20px;
        border-bottom: 2px solid white;
        font-size: 17px;
        padding: 10px 0;
    }
    header .menu ul li .dropdown p a{
        color: #1e2c36;
    }
    header .menu ul li .dropdown p:last-child {
        border-bottom:1px solid rgba(204, 204, 204, 0.2);
    }
    header .menu ul li .dropdown p:first-child:before{
        display: none;
    }

    /*mobile menu*/
    .menu-title{
        background-color: #771f94;
        padding: 17px 0;
        margin: 0;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 9999;
    }
    .menu-title span.language{
        padding: 0 24px!important;
        z-index: 999;
    }
    .menu-title span.language a:hover{
        opacity: 1;
        color: white;
    }
   .menu-title span{
        display: inline-block;
        position: relative;
        padding: 0 12px!important;
        overflow: visible;
    }
    .menu-title a{
        display: inline-block;
    }
    .menu-title .language a{
        color: white;
        border: 1px solid white;
        width: 37px;
        min-height: 35px;
        border-radius: 35px;
        font-size: 16px;
        line-height: 35px;
        text-align: center;
        position: absolute;
        top: -27px;
        left: 4px;
        background-color: #771f94;
    }
    /*header .menu ul li:hover >i{*/
        /*transform: rotate(225deg);*/
        /*right: 19px;*/
        /*top: 24px;*/
        /*bottom: auto;*/
    /*}*/
    header .menu ul li.open-dropdown .dropdown{
        /*max-height:1000px;*/
        /*opacity: 1;*/
        /*overflow: visible;*/
        background-color: #f2f2f2;
    }
    header .menu ul li:hover .dropdown{
        max-height: none;
        opacity: 1;
        display: none;
    }

    .menu-title .language a:active,
    .menu-title .language:active a{
        opacity: 1;
    }
    .menu-title .language a i i{
        cursor: pointer;
    }

   .menu-title span.facebook:before,
    .menu-title span.tube:before{
        position: absolute;
        content: '';
        width: 4px;
        height: 40px;
        border-radius: 20px;
        top: -3px;
        left: 47%;
        transform: unset;
        background-color: white;
        z-index: 1;
    }
    .menu-title span.facebook:after,
    .menu-title span.tube:after{
        position: absolute;
        content: '';
        width: 40px;
        height: 4px;
        border-radius: 20px;
        top: 17px;
        left: 15%;
        transform: unset;
        background-color: white;
        z-index: 1;
    }
    .menu-title span.facebook a,
    .menu-title span.tube a{
        display: inline-block;
        background-color: white;
        width: 33px;
        height: 33px;
        border-radius: 33px;
        color: #771f94;
        text-align: center;
        font-size: 16px;
        line-height: 36px;
        z-index: 99;
        position: relative;
    }
    .menu-title span.facebook a i{
        font-size: 24px;
    }
    .menu-title span.tube a i{
        font-size: 24px;
    }
    .menu-title span.facebook a:hover,
    .menu-title span.tube a:hover{
        opacity: 1;
    }
    .menu-title span.facebook a:hover i,
    .menu-title span.tube a:hover i{
        opacity: 0.8;
    }
    header ul li.search-li{
        padding: 22px 5px 1px 5px;
        text-align: center;
    }
    header .menu ul li span.search-input{
        line-height: unset;
        padding: 6px 10px 8px 10px;
    }
    header .menu ul li span.search-input{
        display: inline-block;
        border: 1px solid #771f94;
        /* padding: 5px 8px; */
        /*width: 242px;*/
        border-radius: 30px;
        background-color: white;
    }
    header .menu ul li span.search-input input{
        background-color: transparent;
        border: 0;
        width: 200px;
    }
    header .menu ul li span.search-input button{
        background-color: #771f94;
        border: 0;
        color: white;
        border-radius: 28px;
        width: 28px;
        height: 28px;
    }
    header .menu ul li.menu-title:after,
    header .menu ul li.search-li:after,
    header .menu ul li:last-child:after {
        content: '';
        border-bottom-width: unset;
        border-bottom-style: unset;
        border-bottom-color: unset;
        right: 20px;
    }
    header .menu ul li:after {
        content: '';
        border-bottom-width: 3px;
        border-bottom-style: dashed;
        border-bottom-color: #f5b41a;
        right: 20px;
        position: absolute;
        left: 20px;
    }
    header .menu ul li.open-dropdown:after {
        border: unset;
    }
    /*!*mobile menu*!*/

    /*header .menu ul li.open-dropdown .dropdown{*/
        /*max-height:1000px;*/
        /*opacity: 1;*/
        /*overflow: visible;*/
    /*}*/

    .footer_bottom ul li{
        padding-right: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
        margin-top:20px;
        display: flex;
        align-items: center;
    }
    .footer_bottom ul li:last-child{
        -ms-flex: 0 0 66.66%;
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }
    .footer_bottom ul li:nth-child(1),
    .footer_bottom ul li:nth-child(2),
    .footer_bottom ul li:nth-child(3){
        margin-top:0px;
    }
    .footer_bottom ul li:nth-child(3),
    .footer_bottom ul li:nth-child(6){
        border-right: 0;
    }
    .footer_bottom ul li span{
        margin: 0 auto;
        text-align: left;
    }
    .index .carousel .carousel-caption{
        transform: unset;
    }
    .index .carousel .carousel-caption {
        position: relative;
        left: 0;
        right: auto;
        bottom: auto;
        top: 0;
        z-index: 10;
        padding-top: 0;
        padding-bottom: 0;
        color: #fff;
        text-align: center;
    }
    .index .carousel .carousel-caption{
        background-image: url("../images/mobile-bg-01.jpg");
        background-position: center top;
        padding: 0;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .index .carousel .carousel-caption .banner-text {
        max-width: 100%;
    }
    .index .what-new .new-text {
        height:auto;        
    }    
    .index .what-new .container .apply {
        max-width: 100%;
        margin: 0;
        /* margin-right: 0; */
    }
    .index .what-new .container .row .col-lg-6:nth-child(2){
        padding: 0!important;
        background-color: white;
    }
    .carousel-indicators li {
        background: transparent;
        border: 2px solid rgba(120, 31, 149, 0.62);
    }
    .carousel-indicators .active {
        opacity: 1;
        background-color: rgba(255,255,255,1);
        border: 2px solid rgba(120, 31, 149, 1);
    }
    .carousel-indicators li.carousel-pause{
        background:  rgba(255,255,255,0);
        border: 4px solid rgba(120, 31, 149, 0.90);
        border-radius:unset;
        width: 6px;
        height: 16px;
        margin-right: 1px;
        z-index: 999;
        border-top: 0;
        border-bottom: 0;
    }
    .carousel-indicators li.carousel-pause.active1{
        width: 0;
        height: 0;
        border-width: 8px 0 8px 10px;
        border-style: solid;
        border-color: transparent transparent transparent rgba(120, 31, 149, 0.9);
    }
    .reward .list4 .units .units1 div div div{
        border-bottom:unset;
        padding: 6px 0;
    }
    .reward .list4 .units .units1 div div div p{
        border: unset;
    }


    /*history*/
    .timeline:before {
        left: 0;
        top: 0px;
        bottom: 68px;
    }
    .timeline > li.timeline-inverted > .timeline-panel {
        width: 90%;
    }
    .timeline > li > .timeline-panel {
        width: 90%;
        float: right;
        position: relative;
    }
    .timeline > li.timeline-inverted > .timeline-panel:after {
        left: -8px;
        right: auto;
    }
    .timeline > li > .timeline-panel:after {
        left: -8px;
        right: auto;
        border-top: 6px solid #17711e;
        border-left: 6px solid #17711e;
        border-right: 6px solid #17711e;
        border-bottom: 6px solid #17711e
    }
    .timeline > li > div.box-border {
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border-bottom: 2px solid white;
        border-top: 2px solid white;
        border-right: 3px solid #29363f;
        border-left: 3px solid #29363f;
        text-align: center;
        position: relative;
        top: -53px;
        left: 0;
        margin-left: -18px;
        z-index: 12;
        background-color: white;
    }
    .timeline > li > div.box-border2{
        top: -48px;
    }
    .timeline > li > div.box-border > .timeline-badge {
        color: #fff;
        width: 25px;
        height: 25px;
        line-height: 63px;
        font-size: 16px;
        text-align: center;
        position: relative;
        margin-top: 3px;
        left: 7%;
         margin-left: unset;
        background-color: #771f94;
        z-index: 10;
        border-radius: 50%;
        box-shadow: 1px 1px 20px #b1b1b1;
    }
    .timeline > li > div.box-border > .timeline-badge i {
        display: block;
        color: #771f94;
        font-size: 18px;
        position: relative;
        /* left: 165%; */
        /* right: -123%; */
        left: 70px;
        top: -18px;
        font-weight: bold;
    }
    .timeline > li > div.box-border > .timeline-badge i:after {
        position: absolute;
        top: 25px;
        right: 42px;
        display: inline-block;
        border-top: 6px solid #771f94;
        border-left: 6px solid #771f94;
        border-right: 6px solid #771f94;
        border-bottom: 6px solid #771f94;
        border-radius: 30px;
        content: " ";
    }
    .timeline > li > div.box-border:before {
        left: 32px;
    }
    .timeline > li > div.box-border1:before {
        width: 12px;
    }
    .timeline > li > div.box-border:after {
        content: "";
        position: absolute;
        width: 12px;
        height: 3px;
        background-color: #29363f;
        top: 48%;
        left: -14px;
        z-index: 5;
    }
    .timeline > li > div.box-border.box-border3:after,
    .timeline > li > div.box-border.box-border4:after{
        content: unset;
    }
    .timeline > li > div.box-border.box-border3:before,
    .timeline > li > div.box-border.box-border4:before {
        content: unset;
    }
    .timeline > li > .timeline-panel:before{
        content: "";
        width: 60px;
        left: -72px;
        top: 41px;
        position: absolute;
        height: 3px;
        background-color: #29363f;
    }
    .timeline > li >.timeline-more {
        position: relative;
        bottom: unset;
        margin-top: 160px;
        left: 50%;
        margin-left: -40px;
        width: 160px;
    }
    .timeline > li >.timeline-more .arrow-icon {
        bottom: -54px;
        left: -309px;
    }

    .timeline > li .timeline-center-arrow{
        left: 0;
    }
    .timeline > li .a1 {
        bottom: -10px;
    }
    .timeline > li .a2 {
        bottom: -11px;
    }
    /*history end*/

    /*mission*/
    .mission .mission-content .units1 > div >div.row{
        padding-left: 1rem;
    }
    .mission .mission-content .units1 > div >div.row >div.col-lg-3{
        text-align: center;
    }
    /*mission end*/

    /*about*/
    .about .reward .list4 .units .units1 div > .row{
        margin: 0!important;
        padding: 0!important;
    }
    .about .reward .list4 .units .units1 div > .b1{
        background-color: #f2f2f2;
    }
    .about .reward .list4 .units .units1 div > .col-lg-8{
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #eaeaea;
    }
    .about .reward .list4 .units .units1 div > .col-lg-8:last-child{
        border-bottom:0;
    }
    .about .reward .list4 .units .units1 div > .col-lg-4 p{
        border-bottom: 1px solid #eaeaea;
        margin: 0 15px;
        font-weight: bold;
        padding: 6px 0;
    }
    .about .reward .list4 .units .units1 div > .col-lg-8 span{
        padding: 6px 15px;
        display: block;
    }
}

@media only screen and (max-width: 767px){
	.cookiePrivacy .messageSection {width:100%%;float: none;}
	.cookiePrivacy .buttonSection {width:100%;float: none;text-align:center;margin-top:15px;}	
    .timeline > li .a2 {
        bottom: 15px;
    }
    .timeline > li .a1 {
        bottom: 15px;
    }
    header .head-top span.language{
        left: 20%;
    }
	header .head-top span.text-size {left:43%;}	
    header .head-top span.search-input{
        left: 29%;
    }
    header .head-top .container span:nth-child(4){
        left: 68%;
    }
    header .head-top .container span:nth-child(5){
        left: 79%;
    }
    header .head-top .social-icon{
        left: 90%;
    }	
    /*footer*/
    .footer_content ul {
        display: block;
    }
    .footer_content ul li{
        display: block;
        padding-bottom: 20px;
    }
    .footer_bottom ul li,
    .footer_bottom p{
        font-size: 14px;
    }
    /*footer end*/
    /*update 20190919*/
    .index .banner .carousel .carousel-inner .carousel-item img{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + 296px) !important;
        max-width: unset!important;
    }
    /*update 20190919*/
    .p-banner img{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + 296px) !important;
        /*width: auto!important;*/
        max-width: unset!important;
    }
    .index .what-new .new-text {
        padding-left: 60px;
        position: relative;     
    }
    /*update by shirley on 19/09/2019*/
    .index .carousel .carousel-caption .banner-text .banner-title {
        font-size: 20pt;
    }
    /*.p-banner h4 {/*update by canning on 15/09/2019*/
    .p-banner h1 {
        font-size: 20pt;
        background-size: 100% 7px;
    }
    /*update 20190919*/
    .p-banner-text {
        height: auto;
        line-height: 31px;
        padding: 11px 0;
    }
    .p-banner-text a,
    .p-banner-text i,
    .p-banner-text span{
        font-size: 16px;
    }
    /*bg picture*/
    .history-detail .history-detail-content,
    .mission-content,
    .chief-content,
    .circular-content,
    .reward,
    .album-content,
    .album2-content,
    .issue-content,
    .issue2-content,
    .camp-content{
        margin-top: 40px;
    }
    .reward .list2 ul li {
        /*padding-left: 35px;*/
        padding-left: 80px;
    }

    .history-detail .history-detail-content .text-box h4,
    .album2 .album2-content .top-text h4{
        font-size: 20pt;
    }
    .reward h3,
    .about .reward h4
    ,.reward h4{
        font-size: 20pt;
        line-height: 50px;
    }
    .reward .list1 ul.u1 li {
        position: relative;
        padding-left: 30px;
        font-size: 14pt;
        color: #1e2c36;
        font-family: NotoSansCJKscBold;
        line-height: 30px;
    }
    .history-detail .history-detail-content .text-box p,
    .history-detail .history-detail-content .text-box span,
    .reward .list3 span,
    .reward .list4 p,
    .reward .list1 p,
    .reward .list2 p,
    .reward .list3 p,
    .reward .list4 p,
    .reward .list5 p,
    .reward .list2 ul li p,
    .reward .list2 ul li span,
    .reward .list3 ul li p,
    .reward .list3 ul li span,
    .reward .list4 ul li p,
    .reward .list4 ul li span,
    .reward .list5 ul li p,
    .reward .list5 ul li span,
    .reward .list4
    .units .units1 a,
    .album2 .album2-content .top-text p{
        font-size: 14pt;
        line-height: 28pt;
    }
    .reward .list3 ul li,
    .reward .list3 ul li ul li{
        padding-left: 75px;
    }
    .reward .list4 .units .units1 a{
        padding: 10px;
    }
    .reward .list5 .table th, .about .reward .list5 .table td {
        font-size: 14pt;
        line-height: 28pt;
        padding: 10px 10px;
    }
    .reward .list5 .table td a {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        /* border-radius: 30px; */
        /* background-color: #dfdfdf; */
    }
    .reward .list4 .units .units1 div div div {
        font-size: 14pt;
        line-height: 28pt;
    }
    .official .reward .official-box{
        padding: 16px 10px;
    }
    /*history*/
    .timeline > li > div.box-border.box-border3:before,
    .timeline > li > div.box-border.box-border4:before{
        width: 22px;
        left: 20px;
        top: -248px;
    }
    .timeline > li >.timeline-more {
        position: relative;
        bottom: unset;
        margin-top: 328px;
        margin-bottom: 35px;
        left: 50%;
        margin-left: -69px;
        width: 160px;
    }
    .timeline > li > .timeline-panel:before{
        width: 21px;
        left: -33px;
    }
    .encarta-book{
        text-align: center;
    }
    .young-uniform .person .table tr > td:first-child {
        width: 100px;
    }
    /*history-detail 20190911*/
    .history-detail .history-detail-content .text-box{
        margin-left: 20px;
    }

    /*issue2*/
    .issue2 .issue2-content table{
        /*width: 767px;*/
        /*overflow: auto;*/
        /*white-space: nowrap;*/
    }
    .p1-title span{
        font-size: 30px;
    }

    /*chief*/
    .chief .chief-content .top-title a {
        padding: 10px;
        font-size: 14pt;
    }
    /*chief end*/
    .reset-input {
        padding: 20px 0;
        text-align: center;
    }
    .circular .circular-content .search-box a{
        top: 0;
    }
    .circular .circular-content .result2 .right-text{
        text-align: right;
        /*margin-top: 10px!important;*/
    }
    .reward .list1 ul.u1 li img{
        top: 3px;
    }
    .history-detail .history-detail-content .text-box h4:before {
        top: 10px;
    }
    .history-detail .history-detail-content .text-box ul li ul li p:first-child:before {
        top: 14px;
    }
    .album2 .album2-content .units1 ul.page li {
        margin: 1px;
    }
    ul.page li {
        margin: 1px;
    }
    .reward h3:before, .reward h4:before {
        top: 20px;
    }
    /*reward*/
    .mp{
        position: relative;
        padding-left: 50px;
        display: block;
    }
    .mp i{
        position: absolute;
        display: inline-block;
        left: 0;
    }
    .reward .list5{
        overflow: scroll;
    }
    .reward .list5 table{
        width: 767px;
    }
	.circular-content .result table tr td:nth-child(2){text-align:center !important;}
	.form-content .result table tr td:nth-child(2){text-align:center !important;}
	.hkscouting .hkscouting-content-table {width:100% !important;}
	.hkscouting .hkscouting-content-table td > div a {
		border-radius: 0 !important;
		background-color: transparent !important;
		min-width:35px;
	}	
	.job-content .job-list a {color:#ffffff !important;}
}

@media only screen and (max-width: 450px){
    /*.index .what-new {
        background-position: 27.7% 100%;
    }*/
    .timeline > li >.timeline-more .arrow-icon {
        bottom: -18px;
        left: -103px;
    }
	.por-image-table img {max-width:100px !important;}	
}

@media only screen and (max-width: 375px){
    .timeline > li >.timeline-more .arrow-icon {
        bottom: -18px;
        left: -84px;
    }
}

@media only screen and (max-width: 366px){
    header .head-top span.search-input input {
        width: 170px;
    }
    .timeline > li >.timeline-more .arrow-icon {
        bottom: -18px;
        left: -84px;
    }
}
@media only screen and (max-width: 320px){
    .timeline > li >.timeline-more .arrow-icon {
        bottom: -19px;
        left: -56px;
    }
    .timeline > li > .timeline-panel:before{
        width: 16px;
        left: -27px;
    }
    .reward h3, .reward h4 {
        font-family: NotoSansCJKscMedium;
        font-size: 18pt;
        color: #771f94;
        position: relative;
        line-height: 38px;
    }
    .history .reward .container p, .timeline-heading p, .timeline-heading ul {
        color: #1e2c36;
        font-family: NotoSansCJKscBold;
        font-size: 14pt;
        line-height: 24pt;
    }
    .search-box a{
        padding:9px 15px ;
    }
}

/*updated by canning on 31/10/2019*/
@media only screen and (max-width: 1300px){
    .fancy-section img {max-width:210px; max-height: 235px;}
}
/*@media only screen and (max-width: 767px){*/
@media only screen and (max-width: 784px){    

/*updated by canning on 31/10/2019*/
    /*.camp .camp-content .base table tr td:first-child,
    .camp .camp-content .base table tr th:first-child {
        color: #FFFFFF;
        vertical-align: middle;
        background: rgb(119, 31, 148);
    }*/
     
    
    table.basictable tr td:first-of-type,
    table.basictable tr:nth-of-type(2n+2) td:first-of-type,
    table.basictable tr td:first-of-type:before {
        color: #ffffff !important;
        background: rgb(119, 31, 148);        
    } 
    /*
    table.two-axis tr td:first-of-type,
    table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
    table.two-axis tr td:first-of-type:before {
        color: #ffffff !important;
        background: rgb(119, 31, 148);        
    } */
    .content .hide-show-content .items > div >div.row{
        padding-left: 15px;   
    }    
    .leaders-continuing-training .border-table tr td:nth-child(1) {width:auto;}
    .leaders-continuing-training .border-table tr td:nth-child(2) {width:auto;}
    .leaders-continuing-training .border-table tr td:nth-child(3) {width:auto;}    
}
@media only screen and (max-width: 767px){
	.p-banner h1{font-size:18px !important;}
    .p-banner-text{
        margin-bottom:1rem;
    }
	#alertContainer {
		width: 100%;
	}	
	#alertText {
	  margin: 5px;
	}	
    .footer_bottom .col-w6, .footer_bottom .col-w4, .footer_bottom .col-w3, .footer_bottom .col-w1{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;		
    }	
	.footer_bottom ul li span a, .footer_bottom p {font-size:15px !important;}
	.chief-commissioner-message-image {max-width:50% !important;}
}
/*for desktop version only*/
@media only screen and (min-width: 975px){
    .media-menu {min-width:140px;}
}
@media only screen and (max-width: 360px){
	.chief-commissioner-message-image {width:100% !important;max-width:100% !important;}
}
/*updated by canning on 31/10/2019*/
/*@media only screen and (max-width: 568px) {
    table.two-axis tr td:first-of-type,
    table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
    table.two-axis tr td:first-of-type:before {
        color: #ffffff;
        background: rgb(119, 31, 148);        
    }

    table.two-axis tr td:first-of-type {
        border-bottom: 1px solid #e4ebeb;
    }
} */
/*updated by canning on 31/10/2019*/