body {font-family: sans-serif; margin: 0px; padding: 0px;}
*, *:before, *:after {box-sizing: border-box;}

/* general */
.clear {clear: both;}
.alert_box {background-color: #ffffff; border: 1px solid #999999; border-radius: 3px; text-align: center; padding: 30px; font-size: 18px;}

/* z-index = 4 (ux overlay) */
.cropper_container {position: fixed; width: 100%; height: calc(100% - 54px); z-index: 4;}
.cropper_box {position: absolute; width: 100%; height: calc(100% - 54px); background: rgb(206, 206, 206); display: none;}
.cropper_footer {position: fixed; bottom: 0; width: 100%; padding: 10px; text-align: center; background: rgb(206, 206, 206); z-index: 4; display: none;}

.popup_overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.6; z-index: 4; display: none;}
.popup_content {margin: 0; position: fixed; width: 95%; max-width: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 80%; overflow-y: auto; z-index: 4; display: none;}

.loading_overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; opacity: 0.5; z-index: 4; display: none;}
.loading_content {margin: 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; display: none;}

/* z-index = 3 (navigations) */
.header_menu {position: fixed; top: 0px; right: 0px; width: 0px; height: 50px; cursor: pointer; font-size: 30px; padding: 10px 0px 0px 0px; transition-duration: 1s; color: #ffffff; overflow-x: hidden; z-index: 3;}

.sidebar {position: fixed; top: 60px; right: 0px; height: 100%; padding: 0px 0px 0px 0px; transition-duration: 1s; width: 0px; background: #111111; color: #ffffff; overflow-x: hidden; z-index: 3;}
.sidebar_category {font-size: 18px; line-height: 22px; font-weight: 400; padding: 16px 30px; cursor: pointer; text-align: right; white-space: nowrap; user-select: none; overflow: hidden;}
.sidebar_category:hover {color: #111111; background-color: #ffffff;}
.sidebar_category_active {color: #111111; background-color: #ffffff;}
.image_logo {width: 200px; height: 200px;}

/* z-index = 1 */
.scroll_top {background-color: #111111; width: 50px; height: 50px; text-align: center; border-radius: 10px; position: fixed; bottom: 150px; right: 70px; transition: background-color 0.3s, opacity 0.5s, visibility 0.5s; opacity: 0; visibility: hidden; z-index: 1; cursor: pointer; color: #ffffff; padding-top: 12px;}
.scroll_top.show {opacity: 1; visibility: visible;}
.element_overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: none; opacity: 0;}
.element_content {position: fixed; top: 0; left: 0; width: 100%; height: 100%;}

/* scrollbar */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}

.header {width: 100%; background-color: #111111; color: #ffffff;}
.header_logo_image {width: 50px; height: 50px;}
.header_top {width: 980px; height: 80px; margin: auto;}
.header_top_logo {float: left; width: 164px; height: 80px; padding: 16px 136px 0px 0px; transition-duration: 1s;}
.header_top_link {float: right; width: 150px; font-size: 16px; font-weight: 400; line-height: 80px; cursor: pointer; user-select: none; text-align: center;}
.header_top_link:hover {color: #111111; background-color: #ffffff; font-weight: 600;}
.header_bottom_wrapper_old {background: linear-gradient(0deg, #333333 40.4%, rgba(33, 33, 33, 0.4) 125.17%);}
.header_bottom_wrapper{background: url("images/background.jpg") no-repeat center center; background-size: cover; background-color: #111111;}
.header_bottom {width: 980px; padding-top: 48px; margin: auto; text-align: center; transition-duration: 1s;}
.header_bottom_title {font-style: normal; font-weight: 600; font-size: 64px; line-height: 76px; text-align: center; text-transform: uppercase;}
.header_bottom_subtitle {font-style: normal; font-weight: 800; font-size: 48px; line-height: 57px; text-align: center; text-transform: uppercase; color: #ffffff;}
.header_bottom_subtitle2 {width: 750px; margin: auto; font-style: normal; font-weight: 800; font-size: 48px; line-height: 57px; text-align: center; text-transform: uppercase; color: #ffffff;}
.header_bottom_detail {width: 620px; margin: auto; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; text-align: center;}
.header_bottom_detail2 {width: 620px; margin: auto; font-style: normal; font-weight: 500; font-size: 24px; line-height: 25px; text-align: center;}

.header_box {position: absolute; top: 80px; right: 0px; width: 100%; border: 2px solid #ffffff; display: none; cursor: pointer;}
.header_box_item {text-align: center; color: #ffffff; background: #111111;}
.header_box_item:hover {color: #111111; background-color: #ffffff;}

.rocket {transition-duration: 1s;}

.content_feature {background: url("images/background2.jpg") no-repeat center center; background-size: cover; background-color: #111111;}
.content_title {font-weight: 400; font-size: 48px; line-height: 57px; text-align: center; color: #dddddd; text-transform: uppercase;}
.content_boxes {width: 531px; margin: auto; text-align: center;}
.content_box1 {float: left; width: 260px; height: 260px; background: linear-gradient(180deg, rgba(33, 33, 33, 0.8) 0%, rgba(77, 77, 77, 0.6) 100%); border-radius: 12px; transition-duration: 1s;}
.content_box2 {float: left; width: 260px; height: 260px; background: linear-gradient(180deg, rgba(33, 33, 33, 0.8) 0%, rgba(77, 77, 77, 0.6) 100%); border-radius: 12px; transition-duration: 1s;}
.content_box3 {float: left; width: 260px; height: 260px; background: linear-gradient(0deg, rgba(33, 33, 33, 0.8) 0%, rgba(77, 77, 77, 0.6) 100%); border-radius: 12px; transition-duration: 1s;}
.content_box4 {float: left; width: 260px; height: 260px; background: linear-gradient(0deg, rgba(33, 33, 33, 0.8) 0%, rgba(77, 77, 77, 0.6) 100%); border-radius: 12px; transition-duration: 1s;}
.content_box_gap {float: left; width: 11px;}
.content_box_title {padding: 0px 15px 0px 14px; font-weight: 600; font-size: 16px; line-height: 19px; color: #ffffff; text-align: left;}
.content_box_detail {padding: 0px 15px 0px 14px; font-weight: 400; font-size: 12px; line-height: 15px; color: #ffffff; text-align: left;}
.content_box_footer {padding: 0px 15px 0px 14px; font-weight: 300; font-size: 10px; line-height: 12px; color: #ffffff; text-align: left;}

.product_title {font-weight: 600; font-size: 32px; line-height: 32px; color: #111111;}
.product_title2 {font-weight: 600; font-size: 16px; color: #111111;}
.product_detail {text-align: justify;}

.register_div {background: url("images/background3.jpg") no-repeat center center; background-size: cover; background-color: #111111;}
.register_update {text-align: center; color: #dddddd;}
.register_button {display: inline-block; padding: 0px 25px; line-height: 55px; border-radius: 7px; font-style: normal; font-weight: 600; font-size: 16px; color: #111111; background: #FD6262; border: 1px solid #FD6262; text-align: center; cursor: pointer; user-select: none;}
.register_button:hover {background-color: #111111; color: #ffffff; border: 1px solid #dddddd; transition: 0.3s;}
.register_textbox {padding: 12px 16px; width: 486px; height: 48px; font-weight: 600; font-size: 16px; color: #111111; background: #ffffff; border: 2px solid #dddddd; box-shadow: 0px 1px 2px rgba(50, 43, 95, 0.08); border-radius: 12px;}
.register_success_box {width: 600px; height: 400px; background: #F6F3FC; border-radius: 12px; text-align: center; color: #111111;}
.register_success_title {font-size: 24px; font-weight: 800; line-height: 29px; text-align: center; padding: 0px 60px; text-transform: uppercase;}
.register_success_message {font-size: 16px; font-weight: 400; line-height: 20px; text-align: center; padding: 0px 60px;}

/* types of projects */
.project_div {background: url("images/background4.jpg") no-repeat; background-size: cover; background-color: #111111;}
.partner_message {width: 676px; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; text-align: center; color: #292929; margin: auto;}
.project_row {overflow: auto; height: 250px; width: 100%; white-space: nowrap;}
.project_box {display: inline-block; padding: 0px 10px; width: 200px; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; text-align: center; color: #999999;}
.project_box img {max-height: 116px;}
.project_line {width: 100%; border-bottom: 3px solid #999999; margin: auto;}

.footer {padding: 5px 0px; background: #111111; text-align: center; font-style: normal; font-weight: 400; font-size: 14px; color: #ffffff; transition-duration: 1s;}
.footer::-webkit-scrollbar { display: none;}

.footer_copyright {padding: 10px 32px 0px 0px; display: inline-block;}
.footer_link_gap {display: inline-block; padding: 10px 6px;}
.footer_link {display: inline-block; padding: 10px 10px; user-select: none; cursor: pointer;}
.footer_link:hover {background-color: #ffffff; color: #282828;}

.invite_heading {font-style: normal; font-weight: 800; font-size: 32px; line-height: 38px; text-align: center; text-transform: uppercase; color: #dddddd;}
.invite_fieldname {font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; color: #dddddd;}
.invite_detail {font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #dddddd;}
.invite_form {width: 90%; max-width: 500px; margin: auto; padding: 0px 7px;}
.invite_textbox {width: 100%; padding: 12px 16px; height: 48px; background: #ffffff; border: 2px solid #dddddd; box-shadow: 0px 1px 2px rgba(50, 43, 95, 0.08); border-radius: 4px; font-style: normal; font-weight: 600; font-size: 16px; line-height: 24px; color: #333333; outline: 0;}
.invite_password_textbox {width: 100%; padding: 12px 16px 12px 40px; height: 48px; background: #ffffff; border: 2px solid #dddddd; box-shadow: 0px 1px 2px rgba(50, 43, 95, 0.08); border-radius: 4px; font-style: normal; font-weight: 600; font-size: 16px; line-height: 24px; color: #333333; outline: 0;}
.invite_textarea_wrapper {padding: 12px 0px; width: 90%; max-width: 720px; margin: auto; background: #ffffff; border: 2px solid #FF5631; box-shadow: 0px 1px 2px rgba(50, 43, 95, 0.08); border-radius: 12px;}
.invite_textarea {padding: 0px 8px 0px 16px; width: 100%; height: 351px; background: #ffffff; color: #000000; border: 0px; resize: none; outline: 0; overflow-y: auto; text-align: left;}
.invite_select_file {float: right; font-style: normal; font-weight: 600; font-size: 16px; line-height: 19px; color: #dddddd; padding: 5px 20px; border: 1px solid #dddddd; border-radius: 15px; transition: 0.3s; cursor: pointer;}
.invite_select_file:hover {background-color: #dddddd; color: #333333; transition: 0.3s;}
.invite_error_message {color: #FF5631; display: none;}

/* product */
.product_div {width: 90%; max-width: 980px; margin: auto;}
.listing_table {width: 100%; font-size: 16px; color: #dddddd; border: 1px solid #ddd;}
.listing_table th {text-align: left; padding: 20px 20px; user-select: none;}
.listing_table td {padding: 20px 20px;}

/* checkbox */
.checkbox {display: block; position: relative; cursor: pointer; margin-top: -10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkbox input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #fff; border: 2px solid #dddddd; border-radius: 4px;}
.checkbox:hover input ~ .checkmark {background-color: #F4F6F9;}
.checkbox input:checked ~ .checkmark {background-color: #F4F6F9;}
.checkmark:after {content: ""; position: absolute; display: none;}
.checkbox input:checked ~ .checkmark:after {display: block;}
.checkbox .checkmark:after {left: 7px; top: 1px; width: 8px; height: 18px; border: solid #dddddd; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* checkbox */
.container {display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 48px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border: 1px solid #dddddd;}
.container:hover input ~ .checkmark {background-color: #ccc;}
.container input:checked ~ .checkmark {background-color: #111111;}
.checkmark:after {content: ""; position: absolute; display: none;}
.container input:checked ~ .checkmark:after {display: block;}
.container .checkmark:after {left: 8px; top: 1px; width: 9px; height: 19px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* select */
.select {width: 100%; height: 48px; padding: 12px 16px; background: #ffffff; border: 2px solid #dddddd; border-radius: 4px; cursor: pointer; user-select: none;}
.select_div {position: absolute; border: 2px solid #dddddd; box-shadow: 0px 1px 2px rgba(50, 43, 95, 0.08); border-radius: 0px 0px 4px 4px; background-color: #ffffff; width: 100%; height: 200px; border-top: 0px; top: -4px; left: 0px; overflow-y: auto; z-index: 1; display: none;}
.select_box {background-color: #ffffff; color: #dddddd; padding: 12px 16px; cursor: pointer; user-select: none;}
.select_box:hover {background-color: #111111; color: #ffffff;}

/* textbox */
.textbox {width: 100%; padding: 12px 16px; height: 48px; background: #ffffff; border: 2px solid #dddddd; box-shadow: 0px 1px 2px rgba(50, 43, 95, 0.08); border-radius: 4px; font-style: normal; font-weight: 600; font-size: 16px; line-height: 24px; color: #111111; outline: 0; user-select: none;}
.link {color: #F7DC6F;}
.font_bold {font-size: 16px; font-weight: 600; line-height: 20px;}
.font_error {color: #E56B63; display: none;}

/* owl carousel */
.owl1 {width: 100%;}
.owl1_box {width: 100%;}
.owl1_box img {width: 100%;}

.google_map {width: 900px; max-width: 100%; height: 500px;}
.tab_left {float: left; width: 70px;}
.tab_right {float: left; width: calc(100% - 70px);}

@media(max-width: 1000px)
{
	.header_top_logo {display: none; transition-duration: 1s;}
	.header_top {width: 700px; transition-duration: 1s;}
	.header_bottom {width: 700px; transition-duration: 1s;}
	.header_bottom_subtitle {width: 420px; margin: auto; transition-duration: 1s;}
	.header_top_logo {width: 52px; padding: 24px 20px 0px 0px; transition-duration: 1s;}
	.scroll_top {right: 30px; transition-duration: 1s;}
	.footer_copyright {display: block;}
	.header_bottom_subtitle2 {max-width: 90%; transition-duration: 1s;}
}

@media(max-width: 700px)
{
	.header {transition-duration: 1s;}
	.header_top {position: fixed; top: 0px; background: #111111; height: 60px; transition-duration: 1s;}
	.header_top_logo {display: block; width: 187px; height: 60px; padding: 6px 100px 0px 6px; transition-duration: 1s;}
	.header_menu {width: 187px; padding: 10px 15px 0px 140px; transition-duration: 1s;}
	.header_bottom {width: 100%; padding-top: 100px; transition-duration: 1s;}
	.header_bottom_title {font-size: 60px; transition-duration: 1s;}
	.header_bottom_detail {width: 100%; padding: 0px 15px; transition-duration: 1s;}
	.header_bottom_detail2 {width: 100%; padding: 0px 15px; transition-duration: 1s; font-size: 20px;}
	.header_top_link {transition-duration: 1s; display: none;}
	.header_top_link2 {transition-duration: 1s; display: none;}
	.scroll_top {display: none; transition-duration: 1s;}
	.partner_message {width: 100%; padding: 0px 15px; transition-duration: 1s;}
	.content_title {font-size: 34px;}

	.content_boxes {width: 260px; transition-duration: 1s;}
	.content_box1 {display: block; transition-duration: 1s;}
	.content_box2 {display: block; transition-duration: 1s;}
	.content_box3 {display: block; transition-duration: 1s;}
	.content_box4 {display: block; transition-duration: 1s;}
	.content_box_gap {display: block; width: 260px; height: 11px; transition-duration: 1s;}

	.register_success_box {width: 90%; margin: auto;}
	.register_textbox {width: 400px; transition-duration: 1s;}

    .sidebar {width: 0px; transition-duration: 0.5s;}
    .sidebar.active {width: 100%; transition-duration: 0.3s;}

	.rocket {width: 450px; transition-duration: 1s;}
	.header_bottom_subtitle2 {font-size: 36px; transition-duration: 1s;}
}

@media(max-width: 450px)
{
	.header_bottom_subtitle {width: 375px; max-width: 90%; font-size: 40px;}
	.register_textbox {width: 90%; transition-duration: 1s;}

	.footer_copyright {padding: 10px 0px;}
	.footer_link_gap {padding: 10px 2px;}
	.footer_link {padding: 10px 3px;}

	.rocket {width: 90%; transition-duration: 1s;}
}