* {
        /*font-family: 'Lato', sans-serif, 'Arial Unicode MS', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Microsoft Mhei', PMingLiU, MingLiU;*/
        font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei UI", "Microsoft JhengHei", "Microsoft Mhei", PMingLiU, MingLiU, sans-serif;
        font-weight: 400;
    }

    a.safety-accordion-heading.title-box {
        background-color: #1b1988 !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    h2 {
        color: #004BA9;
        < !-- text-transform: uppercase;
        -->
    }

    h2>a {
        text-decoration: none;
        color: #146195;
        font-weight: 800;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        text-align: left;
        padding: 8px;
    }

    th {
        background-color: #000;
        color: white;
    }
	
    h2.events {
		font-size: 2.8em;
		color:#006f9a;
		text-align:center;
		background-image: none;
		padding-left: 0px;
		font-weight: 800;
		background-color:white;
	}
	.events-desc {
		border-radius: 25px;
		border: 3px solid #80d5de;
		padding: 20px;
		background-color: #eff8ff;
		text-align: left;
	}
	
	table a {
		color:#000;
	}
    < !-- Learning Resources-->.arrows {
        width: 100%;
    }

    .arrow-left,
    .arrow-right {
        top: 70px;
    }

    .vid-item:hover {
        background: #c0cafe;
    }

    .pid-item {
        display: block;
        width: 148px;
        height: 148px;
        float: left;
        margin: 0;
        padding: 10px;
        position: relative;
    }

    .pid-item:hover {
        cursor: pointer;
        background: #8faea3;
    }

    .pid-list-container {
        width: 92%;
        overflow: hidden;
        margin-top: 20px;
        margin-left: 4%;
        margin-right: 4%;
        padding-bottom: 0px;
    }
	
	.eventNotesContainer{
		margin: 0 auto;
		width: 100%;
		display: flex!important;
		flex-wrap: wrap;
		justify-content: center;
	}
	.eventNotes {
		margin: 30px; 
		vertical-align: middle; 
		border: 1px solid #17f1f9; 
		border-radius: 5px; 
		background-color: #1a5268;
		font-size:1.5em; 
		color: #17f1f9; 
		font-style: italic; 
		padding:10px;
	}
    .photo-arrow-left {
        color: #fff;
        position: absolute;
        background: #67B4FF;
        padding: 15px;
        left: -25px;
        top: 50px;
        z-index: 99;
        cursor: pointer;
    }

    .photo-arrow-right {
        color: #fff;
        position: absolute;
        background: #67B4FF;
        padding: 15px;
        right: -25px;
        top: 50px;
        z-index: 100;
        cursor: pointer;
    }

    .photo-arrow-right:hover,
    .photo-arrow-left:hover {
        background: #CC181E;
    }

    .photo-arrows {
        position: relative;
        width: 100%;
    }


    a.safety-accordion-heading h2 {
        background: none;
    }

    a.safety-accordion-heading.active h2 {
        background: none;
    }

    /* override style at style.css ***********/

    //               @media (min-width:440px) {
    //                   div.safety-accordion-risk > div {
    //                       width: 480px;
    //                   }
    //                   a.safety-accordion-heading h2 {
    //                       width: 340px;
    //                   }
    //               }

    //               @media (min-width:768px) {
    //                   div.safety-accordion-risk > div {
    //                       width: 580px;
    //                   }
    //                   a.safety-accordion-heading h2 {
    //                       width: 460px;
    //                   }
    //               }

    //               @media (min-width:992px) {
    //                   div.safety-accordion-risk > div {
    //                       width: 800px;
    //                   }
    //                   a.safety-accordion-heading h2 {
    //                       width: 680px;
    //                   }
    //               }

    //               @media (min-width:1200px) {
    //                  div.safety-accordion-risk > div {
    //                       width: 1000px;
    //                   }
    //                   a.safety-accordion-heading h2 {
    //                       width: 880px;
    //                   }
    //               }

    a.safety-accordion-heading {
        background-color: #10294e;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    a.safety-accordion-heading>h2 {
        background-color: #628cb2;
    }

    a.safety-accordion-heading.active {
        background: #003a5b !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    a.safety-accordion-heading>h2 {
        font-color: #080208;
    }

    .safety-accordion-control {
        margin-left: 120px;
    }

    .underline {
        text-decoration: underline;
    }

    /*============css 2017============*/

    body div#breadcrumb {
        display: block;
    }

    div#content {
        border-bottom: 0 !important;
        width: 100%;
        background-color: white;
        float: left;
        clear: both;
        border-bottom: 5px solid #91d95b;
        text-align: center;
        min-height: 0px;
    }

    div#content2 {
        padding-top: 80px;
        padding-bottom: 80px;
        background-color: #a7b5fa;
    }

    div#content3 {
        padding-bottom: 40px;
        background-color: #faeca7;
    }

    div#content4 {
        background-color: #eca7fa;
        border-bottom: 5px solid #91d95b;
        padding-bottom: 40px;
    }

    div#content2,
    div#content3,
    div#content4 {
        width: 100%;
        float: left;
        clear: both;
        text-align: center;
    }

    @media (min-width: 440px) {

        div#content2,
        div#content3,
        div#content4 {
            width: 100%;
            background-color: #FFFFFF;
            float: left;
            clear: both;
            text-align: center;
        }

        .swiper-container {
            width: 395px;
        }
    }

    @media (min-width: 771px) {

        div#content2,
        div#content3,
        div#content4 {
            width: 100%;
            background-color: #FFFFFF;
            float: left;
            clear: both;
            text-align: center;
        }

        .swiper-container {
            width: 690px;
        }
    }

    body div#content,
    body div#content2,
    body div#content3,
    body div#content4 {
        position: relative;
        z-index: 10;
    }

    body div#content:before,
    body div#content2:before,
    body div#content3:before,
    body div#content4:before {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }

    body div#banner:before {
        background-image: url(../images/csw-2022/background_middle.png);
        background-repeat: repeat;
        background-position: center;
        background-size: 25%;
    }

    body div#content:before {
        background-image: url(../images/csw-2022/background_middle.png), url(../images/csw-2022/background_bottom.png);
        background-repeat: repeat, repeat-x;
        background-position: center, center bottom;
    }

    body div#content2:before {
        background-color: #e8e6ca;
        background-image: url(../images/csw-2022/background2.png);
        background-repeat: repeat-x;
        background-position: center bottom;
    }

    body div#content3:before {
        //	background-image: url(../images/csp-2017/bg_csp_3.jpg);
        background-color: #ffffff;
    }

    body div#content4:before {
        background-image: url(../images/csw-2022/background.png);
        background-color: #f1f5e9;
    }

    a.safety-accordion-heading {
        position: relative;
    }

    a.safety-accordion-heading h2 {
        color: #fff;
        background-image: none;
        font-weight: 800;
        padding: 20px 30px;
        font-size: 2em;
        padding-right: 150px;
    }

    a.safety-accordion-heading div.safety-accordion-control {
        position: absolute;
        right: 0;
        margin-left: 0
    }
	
	.eb_container {
		display:flex;		
		flex-flow: row wrap;
		align-content: space-between;
		justify-content: space-between;
	}

    .eb_item {
		display: inline-flex !important;
		flex-direction: column;
		flex:1;
		flex-grow:0;
		width:100%;
		min-width:520px;
        margin: 20px 30px;
        box-shadow: 2px 2px 10px #9ca9bd;
        border-top: 0;
        background-color: #fff;
    }

    .eb_top {
        background-color: #165961;
        font-weight: bold !important;
		font-size: 1.2em;
		padding: 1.8em;
        text-align: center;
        vertical-align: middle; /*added for CSW 2024 */
        height: 80px; /* original: 10% */
    }

    .eb_tpc {
        display: flex;
        align-items: center;
        vertical-align: middle; /*added for CSW 2024 */
        height: 100%; /* original: 80% */
        justify-content: space-around;
        color: #fff;
		font-size: 1.2em;
    }

    .eb_btm {
        color: #3f4041;
        padding: 15px 20px;
		flex: 1;
    }

    .eb_footer {
        /*position: absolute;
        bottom: 0px;*/
        color: #3f4041;
        padding: 15px 20px;
        border-top: 0;
        /*height: 50%;*/
        width: 93%;
    }
	.eb_banner {
	}
	.eb_banner img {
		width:100%;
	}
    .eb_image {
        width: 100%;
        height: 190px;
    }

    .eb_btm>div {
        position: relative;
        padding-bottom: 10px;
        text-align: left;
    }

    .eb_icn {
        position: absolute;
        top: 0;
        left: 0;
    }

    .eb_txt {
        padding: 5px 0 0 60px;
    }

    .eb_tit {
        color: #146195;
        font-weight: bold;
    }

    .eb_footer>div.eb_btn {
        padding: 15px 0 30px 0;
        border-top: 1px solid #ebebeb;
        text-align: center;
    }
    .eb_btn>a{
        font-weight: bold;
        padding: 15px 60px;
        border-width: 2px;
        display: inline-block;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
    }
    .eb_footer > .active a{
        background-color: #3ad9ff;
		color: #063447;
    }
    .eb_footer > .inactive a{
        background-color: #bcbcbc;
		color: #666;
		pointer-events: none;
    }
	.logo-center {
		display: flex;
		justify-content: center;
	}
	.logo-center img{
		max-height:5.5em;
	}

    //                div.safety-accordion-risk > div {
    //                    width: 100% !important;
    //                }

    div.safety-accordion-content {
        padding: 0;
    }
	div.safety-accordion-background {
		background-color: #92c4db;
		width: 100% !important;
		text-align: center;
		position: relative;
	}
	.dot-line {
		border-top: 3px dotted #165961;
	}
    .csp-learning-content-myhead {
        font-size: 1.8em;
        color: #003a5b;
        font-weight: bold;
        padding: 15px 0;
        margin: 0 30px;
    }

    .chp_logo_list a {
        vertical-align: middle;
        //width: 190px;
        padding: 20px 49px;
        display: inline-block;
    }

    .chp_logo_list img {
        max-width: 100%;
    }

    .csp-learning-content-leaflets>div {
        display: inline-block;
        width: 230px;
        padding: 10px 29px;
    }

    .lb_top>img {
        max-width: 100%;
    }

    .lb_btm {
        background-color: #fff;
        padding: 10px 0;
    }

    .lb_btn {
        padding-top: 15px;
        text-align: center;
    }

    .lb_btn>a {
        background-color: #e72034;
        color: #fff;
        font-weight: bold;
        padding: 15px 60px;
        border-style: solid;
        border-width: 2px;
        display: inline-block;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
    }

    .lb_isc {
        text-align: center;
        padding: 20px 0;
    }

    .csp-learning-content-info>div {
        display: inline-block;
        width: 325px;
        padding: 10px 30px;
        text-align: center;
    }

    .igb_top img {
        max-height: 252px;
        max-width: 325px;
    }

    .igb_btm {
        color: #5C7CCB;
        padding: 10px 0;
        font-weight: bold;
    }

    .csp-learning-content-video>div {
        display: inline-block;
        width: 325px;
        padding: 10px 30px;
        text-align: center;
    }

    .csp-learning-content-video img {
        max-width: 100%;
    }

    .infographic-section {
        padding-top: 10px;
    }

    .infographic-section>div {
        display: inline-block;
        text-align: center;
    }

    div.infographic-item {
        width: 300px;
        text-align: center;
        margin: 30px;
        vertical-align: top;
        padding: 1px 1px;
        box-shadow: 2px 2px 10px #9ca9bd;
    }

    div.infographic-caption {
        text-align: left;
        min-height: 90px;
        background-color: #165961;
        margin-top: -3px;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.1em;
        padding: 10px;
    }

    .infographic-footer {
        /*position: absolute;
        bottom: 0px; */
        font-size: 0.75em;
    }

    .video-section>div {
        display: inline-block;
    }

    div.video-item {
        width: 300px;
        text-align: center;
        margin: 30px;
        vertical-align: top;
        padding: 1px 1px;
        box-shadow: 2px 2px 10px #9ca9bd;
        height: auto;
    }

    div.video-caption {
        text-align: left;
        min-height: 115px;
        background-color: #fff;
        margin-top: -3px;
        color: black;
        font-weight: bold;
        font-size: 1.1em;
        padding: 15px 15px 4px;
        line-height: 110%;
    }

    .others-section>div {
        display: inline-block;
        text-align: center;
        background-color:
    }

    div.others-item {
        width: 300px;
        text-align: center;
        margin: 30px;
        vertical-align: top;
        padding: 1px 1px;
        box-shadow: 2px 2px 10px #9ca9bd;
        border: 1px solid #fff;
        height: 50%;
        position: relative;
    }

    div.others-caption {
        text-align: left;
        min-height: 122px;
        background-color: #fff;
        margin-top: -3px;
        color: black;
        font-weight: bold;
        font-size: 1.1em;
        padding: 10px;
        max-height: 134px;
    }

    div.others-footer {
        bottom: 10px;
        position: absolute;
        display: flex;
        right: 10px;
    }

    /*****************************************/

    .cswLink .infographic-item img {
        width: 100% !important;
    }

    .cswLink .infographic-item {
        width: auto;
    }

    /*.leaflets_container img{
				width:100% !important;
			}*/

    .infographic-item img {
        width: 100%;
        max-height: 144px;
    }

    .video-item img:first-child {
        max-width: 300px;
        // width:100%;
    }

    .section_img {
        max-width: 120px;
    }

    .header {
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
    }

    .header .left {
        width: 100%;
        padding-right: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .header .right {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        padding: 0 2px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .swiper-container {
        width: 86%;
        height: 100%;
        background-color: #f1f5e9;
        padding: 0 50px 50px 50px;
    }

    .swiper-slide {
        text-align: center;
        font-size: 1.1em;
        background: #165961;
        color: white;
        padding: 0 0 20px;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide>a {
        color: #fff;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-button-next {
        background-image: url(../images/csw-2022/next.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center;
        width: 52px !important;
        height: 52px !important;
        top: 40% !important;
    }

    .swiper-button-next::after {
        display: none;
    }

    .swiper-button-prev {
        background-image: url(../images/csw-2022/prev.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center;
        width: 52px !important;
        height: 52px !important;
        top: 40% !important;
    }

    .swiper-button-prev::after {
        display: none;
    }

    .pEvents {
        display: block;
        position: relative;
        max-width: 1170px;
		width:100%;
    }

    .partner-logo {
        max-height: 50px
    }
	
	.useful-link-box {
		text-align:left!important;
		width: 100%;
		padding: 1rem 2rem 2rem;
	}
	.useful-link-box a{
		color:#000;
	}
	.useful-link-row {
		display: inline-flex;
		width:100%;
		padding: .5rem 0;
		align-items: center;
	}
	.useful-link-row img {
		max-height:40px;
		padding-right: .5rem;
	}