@charset "utf-8";

/* CSS Document */

body, html { background-color:#f3f3f3; color: #000000; font-size: 16px; line-height: 1.75rem; margin: 0px; padding: 0px; }
p, div, span, a { font-size: 14px; line-height: 1.75rem; }
a:link { color: #5eb6e4; text-decoration: none; }
a:visited { text-decoration: underline; color: #5eb6e4; }
a:hover { text-decoration: underline; color: #5eb6e4; }
a:active { text-decoration: underline; color: #5eb6e4; }
a { outline: none; border: none; }
.green { color: #639259; }
.brown { color: #5eb6e4; }


p { margin: 0px; padding: 0px 0px 10px 0px; }
.footer .organizer_row .t_team { float: none; width: 100%; }
.h10 { height: 10px; }
.h20 { height: 20px; }
.space { clear: both; line-height: 0px; height: 0px; width: 100%; }
.space5 { clear: both; line-height: 0px; height: 5px; width: 100%; }
.space10 { clear: both; line-height: 0px; height: 10px; width: 100%; }
.space15 { clear: both; line-height: 0px; height: 15px; width: 100%; }
.space20 { clear: both; line-height: 0px; height: 20px; width: 100%; }
.space25 { clear: both; line-height: 0px; height: 25px; width: 100%; }
.space30 { clear: both; line-height: 0px; height: 30px; width: 100%; }
.space35 { clear: both; line-height: 0px; height: 35px; width: 100%; }
.space40 { clear: both; line-height: 0px; height: 40px; width: 100%; }
.space45 { clear: both; line-height: 0px; height: 35px; width: 100%; }
.space50 { clear: both; line-height: 0px; height: 40px; width: 100%; }
.space55 { clear: both; line-height: 0px; height: 35px; width: 100%; }
.space60 { clear: both; line-height: 0px; height: 40px; width: 100%; }
.alert { color: #5eb6e4; font-weight: 600; }


#menu li a {
    text-decoration: none;
    padding: 14px 30px;
}


.hkelite img {
    width: 130px;
}

.text-primary{
    color: #0a498f !important;
}

.small { font-size:13px; }

/* wrapper */

.wrapper { min-width: 320px; margin: 0px; padding: 0px; /*overflow: auto;*/ }
.content_frame { margin: 0px; padding: 0px; width: 100%; /*overflow: auto;*/ }
.content_frame.fixed { position: fixed; }

/* header */

.header { position: relative; height: 116px; margin: 0px; padding: 0px; background:white; }
.header .logo {background-size: auto 40px; background-position: 16px 16px; width: 120px; height: 72px; background-color: transparent; background-repeat: no-repeat; cursor: pointer; }
.inner_frame { max-width: 1200px; width: 100%; margin: 0px auto; }
#menuToggle { display: block; position: absolute; background:#02aff0; top: 72px; left: 0px; z-index: 5000; -webkit-user-select: none; user-select: none; width: 100%; }
#menuToggle input { display: none; }
.right_frame { position: absolute; max-width: 1200px; width: 100%; top: -72px; margin: 0px auto; height: 0px; }
#right_menu { float: right; position: relative; right: 20px; top: 18px; }
#right_menu a { margin: 0px 10px; }
#right_menu a.language_btn { color: #000000; text-decoration: none; cursor: pointer; line-height: 36px; }
#right_menu a.language_btn:hover { color: #5eb6e4; }
#menu { position: relative; width: 100%; max-width:1160px; left: 0px; top:0px; margin:auto; padding: 0px; color: #ffffff; background: #02aff0; list-style-type: none; -webkit-font-smoothing: antialiased; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }
#menu:before { display: none; }
#menu li { border-top:5px solid transparent; border-bottom:5px solid transparent; float: left; font-size: 16px; width:14.28%; text-align:center; line-height:34px; padding: 0px 30px; margin-bottom: 0px; cursor: pointer; white-space: nowrap;  padding-left:0px; padding-right:0px;}

#menu li:hover, #menu li.active { background:yellow; }

#menu li:hover a, #menu li.active a {
    color: black !important;
    font-weight: 900;
}


@media handheld, screen and (max-width: 1024px) {
	#menu li { border-top:0px solid transparent; border-bottom:0px solid transparent;}
	#menu li:nth-child(1):hover, #menu li:nth-child(1).active { border-bottom:0px; border-left:5px solid #e82227; }
	#menu li:nth-child(2):hover, #menu li:nth-child(2).active { border-bottom:0px; border-left:5px solid #e82227; }
	#menu li:nth-child(3):hover, #menu li:nth-child(3).active { border-bottom:0px; border-left:5px solid #e82227; }
	#menu li:nth-child(4):hover, #menu li:nth-child(4).active { border-bottom:0px; border-left:5px solid #e82227; }
	#menu li:nth-child(5):hover, #menu li:nth-child(5).active { border-bottom:0px; border-left:5px solid #e82227; }	
	#menu li:nth-child(6):hover, #menu li:nth-child(6).active { border-bottom:0px; border-left:5px solid #e82227; }	
	#menu li:nth-child(7):hover, #menu li:nth-child(7).active { border-bottom:0px; border-left:5px solid #e82227; }	
	
}


/* popup */

.popup_overlay { display: none; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: fixed; z-index: 6000; }
.popup_frame { background-color: #ffffff; position: absolute; left: 50%; margin-left: -415px; width: 800px; min-height: 400px; z-index: -10; padding: 30px; top: 100%; margin-top: 30px; opacity: 0; transition: all 0.55s ease; -o-transition: all 0.55s ease; -ms-transition: all 0.55s ease; -moz-transition: all 0.55s ease; -webkit-transition: all 0.55s ease; }
.popup_frame.show { top: 0%; opacity: 1; z-index: 7000; }
.popup_close { cursor: pointer; position: absolute; top: 30px; right: 30px; width: 20px; height: 20px; }
.popup_close:before { content: ""; display: block; width: 25px; height: 3px; background: #5eb6e4; transform: rotate(45deg) translate(4px, 8px); -o-transform: rotate(45deg) translate(4px, 8px); -ms-transform: rotate(45deg) translate(4px, 8px); -moz-transform: rotate(45deg) translate(4px, 8px); -webkit-transform: rotate(45deg) translate(4px, 8px); }
.popup_close:after { content: ""; display: block; width: 25px; height: 3px; background: #5eb6e4; transform: rotate(-45deg) translate(-6px, 2px); -o-transform: rotate(-45deg) translate(-6px, 2px); -ms-transform: rotate(-45deg) translate(-6px, 2px); -moz-transform: rotate(-45deg) translate(-6px, 2px); -webkit-transform: rotate(-45deg) translate(-6px, 2px); }
.popup_title { font-size: 28px; line-height: 32px; color: #5eb6e4; width: 100%; border-bottom: 1px solid #5eb6e4; padding-bottom: 10px; margin-bottom: 10px; }
.app_row { margin-right: -10px; margin-left: -10px; display: inline-block; }
.app_group { /*display:flex;*/ float: left; padding-right: 10px; padding-left: 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; box-sizing: border-box; }
.app_icon { width: 100%; margin-bottom: 10px; }
.app_icon img { width: 100%; height: auto; }
.app_name { width: 100%; }

/* banner */

.banner { /*max-height:610px;*/ width: 100%; /*max-width:1160px;*/ margin:auto; }
.banner img { height: 100%; width: 100%; }
.banner_inner { position: relative; max-height: 200px; width: 100%; min-width:320px; /*height:22vw;*/ height:200px; overflow: hidden; display: flex!important; justify-content: center; align-items: center; background-image: url(../images/banner_inner.jpg); background-repeat:repeat-x; background-color:#bccfde; background-position: right 65%; background-size:cover; top: 1px; }
.banner_inner .inner_frame { position: absolute; height: 100%; }
.banner_inner img { height: 100%; width: 100%; }
.banner_inner .page_title { position: absolute;
    left: 20px;
    color: #ffffff;
    /* bottom: 30px; */
    top: 20px;
    text-shadow: 0px 0px 10px rgb(16 30 66); }


    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
        color: #5f5f5f;
    }


    #menu li:hover {
        background: yellow;
        color: black !important;
    }


/* content */

.step_counter { padding: 40px 50px 10px 50px; }
.counter_bg { background-color: #e5f0e3; display: table; padding: 30px 40px 10px 40px; margin-left: auto; margin-right: auto; }
.counter_row { font-size: 36px; line-height: 48px; padding-bottom: 10px; padding-bottom: 30px; display: block; text-align: center; }
.counter_row .brown, .counter_row .green { font-weight: 900; font-size: 50px; }
.counter_row span { font-size: 36px; line-height: 48px; font-weight: bold; margin-left: 10px; margin-right: 10px; }
.counter_row span.nowrap { white-space: nowrap; }
.counter_row img { height:48px; weight:auto; }
.video_row { padding: 20px 0px; }
.video_row iframe { width: 64vw; height: 48vw; max-width: 960px; max-height: 720px; }
.inner_content { padding: 30px 30px; display: block; }
p { margin-bottom: 10px; }
.intro, .intro .green, .intro .brown , .intro a { font-size:16px; }
.intro .green, .intro .brown, .intro a { font-weight:900; }
.step_section { background-color:#ffffff; padding: 30px 0px 0px 0px; }
.step_section h1 { text-align: center; font-size:36px; line-height: 56px; font-weight: 600; margin-bottom: 20px; }
.step_row { width: auto; /*margin-bottom: 20px;*/ margin-left: 30px; margin-right: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.step { float: left; padding: 0px 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; box-sizing: border-box; margin-bottom: 20px; }
.step_row1 { width: auto; margin-bottom: 2px; margin-left: 30px; margin-right: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.step_pic { text-align: center; margin-bottom: 25px; }
.step_pic img { width: 60%; max-width:120px; height:auto; }
.step_title { text-align: center; font-size:24px; margin-bottom: 15px; }
.step_text { font-size:16px; }
.btn_row { text-align: center; padding: 20px 5px 20px 5px; display: block; align-items: center; justify-content: center; clear: both; }
.btn_row_2 { text-align: center; padding: 20px 5px 20px 5px; display: table; align-items: center; justify-content: center; clear: both; margin-left: auto; margin-right: auto; }
.btn_row_2 .btn { float: none; width: inherit; }
.btn_line { padding: 0px 0px 15px 0px; display: flex; }
h3 { font-size: 24px; }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid #eaeaea; box-sizing: content-box; height: 0; overflow: visible; }

/* button */

.btn1 { text-align: center; background-color: #5eb6e4; color: #ffffff; border-radius: 18px; font-size: 16px; line-height: 20px; padding: 8px 20px; cursor: pointer; }
a.btn1 { text-decoration: none; }
a.btn1:link { color: #ffffff; text-decoration: none; }
a.btn1:hover { color: #ffffff; text-decoration: none; }
a.btn1:visited { color: #ffffff; text-decoration: none; }
.btn { float: none; background-color: #0a498f; color: #ffffff; border-radius:0px; font-size: 24px; line-height: 24px; padding: 15px 30px; cursor: pointer; }
.btn:hover { color: #ffffff; text-decoration: none; }
a.btn { text-decoration: none; }
a.btn:link { color: #ffffff; text-decoration: none; }
a.btn:hover { color: #ffffff; text-decoration: none; }
a.btn:visited { color: #ffffff; text-decoration: none; }
#menu li a { text-decoration: none; }
#menu li a:link { color: #ffffff; text-decoration: none; }
#menu li a:hover { color: #ffffff; text-decoration: none; }
#menu li a:visited { color: #ffffff; text-decoration: none; }
.btn_row .btn { float: none; display: block; margin-bottom: 20px; }
.coming_soon { text-align: center; height: 200px; font-size: 60px; line-height: 70px; color: #5eb6e4; display: flex; align-items: center; justify-content: center; }

/* table */

.align_center { display: flex; align-items: center; justify-content: center; }
.text_center { text-align: center; }
table { border-collapse: collapse; border-spacing: 0; border: 1px solid #eaeaea; }
table td { border: 1px solid #eaeaea; padding: 15px 10px; }

/*.intro_table tr > td:first-child { border-left:5px solid #5eb6e4; }*/

.intro_table tr>td:first-child { font-weight: 600; }
.intro_table tr>td[colspan="2"] { font-weight:normal; }
ul { margin: 0px; padding: 0px 0px 10px 25px; }
li { margin: 0px; padding: 0px 0px 5px 0px; }

/* procedure */

.team { float: left; width: 50%; margin-top: 15px; margin-bottom: 20px; }
.individual { float: left; width: 50%; margin-top: 15px; margin-bottom: 20px; }
.subtitle { font-size: 36px; line-height: 40px; color: #5eb6e4; margin-top: 10px; }
.procedure_content { float: none; width: 100%; }
.procedure_group { display: block; margin: 40px 0px 20px 0px; }
.procedure_step { display: flex; padding: 0px 0px 35px 0px; border-left: 2px solid #5eb6e4; margin-left: 20px; }
.procedure_step.rules { display: flex; padding: 0px 0px 35px 0px; border-left:0px; margin-left:0px; }

.procedure_step:last-child { border-left: 0px; padding-bottom: 0px; }
.procedure_content .procedure_num { position: relative; float: left; left: -21px; width: 41px; height: 41px; border-radius: 100%; background-color: #5eb6e4; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; }
.procedure_content .procedure_num { font-family: "Montserrat"; width: 41px; height: 41px; border-radius: 100%; background-color: #5eb6e4; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; }
.procedure_content .procedure_txt { float: left; width: calc(100vw - (100vw - 100%) - 70px); }
.procedure_step.rules .procedure_content .procedure_txt { float: left; width:100%; }
.procedure_content .procedure_txt .procedure_title { font-size: 20px; line-height: 26px; font-weight: bold; padding-top: 6px; padding-bottom: 6px; margin-bottom: 10px; }
.procedure_image { float: right; filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5)); }
.procedure_image img { width: 354px; height: 226px; }
.procedure_image img.desktop { display: block; }
.procedure_image img.mobile { display: none; }

.route .procedure_step { border:0px; }

/* method */

.method_row { margin-top: 50px; margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.method_row .subtitle { font-family: "Montserrat"; width: 41px; height: 41px; border-radius: 100%; background-color: #5eb6e4; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; font-weight: bold; text-align: center; position: absolute; left: 50%; margin-left: -21px; margin-top: 0px; top: 0px; }
.method { float: left; padding: 20px; float: left; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; margin-bottom: 30px; position: relative; }
.method .items { border-top: 3px solid #5eb6e4; background-color: #ffffff; padding: 40px 20px 20px 20px; height: calc(100vh - (100vh - 100%) - 60px); }
.method .item { margin-bottom: 15px; }
.method .item a { margin-bottom: 15px; }

/* use */

.agency_list { display: table; float: none; width: 100%; margin-right: 0%; margin-bottom: 50px; }
.agency_list h2 { margin-top: 30px; margin-bottom: 30px; }
.agency_table { width: 100%; }
.needy { display: table; float: left; width: 100%; margin-bottom: 50px; }
.needy h2 { margin-top: 30px; margin-bottom: 30px; }
.needy_table { width: 100%; margin-bottom: 20px; }

/* story */

.story_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.story { padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; }
.story .img { position: relative; background-color: #ffffff; height: 100%; }
.story img { width: 100%; height: auto; }
.story .layer { display: table; background-color: #ffffff; text-align: center; padding: 20px 25px 45px 25px; width: 100%; box-sizing: border-box; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.story .layer .content { display: table-cell; vertical-align: middle; }
.story .layer h3 { font-size: 1.94vw; line-height: 2.777vw; margin-top: 0px; margin-bottom: 10px; }
.story .layer .btn { float: none; }

@media (min-width: 1440px) { 
	.story .layer h3 { font-size: 28px; line-height: 40px; margin-top: 0px; }
}
@media handheld, screen and (max-width: 768px) { 
	.story { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }    
	.story .layer h3 { font-size: 24px; line-height: 36px; margin-top: 0px; }
}

/* carbon example */

.carbon_example.bg { background-color:#eeeeee; margin:0px; }
.carbon_example .story .img { background: none; }

/* carbon tasks */

.green_tasks { margin-top: 0px; margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.green_tasks .subtitle { font-family: "Montserrat"; padding: 0px 20px; height: 41px; border-radius: 50px; background-color: #639259; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; position: relative; width: fit-content; margin-left: auto; margin-right: auto; margin-top: 0px; top: 20px; }
.green_tasks .method { float: left; padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; margin-bottom: 0px; position: relative; margin-top: -30px; }
.green_tasks .method .items { border-top: 3px solid #639259; background-color: #e5f0e3; padding: 40px 20px 20px 20px; height: calc(100vh - (100vh - 100%) - 110px); }
.green_tasks .method .item { margin-bottom: 15px; }
.green_tasks .method .item a { margin-bottom: 15px; }

@media handheld, screen and (max-width: 768px) { 
	.green_tasks .method { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}

@media handheld, screen and (max-width: 480px) { 
	.green_tasks .method { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

/* tips */

.carbon_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.tips { padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; box-sizing: border-box; }
.tips .tips_title { font-size:22px; font-weight:bold; background-color:#639259; color:#ffffff; text-align:center; padding:10px; }
.tips .img { position: relative; background-color: #ffffff; height: calc(100% - 48px); }
.tips img { width: 100%; height: auto; }
.tips .layer { display: table; background-color: #ffffff; padding: 0px 20px 20px 20px; width: 100%; box-sizing: border-box; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.tips .layer .content { display: table-cell; vertical-align: middle; }

@media (min-width: 1440px) { 
	.tips .layer h3 { font-size: 28px; line-height: 40px; margin-top: 0px; }
}

@media handheld, screen and (max-width: 960px) { 
	.tips { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; margin-bottom: 0px; }
}

@media handheld, screen and (max-width: 480px) { 
	.tips { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }
}

/* category */

.category_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.category { padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 50%; box-sizing: border-box; }
.category .cat_title { font-size:22px; font-weight:bold; background-color:#5eb6e4; color:#ffffff; text-align:center; padding:10px; }
.category .block { position: relative; background-color: #ffffff; height: calc(100% - 48px); }
.category img { width: 100%; height: auto; }
.category .layer { display: table; background-color: #ffffff; padding: 20px 20px 20px 20px; width: 100%; box-sizing: border-box; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.category .layer .content { display: table-cell; vertical-align: middle; }

@media (min-width: 1440px) { 
	.category .layer h3 { font-size: 28px; line-height: 40px; margin-top: 0px; }
}

@media handheld, screen and (max-width: 960px) { 
	.category { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 100%; margin-bottom: 0px; }
}

@media handheld, screen and (max-width: 768px) { 
	.category { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }
}


/* download */

.download_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.download_row .subtitle {}
.download { float: left; padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; margin-bottom: 20px; }
.download .items { margin-top: 20px; background-color: #ffffff; padding: 20px; height: calc(100vh - (100vh - 100%) - 110px); }
.download .item { margin-bottom: 15px; }
.download .item a { margin-bottom: 15px; }

/* footer */

.footer .organizer img {
    max-height: 70px;
    width: auto;
    height: auto;
    max-width:100%;
}

.footer { background-color:#e6e6e6; }
.footer .organizer_row { display: block; clear: both; width: 100%; margin-bottom: 44px; }
.footer .organizer_row h3 { margin-bottom: 12px; }
.footer .organizer_row .mh { font-size: 12px; }
.footer .organizer_row .organizer { float: left; width:38%; }
.footer .organizer_row .organizer .mtr { float: left; margin-right: 6%; }
.footer .organizer_row .organizer .gsgb { float: right; width: 42.5%; margin-right: 0%; }
.footer .organizer_row .organizer img { height: auto; width: 100%; max-height:70px; }
.footer .organizer_row .supporter { float: right; width: 21%; }
.footer .organizer_row .supporter .boc { float: left; width: 90%; margin-right: 0%; }
.footer .organizer_row .supporter img { height: auto; width: 100%; }
.footer .organizer_row .chairman { float: left; width: 35%; font-size: 18px; }
.footer .organizer_row .co_chairman { float: left; width: 65%; font-size: 18px; }
.footer .organizer_row .co_chairman p { margin-bottom: 5px; }
.footer .organizer_row h4 { margin-top: 0; margin-bottom: 10px; }
.footer_remarks { text-align: center; margin-top: 10px; display: inline-block; font-size:13px; line-height:22px; }
.footer .contact_row { display: block; clear: both; width: 100%; padding-top: 10px; }
.footer .contact_row .address { float: left; }
.footer .contact_row .phone { float: left; }
.footer .contact_row .email { float: left; }
.footer .contact_row .social { float: right; }
.footer .social div {  float: none;
    margin-left: 10px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin-top: 20px;
    display: inline-block;}
.footer .social div img { width: 100%; height: 100%; }

.btn-primary:hover {
    color: #FFFFFF;
    background-color: #e82227 !important;
    border-color: #e82227 !important;
}

@media handheld, screen and (max-width: 1280px) { 
	.footer .contact_row .address { width: 50%; }    
	.footer .contact_row .phone { width: 25%; }    
	.footer .contact_row .email { width: 25%; }    
	.footer .contact_row .social { padding-top: 20px; float: none; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }
}

@media handheld, screen and (max-width: 1024px) { 
	.content_frame { overflow: hidden; }    
	.header { height: 72px; }    
	.banner_inner .page_title { left: 40px; }    
	.inner_content { padding: 25px 40px; }    
	.step_section { padding: 25px 0px 0px 0px; }
	
	/* hamburger menu */
    
	#menuToggle { display: block; position: absolute; background:transparent; top: 25px; left: inherit; right: 20px; z-index: 5000; -webkit-user-select: none; user-select: none; width: auto; }
    #menuToggle input { display: block; width: 40px; height: 30px; position: absolute; top: -5px; left: -5px; margin: 0px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; }
    #menuToggle .toggle_btn span { display: block; width: 30px; height: 4px; margin-bottom: 4px; position: relative; background: #5eb6e4; z-index: 1; transform-origin: 6px 6px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); opacity 0.55s ease; -o-transform-origin: 6px 6px; -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); opacity 0.55s ease; -ms-transform-origin: 6px 6px; -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); opacity 0.55s ease; -moz-transform-origin: 6px 6px; -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); opacity 0.55s ease; -webkit-transform-origin: 6px 6px; -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); opacity 0.55s ease; }
    #menuToggle .toggle_btn span:first-child { transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; }
    #menuToggle .toggle_btn span:nth-last-child(2) { transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; }
    #menuToggle input:checked~.toggle_btn span { opacity: 1; transform: rotate(45deg) translate(-12px, -8px); -o-transform: rotate(45deg) translate(-12px, -8px); -ms-transform: rotate(45deg) translate(-12px, -8px); -moz-transform: rotate(45deg) translate(-12px, -8px); -webkit-transform: rotate(45deg) translate(-12px, -8px); background: #5eb6e4; }
    #menuToggle input:checked~.toggle_btn span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); -o-transform: rotate(0deg) scale(0.2, 0.2); -ms-transform: rotate(0deg) scale(0.2, 0.2); -moz-transform: rotate(0deg) scale(0.2, 0.2); -webkit-transform: rotate(0deg) scale(0.2, 0.2); }
    #menuToggle input:checked~.toggle_btn span:nth-last-child(2) { transform: rotate(-45deg) translate(-6px, 10px); -o-transform: rotate(-45deg) translate(-6px, 10px); -ms-transform: rotate(-45deg) translate(-6px, 10px); -moz-transform: rotate(-45deg) translate(-6px, 10px); -webkit-transform: rotate(-45deg) translate(-6px, 10px); }
	.right_frame { background-color: #ffffff; position: relative; top: 20px; margin-left:0px; margin-right: -25px; /*margin-bottom: -30px;*/ padding: 0px 25px 30px 25px; height: inherit; width:250px; }
    #right_menu { float: none; position: relative; right: inherit; top: inherit; margin-left: -25px; margin-right: -25px; padding: 0px 20px 25px 25px; /*border-bottom: 5px solid #5eb6e4;*/ }
    #right_menu a { margin: 0px 0px 10px 0px; float: none; display: block; }
    #right_menu a.language_btn { padding-top: 10px; }
    #menu { position: absolute; left: -200px; top: 47px; margin: 0px; width: 250px; padding: 25px 0px 25px 0px; list-style-type: none; -webkit-font-smoothing: antialiased; display: block; transform-origin: 0% 0%; transform: translate(100%, 0px); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -o-transform-origin: 0% 0%; -o-transform: translate(100%, 0px); -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -ms-transform-origin: 0% 0%; -ms-transform: translate(100%, 0px); -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -moz-transform-origin: 0% 0%; -moz-transform: translate(100%, 0px); -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -webkit-transform-origin: 0% 0%; -webkit-transform: translate(100%, 0px); -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
    #menu:before { position: absolute; top: -14px; left: 198px; content: ""; display: block; width: 0px; height: 0px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #02aff0; }
	#menu li { float: none; padding: 0px 0px 25px 20px; margin-bottom: 15px; font-size: 16px; line-height: 22px; width: auto; height: 20px; background-repeat: no-repeat; background-position: left center; cursor: pointer; text-align: left; white-space: nowrap; border-left:5px solid transparent; }
    #menu li:last-child { margin-bottom: 0px; }
    #menuToggle input:checked~ul { transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
    .step { float: left; padding: 0px 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; box-sizing: border-box; }
}

@media handheld, screen and (max-width: 960px) { 
	.footer .organizer_row { display: block; clear: both; width: 100%; margin-bottom: 30px; }
    .footer .organizer_row h3 { display: block; width: 100%; text-align: center; margin-bottom: 20px; }
    .footer .organizer_row .organizer { float: none; display: table; width: 100%; max-width:420px; margin: 0px auto 10px auto; justify-content: center !important; }
    .footer .organizer_row .organizer .mtr { float: left; width: 44%; margin-right: 6.8%; text-align:center; }
    .footer .organizer_row .organizer .gsgb { float: left; width: 49.2%; margin-right: 0%; text-align:center; }
    .footer .organizer_row .supporter { float: none; display: table; width: 100%; max-width: 580px; margin: 0px auto 10px auto; }
    .footer .organizer_row .t_team { float: none; display: table; width: 100%; max-width: 580px; margin: 0px auto 10px auto; }
    .footer .organizer_row .supporter .boc { float: none; width: 44%; max-width: 255px; margin: 0px auto; }
    .footer .organizer_row .chairman { float: none; display: table; width: 100%; font-size: 18px; text-align: center; margin: 0px auto 10px auto; }
    .footer .organizer_row .chairman br { display: none; }
    .footer .organizer_row .co_chairman { float: none; display: table; width: 100%; font-size: 18px; text-align: center; margin: 0px auto 10px auto; }
    .footer .organizer_row .co_chairman p { margin-bottom: 5px; }
    .agency_list { float: none; width: 100%; margin-bottom: 30px; }
    .needy { float: none; width: 100%; margin-bottom: 30px; }
	
	/* popup */
    .popup_frame { width: 80%; margin-left: -43%; padding: 30px 3%; }
}

@media handheld, screen and (max-width: 960px) { 
	.counter_eq { display: block; float: none; }
}

@media handheld, screen and (max-width: 768px) {

	
	.banner_inner .page_title { top: 20px; bottom: inherit; }
    .step_counter { padding: 30px 30px 0px 30px; }
    .counter_row { font-size: 30px; line-height: 44px; }
    .counter_row span { font-size: 30px; line-height: 44px; }
    .counter_row img { height:44px; }
	.video_row iframe { width: 87.5vw; height: 65.625vw; max-width: 960px; max-height: 720px; }
    .inner_content { padding: 25px 30px; }
    .team { float: none; width: 100%; }
    .individual { float: none; width: 100%; }
	
	/* method */
    .method_row { margin-top: 50px; }
    .method { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
	
	/* download */
    .download { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }
}

@media handheld, screen and (max-width: 680px) {}

@media handheld, screen and (max-width: 640px) { 
	.coming_soon { font-size: 40px; line-height: 50px; }
	
	/* intro */
    .intro_table { border-top: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-bottom: 0px; }
    .intro_table tr { position: relative; display: flex; width: 100%; padding: 0px; vertical-align: top; flex-wrap: wrap; }
    .intro_table tr>td { border-left: 0px; border-right: 0px solid #eaeaea; }
    .intro_table tr>td:nth-child(2) { width: 43.5%; padding: 15px 3%; border-right: 1px solid #eaeaea; }
    .intro_table tr>td:nth-child(3) { width: 44%; padding: 15px 3%; border-right: 0px; }
    .intro_table tr>td:first-child { display: inherit !important; width: 96%; padding: 15px 2%; border: 0px; border-left: 5px solid #5eb6e4; }
    .intro_table tr>td[colspan="2"] { display: block !important; width: 95%; padding: 15px 2% 15px 3%; border-right: 0px; border-left: 0px; border-bottom: 1px solid #eaeaea;}
	
	/* method */
    .method_row { margin-top: 50px; }
    .method { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	
	/* popup */
    .popup_frame { width: 80%; margin-left: -45%; padding: 20px 5%; }
    .popup_close { top: 20px; right: 20px; }
    .popup_title { font-size: 24px; line-height: 28px; }
    .app_group { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; }
    .app_name { margin-bottom: 20px; }
    .app_group:nth-child(3n + 1) { clear: both; }
}

@media handheld, screen and (max-width: 480px) { 
	.header { height: 60px; }
    .header .logo { width: auto; height: 34px; background-size: auto 30px; max-height:34px !important;}
	#menuToggle { top: 20px; }
    #menu { top: 40px; }
    #menu:before { top: -10px; }
    .banner_inner { max-height: 150px; }
    .step_counter { padding: 25px 20px 0px 20px; }	
	.counter_bg { padding: 15px 20px 10px 20px; }
	.counter_row { font-size: 22px; line-height: 32px; }
	.counter_row .brown, .counter_row .green { font-size: 38px; line-height:44px; }	
    .counter_row span { font-size: 26px; line-height: 40px; }
	.counter_row img { height:40px; }
    .inner_content { padding: 20px 20px; }
    .step_section { padding: 20px 0px 0px 0px; }
    .step_section h1 { text-align: center; margin-top: 15px; margin-bottom: 10px; font-size: 36px; line-height: 42px; font-weight: 600; margin-bottom: 15px; }
    .step_row { margin-bottom: 10px; margin-left: 15px; margin-right: 15px; padding-bottom:30px; }
	.step { float: left; padding: 0px 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }
    .step_row1 { margin-bottom: 2px; margin-left: 15px; margin-right: 15px; }
    .step1 { padding: 0px 5px; }
    .step_title { font-size: 22px; margin-bottom: 15px; }
    .btn_row { padding: 15px 25px 0px 25px; }
    .donate_group { float: none; width: 100%; margin-right: 0%; }
}

@media handheld, screen and (max-width: 320px) { 

    .header .logo .img-fluid{ max-height: 32px !important;}
	.header { height: 48px; }
    .header .logo { width: auto; height: 34px; background-size: auto 30px; padding:10px; background-position:10px 10px; max-height:34px !important;}
    #menu { top: 33px; }
    #menu:before { top: -10px; }
    #menuToggle { top: 15px; right: 15px; }
    .step_counter { padding: 20px 20px 0px 20px; }
    .counter_row { font-size: 22px; line-height: 36px; }
    .counter_row span { font-size: 22px; line-height: 36px; }
	.counter_row img { height:36px; }
    .inner_content { padding: 15px 20px; }
    .step_section { padding: 15px 0px 0px 0px; }
    .step_section h1 { text-align: center; margin-top: 15px; margin-bottom: 10px; font-size: 36px; line-height: 42px; font-weight: 600; margin-bottom: 15px; }
    .step_title { font-size: 22px; margin-bottom: 15px; }
}

@media (min-width: 1440px) {
	.banner img { width: 100% !important; overflow: hidden; height: auto; /*flex-shrink: 0;*/ min-width: 100%; min-height: 100%; /*object-fit: cover;*/}
}
@media (min-width: 1920px) {
	.banner_inner { background-size:cover; background-position: right 64%; }
}

@media (max-width: 1440px) {
	/*.banner_inner { background-position: right bottom; }*/
	.banner_inner { background-size:cover; }
}
@media (max-width: 768px) {
	/*.banner_inner { background-position:16vw bottom; background-size: auto 30vw; }*/
	.banner_inner { background-size:auto 110%; background-position:right top;}
}
@media (max-width: 480px) {
	.banner_inner { background-position:right -40px top; background-size: auto 120%; }
	.banner_inner .page_title { top:15px; }
}
@media (max-width: 320px) {
	.banner_inner { background-position:right -30px top; background-size: auto 120%; }
	.banner_inner .page_title { top:12px; }
}


/* light gallery */
.lightgallery { width:100%; display: block; }
.lightgallery a:hover .media_thumb { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
.lightgallery a { display:inherit; overflow:hidden; position:relative; z-index: 9; width:100%; height:100%; }
.lightgallery a:before { display:block; content:""; position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0); -webkit-transition:background-color 0.15s ease 0s; -o-transition:background-color 0.15s ease 0s; transition:background-color 0.15s ease 0s; z-index:190; }
.lightgallery a:after { font:normal 24px/1 FontAwesome; color:#ffffff; content:"\f002"; width:24px; height:24px; line-height:24px; position:absolute; margin-left:-12px; margin-top:-12px; left:50%; top:50%; opacity:0; -webkit-transition:opacity 0.3s ease 0s; -o-transition:opacity 0.3s ease 0s; transition:opacity 0.3s ease 0s; z-index:200; }

.lightgallery a:hover:before { background-color:rgba(0, 0, 0, 0.4); }
.lightgallery a:hover:after { opacity:1; }

.lightgallery.image_hide a:hover:before { display:none; }
.lightgallery.image_hide a:hover:after { display:none; }

.lg-backdrop { z-index:12040!important; }
.lg-outer { z-index:12050!important; }

.lg-icon { font-family: feather!important; }
.lg-toolbar .lg-close:after { content: "\e8f6"; }
.lg-toolbar .lg-download:after { content: "\e864"; }
.lg-autoplay-button:after { content: "\e8ae"; }
.lg-show-autoplay .lg-autoplay-button:after { content: "\e8cb"; }
.lg-fullscreen:after { content: "\e908"; }
.lg-fullscreen-on .lg-fullscreen:after { content: "\e88d"; }
#lg-zoom-in:after { content: "\e8f9"; }
#lg-zoom-out:after { content: "\e8fa"; }
#lg-actual-size:after { content: "\e855"; }
.lg-outer #lg-share:after { content: "\e8c0"; }
.lg-outer .lg-dropdown .lg-icon { font-family: FontAwesome!important; }
.lg-outer #lg-share-facebook .lg-icon:after { content: "\f082"; }
.lg-outer #lg-share-twitter .lg-icon:after { content: "\f081"; }
.lg-outer #lg-share-googleplus .lg-icon:after { content: "\f0d4"; }
.lg-outer #lg-share-pinterest .lg-icon:after { content: "\f0d3"; }
.lg-actions .lg-prev:after { content: "\e843"; }
.lg-actions .lg-next:before { content: "\e844"; }
.lg-outer .lg-thumb-item { border: 3px solid #FFF; border:0; border-radius: 0px; opacity:0.5; -webkit-transition:opacity 0.3s ease 0s; -o-transition:opacity 0.3s ease 0s; transition:opacity 0.3s ease 0s; }
.lg-outer .lg-thumb-item:hover { /*border-color: #309bd4;*/ border:0; opacity:1; }
.lg-outer .lg-thumb-item.active { /*border-color: #76ce76;*/ border:0; opacity:1; }



ul#lightGallery { list-style: none; margin:0px; padding:0px; }
ul#lightGallery li { margin:0px; padding:0px; border:2px solid #ffffff; cursor:pointer; width:100%; height:180px; z-index: 9; display: flex!important; overflow: hidden; position: relative; justify-content: center; align-items: center; }
ul#lightGallery li:before { display:block; content:""; position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0); -webkit-transition:background-color 0.15s ease 0s; -o-transition:background-color 0.15s ease 0s; transition:background-color 0.15s ease 0s; z-index:190; }
ul#lightGallery li:after { font:normal 24px/1 FontAwesome; color:#ffffff; content:"\f002"; width:24px; height:24px; line-height:24px; position:absolute; margin-left:-12px; margin-top:-12px; left:50%; top:50%; opacity:0; -webkit-transition:opacity 0.3s ease 0s; -o-transition:opacity 0.3s ease 0s; transition:opacity 0.3s ease 0s; z-index:200; }
ul#lightGallery li:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
ul#lightGallery li img { -webkit-transition:-webkit-transform 0.15s ease 0s; -moz-transition:-moz-transform 0.15s ease 0s; -o-transition:-o-transform 0.15s ease 0s; transition:transform 0.15s ease 0s; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1); width: auto; height: auto; flex-shrink: 0; min-width: 100%; min-height: 100%; max-width:200px; object-fit: cover; }

ul#lightGallery li:hover:before { background-color:rgba(0, 0, 0, 0.4); }
ul#lightGallery li:hover:after { opacity:1; }

ul#lightGallery li a { width:100%; height:100%; }