/*
当可视区域大于?px 
@media screen and (min-width: 1599px) {}
当可视区域小于?px 
@media screen and (max-width: 1599px) {}
*/

@media screen and (min-width: 1599px) {
    .navbar {
        border: none !important;
        margin: 0px;
    }

    .navbar-header {
        margin: 20px 0;
    }

    .navbar-brand {
        float: none;
        padding: 0;
        margin: 0 !important;
    }

    .navbar-brand img {
        max-height: 60px;
    }

    .navbar-nav li a {
        padding: 8px 5px;
    }

    .navbar-nav li {
        margin-top: 50px;
    }

    .navbar-left {
        padding-left: 200px;
    }

    .navbar-left li a {
        color: #1d88cb !important;
        font-size: 20px;
    }

    .navbar-left .active a {
        background: none !important;
        border-bottom: 3px solid #1d88cb;
    }

    .navbar-right li {
        margin-right: 10px;
    }

    .navbar-right li a {
        font-size: 22px;
    }

    .navbar-right li a,
    .navbar-right li a:hover,
    .navbar-right li a:focus {
        background-color: transparent !important;
        color: #000000 !important;
    }

    .navbar-right .active a,
    .navbar-right .active a:hover,
    .navbar-right .active a:focus {
        background-color: transparent !important;
       /* color: #9036d6 !important; */
		color: #ffb100 !important;
    }


    .lang-en .navbar-left {
        padding-left: 100px;
    }

    .lang-en .navbar-left li a {
        font-size: 18px;
    }

    .lang-en .navbar-right li a {
        font-size: 20px;
    }
	
	#ofca_logo{ margin-left:-130px;}
	
    .page-home .content-info h2,
    .page-home .content-register h2 {
        /*color: #9036d6;*/
		color: #cae3e8;
        font-size: 45px;
        font-weight: bold;
        margin-bottom: 50px;
    }

    .page-home .content-register h2 {
        color: #ffffff;
    }

    .mfp-img {
        max-width: 960px !important;
    }
}

@media screen and (max-width: 1598px) {

    .navbar {
        border: none !important;
        margin: 0px;
    }

    .navbar-header {
        margin: 20px 0;
    }

    .navbar-brand {
        float: none;
        padding: 0;
        margin: 0 !important;
    }

    .navbar-brand img {
        max-height: 40px;
    }

    .navbar-nav li a {
        padding: 8px 5px;
    }

    .navbar-nav li {
        margin-top: 30px;
    }

    .navbar-left {
        padding-left: 100px;
    }

    .lang-en .navbar-left {
        padding-left: 50px;
    }

    .navbar-left li a {
        color: #1d88cb !important;
        font-size: 20px;
    }

    .navbar-left .active a {
        background: none !important;
        border-bottom: 3px solid #1d88cb;
    }

    .navbar-right li {
        margin-right: 35px;
    }

    .navbar-right li a {
        font-size: 22px;
    }

    .navbar-right li a,
    .navbar-right li a:hover,
    .navbar-right li a:focus {
        background-color: transparent !important;
        color: #000000 !important;
    }

    .navbar-right .active a,
    .navbar-right .active a:hover,
    .navbar-right .active a:focus {
        background-color: transparent !important;
        /*color: #9036d6 !important;*/
		  color: #ffb100 !important;
    }

    .lang-en .navbar-left {
        padding-left: 50px;
    }

    .lang-en .navbar-left li a {
        font-size: 16px;
    }

    .lang-en .navbar-right li a {
        font-size: 18px;
    }


    .page-home .content-article .article {
        padding-top: 0px !important;
    }

    .page-home .content-info h2,
    .page-home .content-register h2 {
        /*color: #9036d6;*/
		color: #cae3e8;
        font-size: 45px;
        font-weight: bold;
        margin-bottom: 50px;
    }

    .page-home .content-register h2 {
        color: #ffffff;
    }

    .page-home .content-logo .logo-support {
        height: 50px !important;
    }

    .page-home .content-logo .logo-cahk {
        height: 56px !important;
    }

    .page-home .content-logo .logo-hkdx {
        height: 28px !important;
    }

    .page-home .content-logo .logo-hkcs {
        height: 42px !important;
    }

    .page-home .content-logo .logo-hkfew {
        height: 30px !important;
    }

    .mfp-img {
        max-width: 960px !important;
    }
}

@media screen and (max-width: 1495px) {
    .lang-en .page-competition_detail .prize-info h2 {
        font-size: 1.8vw;
    }

    .lang-en .page-competition_detail .prize-info h3.fs-22 {
        font-size: 1.34vw;
    }
}

@media screen and (max-width: 1480px) {
    .lang-en .page-competition_detail .prize-info h1 {
        font-size: 3.3vw;
    }
}

@media screen and (max-width: 1366px) {
    .lang-en .pic_seminar_en {
        margin-top: 185px;
    }

    .lang-en .page-competition_detail .seminar-sub-timetable-right {
        width: 70%;
    }

    .page-competition_detail .seminar-sub-timetable-right {
        width: 84%;
    }

    .page-competition_detail .seminar-sub-timetable-left.course {
        width: 230px;
    }

    .lang-en .page-competition_detail .seminar-sub-timetable-left.course {
        width: 180px;
    }

    .page-competition_detail .seminar-sub-timetable-right.course {
        width: 58%;
        margin-bottom: 15px;
    }

    .lang-en .page-competition_detail .seminar-sub-timetable-right.course {
        width: 70%;
        margin-bottom: 15px;
    }

    .page-competition_detail .prize-info h1 {
        font-size: 36px;
    }
}

@media screen and (max-width: 1365px) {
    .process-container {
        width: 500px;
    }

    .process-container .item-date {
        width: 120px;
        font-size: 20px;
    }

    .process-container .item-date-0 {
        top: 3%;
        font-size: 32px;
    }

    .process-container .item-date-1 {
        top: 10%;
    }

    .process-container .item-date-2 {
        top: 17%;
    }

    .process-container .item-date-3 {
        top: 23.5%;
    }

    .process-container .item-date-4 {
        top: 30%;
    }

    .process-container .item-date-5 {
        top: 37%;
    }

    .process-container .item-date-6 {
        top: 43.5%;
    }

    .process-container .item-date-7 {
        top: 50%;
    }

    .process-container .item-date-8 {
        top: 56.5%;
    }

    .process-container .item-text {
        font-size: 18px;
        line-height: 22px;
        padding: 19px 27px;
    }

    .process-container .item-text-left-1 {
        top: 6%;
    }

    .process-container .item-text-left-2 {
        top: 20%;
    }

    .process-container .item-text-left-3 {
        top: 33%;
    }

    .process-container .item-text-left-4 {
        top: 48.5%;
    }

    .process-container .item-text-right-1 {
        top: 13%;
    }

    .process-container .item-text-right-2 {
        top: 26%;
        padding: 19px 18px;
    }

    .process-container .item-text-right-3 {
        top: 40%;
    }

    .process-container .item-text-right-4 {
        top: 55%;
    }
}

@media screen and (max-width: 1230px) {
    .navbar-header {
        margin: 10px 0;
    }

    .navbar-brand img {
        height: 50px;
    }

    .navbar-nav li {
        margin-top: 20px;
    }

    .navbar-nav li a {
        padding: 5px;
    }

    .navbar-left li a {
        font-size: 16px;
    }

    .navbar-right li a {
        font-size: 18px;
    }

    .navbar-left .active a {
        border-bottom: 2px solid #1d88cb;
    }

    .navbar-left {
        padding-left: 30px;
    }

    .lang-en .navbar-left {
        padding-left: 10px;
    }

    .lang-en .navbar-left li a {
        font-size: 12px;
    }

    .lang-en .navbar-right li a {
        font-size: 14px;
    }

    .page-home .content-article .article {
        padding-top: 0px;
        font-size: 16px;
    }

    .mfp-img {
        max-width: 720px !important;
    }

    .page-competition_detail .kick-off-desc.mr-5 {
        margin-right: 10px !important;
    }

}

@media screen and (max-width: 1152px) {
    .br-d-none {
        display: none;
    }
}

@media screen and (max-width: 1150px) {
    .lang-en .page-competition_detail .seminar-sub-timetable-right {
        width: 68%;
    }

    .page-competition_detail .seminar-sub-timetable-right {
        width: 80%;
    }

    .page-competition_detail .seminar-sub-timetable-right.course {
        width: 54%;
        margin-bottom: 15px;
    }

    .lang-en .page-competition_detail .seminar-sub-timetable-left.course {
        width: 100%;
    }

    .lang-en .page-competition_detail .seminar-sub-timetable-right.course {
        width: 100%;
        margin-top: 10px;
    }
}

@media screen and (max-width:991px) {
    #sail-header .navbar-nav {
        margin: 0;
    }

    #sail-header.home-header {
        position: relative;
    }

    .navbar-nav {
        flex-direction: column;
    }


    .navbar-header {
        margin: 5px 0;
    }

    .navbar-brand img {
        height: 40px;
    }

    #bs-navbar-collapse-1 {
        padding: -0;
    }

    .navbar-nav li {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .navbar-nav li a {
        padding: 10px 0;
    }

    #sail-header .navbar-right li {
        margin-right: 12px;
    }

    #sail-header .dropdown-menu li {
        margin-right: 0px;
    }

    .navbar-left li a {
        font-size: 12px;
    }

    .navbar-right li a {
        font-size: 16px;
    }

    .navbar-left {
        padding-left: 5px;
    }


    .lang-en .navbar-left {
        padding-left: 0px;
    }

    .lang-en .navbar-left li a {
        font-size: 12px;
    }

    .lang-en .navbar-right li a {
        font-size: 12px;
    }
	
    .page-home .content-article .img {
        max-width: 500px;
        margin: auto;
        padding-right: 0px !important;
        padding-bottom: 50px !important;
    }

    .page-home .content-article .mobile-heading {
        margin-top: 0px !important;
        padding-top: 2rem;
        margin-bottom: 15px !important;
    }

    .lang-en .pic_seminar_en {
        margin-top: 0;
    }

    .mfp-img {
        width: 100% !important;
    }

    .page-competition_detail .prize-info {
        text-align: center;
    }

    .page-home .content-register .row.d-flex,
    .page-competition_detail .prize-info .d-flex {
        flex-direction: column;
    }

    .page-competition_detail .prize-info h2,
    .lang-en .page-competition_detail .prize-info h2 {
        font-size: 1.5rem;
    }

    .page-competition_detail .prize-info h2.lh-08 {
        line-height: 1.1;
    }

    .lang-en .page-competition_detail .prize-info h3.fs-22 {
        font-size: 1.2rem;
    }

    .page-competition_detail .prize-info .col-md-3 {
        width: 100%;
        padding: 0 10px 0 15px;
        border-radius: 10px 10px 0 0;
    }

    .page-competition_detail .prize-info .col-md-8 h2,
    .page-competition_detail .prize-info .col-md-8 h3 {
        text-align: center;
        padding-left: 0;
        margin-bottom: 10px;
    }

    .page-competition_detail .prize-info h1 {
        text-align: center;
        font-size: 46px;
        margin-top: 0;
    }

    .lang-en .page-competition_detail .prize-info h1 {
        font-size: 40px;
    }

    .page-competition_detail .seminar-sub-timetable-left,
    .lang-en .page-competition_detail .seminar-sub-timetable-left {
        width: 100%;
        margin-bottom: 5px;
    }

    .page-competition_detail .seminar-sub-timetable-left th,
    .page-competition_detail .seminar-sub-timetable-left td,
    .page-competition_detail .seminar-sub-timetable-left .text-left {
        width: 100%;
        text-align: -webkit-center;
        text-align: center !important;
    }

    .page-competition_detail .seminar-sub-timetable-left .course-content-th {
        justify-content: center;
    }

    .page-competition_detail .seminar-sub-timetable-left td .course-content-th {
        width: 100%;
        text-align: -webkit-center;
    }

    .page-competition_detail .seminar-sub-timetable-left td .course-content-th td:first-child {
        width: 30%;
        text-align: right !important;
    }

    .page-competition_detail .seminar-sub-timetable-left td .course-content-th td:last-child {
        width: 70%;
        text-align: left !important;
    }

    .page-competition_detail .seminar-sub-timetable-right,
    .lang-en .page-competition_detail .seminar-sub-timetable-right {
        width: 100%;
        text-align: center !important;
        margin-bottom: 15px;
    }

    .seminar-sub-timetable-right.float-end th {
        text-align: center !important;
    }

    .page-competition_detail .seminar-sub-timetable-left.course,
    .lang-en .page-competition_detail .seminar-sub-timetable-left.course {
        width: 100%;
    }

    .page-competition_detail .seminar-sub-timetable-right.course,
    .lang-en .page-competition_detail .seminar-sub-timetable-right.course {
        width: 100%;
        text-align: center !important;
        margin-bottom: 15px;
        margin-top: 0;
    }

    .page-competition_detail .seminar-icon {
        height: 25px;
        margin-right: 10px;
    }

    .page-competition_detail .kick-off-desc.mr-5 {
        margin-right: 0 !important;
    }

    .page-competition_detail .seminar-icon.seminar-icon-location {
        height: 25px;
        margin-left: 3px;
        margin-right: 15px;
    }

    .final-judge-table-div {
        padding: 0 !important;
    }

    .lang-en .page-competition_detail .register-button {
        max-width: 350px !important;
    }
}


@media screen and (max-width:767px) {
    .desktop-lang {
        display: none !important;
    }

    .pc-only {
        display: none !important;
    }

    .mobile-lang {
        display: flex !important;
        flex-direction: row;
        justify-content: left;
        margin-right: 0 !important;
    }

    .mobile-lang .mobile-lang-button {
        display: block !important;
    }

    .mobile-lang a {
        margin-right: 25px;
    }

    .mobile-lang a:last-child {
        margin-right: 0px;
    }

    .navbar-nav li {
        margin-top: 5px;
    }

    .navbar-left li a {
        font-size: 18px;
    }

    .navbar-right li a {
        font-size: 20px;
    }

    .navbar-left {
        padding-left: 0px;
    }

    .lang-en .navbar-right li a {
        font-size: 16px;
    }

    .navbar-right {
        display: flex;
    }

    .navbar-right li {
        margin-right: 10px;
    }

    #sail-header .dropdown-menu {
        padding: 0;
    }

    #sail-header .dropdown-menu li {
        padding: 5px 0;
    }

    .lang-en #sail-header .dropdown-menu li a {
        font-size: 12px;
        padding: 5px 10px;
        text-wrap: wrap;
    }

    #sail-header .dropdown-menu li a {
        font-size: 16px;
        padding: 5px 10px;
    }

    .process-container {
        width: 300px;
    }

    .process-container .item-date {
        width: 76px;
        font-size: 12px;
    }

    .process-container .item-date-0 {
        top: 1%;
        font-size: 25px;
    }

    .process-container .item-date-1 {
        top: 5.5%;
    }

    .process-container .item-date-2 {
        top: 9.5%;
    }

    .process-container .item-date-3 {
        top: 13.5%;
    }

    .process-container .item-date-4 {
        top: 17.5%;
    }

    .process-container .item-date-5 {
        top: 21.5%;
    }

    .process-container .item-date-6 {
        top: 25.5%;
    }

    .process-container .item-date-7 {
        top: 29.5%;
    }

    .process-container .item-date-8 {
        top: 33.5%;
    }

    .process-container .item-text {
        font-size: 12px;
        line-height: 15px;
        padding: 8px 13px;
    }

    .process-container .item-text-left-1 {
        top: 4%;
    }

    .process-container .item-text-left-2 {
        top: 12%;
    }

    .process-container .item-text-left-3 {
        top: 20%;
    }

    .process-container .item-text-left-4 {
        top: 29%;
    }

    .process-container .item-text-right-1 {
        top: 7.5%;
    }

    .process-container .item-text-right-2 {
        top: 16%;
        padding: 9px 8px;
    }

    .process-container .item-text-right-3 {
        top: 24%;
    }

    .process-container .item-text-right-4 {
        top: 33%;
    }

    .mfp-img {
        width: 100% !important;
    }

    .content-article .container-fluid {
        max-width: 90%;
    }

    .page-home .content-article .fs-27 {
        font-size: 20px;
        line-height: 30px;
    }

    .page-home .content-article .mobile-heading {
        font-size: 20px;
    }

    .media.header-bar h2,
    .media.header-bar h1 {
        font-size: 24px;
    }

    .header-bar img.bullet-icon {
        width: 35px;
        transform: rotate(90deg);
        margin-right: 10px;
    }

    .page-competition_detail .seminar-sub-timetable-left td .course-content-th td:first-child {
        width: 22%;
        text-align: right !important;
    }

    .page-competition_detail .seminar-sub-timetable-left td .course-content-th td:last-child {
        width: 78%;
        text-align: left !important;
    }

    .page-competition_detail ul li {
        line-height: 28px;
    }

    .lang-en .text-justify {
        text-align: left !important;
    }
}

@media screen and (max-width:640px) {

    .pc-only-table {
        display: none;
    }

    .mobile-only {
        display: block !important;
    }

    .mobile-menu .panel-heading {
        background-color: #a2b5db;
        color: #fff;
    }

    .mobile-menu .panel-heading a {
        color: #fff;
    }

    .part-one,
    .part-two {
        text-align: center;
    }


    .page-home .content-logo .logo-main,
    .page-home .content-logo .logo-friend {
        margin-right: auto;
    }

    .content-logo .logo {
        height: auto !important;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 80%;
    }

    .page-home .content-logo .logo-main,
    .page-home .content-logo .logo-hkpc {
        width: 100%;
    }

    .page-home .content-logo .logo-support {
        height: auto !important;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 70%;
    }

    .page-home .content-logo .logo-support.logo-hksea {
        width: 55%;
    }

    .page-home .content-logo .logo-friend {
        height: auto !important;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 50%;
    }

    .en-bold.fs-26 {
        font-size: 18px;
    }

    .page-competition_detail .container-fluid {
        padding: 0px !important;
        font-size: 18px;
        max-width: 100%;
        line-height: 28px;
    }

    .page-contact_us .container-fluid {
        padding: 0px !important;
        font-size: 18px;
        max-width: 92%;
        line-height: 28px;
    }

    .page-news .container-fluid {
        padding: 0px !important;
        font-size: 18px;
        max-width: 92%;
        line-height: 28px;
    }

    .page-competition_detail .grading-table th {
        font-size: 16px;
        padding: 10px 5px;
    }

    .page-competition_detail .grading-table td:nth-child(odd) {
        text-align: left !important;
    }

    .page-in .container-fluid {
        padding: 0px !important;
        font-size: 18px;
    }

    .page-news .container-fluid {
        padding: 0px !important;
        font-size: 18px;
    }

    .col-md-12 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .logo {
        max-width: 80% !important;
    }

    .logo-main {
        max-width: 100% !important;
    }

    .logo-hkpc {
        /*max-width: 210px !important*/
        /* max-width: 70% !important; */
    }

    .page-competition_detail .register-button {
        max-width: 200px !important;
    }


    .lang-en .page-competition_detail .register-button {
        max-width: 250px !important;
    }

    #sail-footer .container-fluid {
        font-size: 16px;
        max-width: 100%;
        padding: 0 5px 0 5px;
    }

    .final-judge-table-div {
        padding: 0 !important;
    }

    .page-competition_detail .seminar-sub-timetable-left td .course-content-th td:first-child {
        width: auto;
        text-align: right !important;
    }

    .page-competition_detail .seminar-sub-timetable-left td .course-content-th td:last-child {
        width: 70%;
        text-align: left !important;
    }
}

@media screen and (max-width: 500px) {
    .page-competition_detail .seminar-sub-timetable-left td .course-content-th td:last-child {
        width: 77%;
        text-align: left !important;
    }

    .page-competition_detail .grading-table th {
        font-size: 12px;
    }
}

.lang-en .content-photo_gallery .item-menu-right .title {
    line-height: 48px !important;
}

.lang-en .content-photo_gallery .item-menu-right2 .title {
    line-height: 20px !important;
    font-size: 18px;
}

.lang-en .content-photo_gallery .item-menu-right3 .title {
    line-height: 20px !important;
    margin-top: 3px !important;
}

.content-photo_gallery .item-back .text-menu {
    font-size: 24px !important;
}

.content-photo_gallery .item-back .text-menu {
    margin-left: 20px !important;
}

.lang-en .content-photo_gallery .item-menu-right .title {
    line-height: 30px !important;
}

.lang-en .content-photo_gallery .item-menu-right2 .title {
    line-height: 16px !important;
    font-size: 14px;
}

.lang-en .content-photo_gallery .item-menu-right3 .title {
    line-height: 16px !important;
}

@media only screen and (max-width: 480px) {
    .page-contact_us .contact-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-contact_us .contact-info {
        font-size: 16px;
    }

    .page-contact_us .icon-person,
    .page-contact_us .icon-phone {
        width: 15px;
        max-width: 15px;
        margin-right: 10px;
    }

    .page-contact_us .icon-email {
        width: 18px;
        max-width: 18px;
        margin-right: 7px;
    }

    .page-news .news-info {
        font-size: 16px;
    }

    .lang-en .page-competition_detail .prize-info h2,
    .page-competition_detail .prize-info h3 {
        font-size: 6.8vw;
    }

    .lang-en .page-competition_detail .prize-info h3.fs-22 {
        font-size: 5.8vw;
    }
}


@media only screen and (max-width: 280px) {
    .navbar-brand {
        width: 70%;
        display: flex;
        align-items: center;
    }

    .navbar-brand img {
        width: 100%;
        height: auto;
    }

    .page-contact_us .contact-info {
        font-size: 12px;
    }

    .page-news .news-info {
        font-size: 12px;
    }

    .page-contact_us .icon-person,
    .page-contact_us .icon-phone {
        width: 13px;
        max-width: 13px;
        margin-right: 5px;
    }

    .page-contact_us .icon-email {
        width: 13px;
        max-width: 13px;
        margin-right: 5px;
    }

    .page-competition_detail .prize-info .col-md-8 {
        padding: 0;
    }

    .page-competition_detail .prize-info h1 {
        font-size: 36px;
    }

    .page-competition_detail .container-fluid {
        font-size: 16px;
    }

    .media.header-bar h2,
    .media.header-bar h1 {
        font-size: 20px;
    }


    .lang-en .page-competition_detail .register-button {
        max-width: 200px !important;
    }
}

@media (min-width: 992px) {
    .page-contact_us .icon-email {
        width: 25px;
        max-width: 25px;
        margin-right: 10px;
    }
}

@media (min-width: 1000px) {
    .navbar-right .dropdown-menu {
        width: 450px !important;
        left: 0;
    }

    .navbar-right .dropdown-menu li {
        margin: 0 !important;
    }
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu {
        width: 320px;
        left: 0;
    }

    .navbar-right .dropdown-menu li {
        margin: 0 !important;
    }
}