img {
    max-width: 100%;
    display: block;
}

body {
    margin: 0;
    padding: 0;
    font-family: "OptimusPrinceps";
    overflow-x: hidden;
}



@font-face {
    font-family: OptimusPrinceps;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/NotoSansTC-Regular.otf");
}
@font-face {
    font-family: OptimusPrinceps_Black;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/NotoSansTC-Black.otf");
}
@font-face {
    font-family: OptimusPrinceps_Medium;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/NotoSansTC-Medium.otf");
}
@font-face {
    font-family: Noto-Light;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/NotoSansTC-Light.otf");
}
@font-face {
    font-family: Noto-Thin;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/NotoSansTC-Thin.otf");
}
@font-face {
    font-family: Noto-Bold;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/NotoSansTC-Bold.otf");
}
@font-face {
    font-family: ReemKufi;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/ReemKufi.ttf");
}
@font-face {
    font-family: ReemKufi-Bold;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/ReemKufi-Bold.ttf");
}
@font-face {
    font-family: ReemKufi-Medium;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/ReemKufi-Medium.ttf");
}
@font-face {
    font-family: ReemKufi-Regular;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/ReemKufi-Regular.ttf");
}
@font-face {
    font-family: ReemKufi-SemiBold;
    src: url("https://ddta6v30xl4y5.cloudfront.net/fonts/ReemKufi-SemiBold.ttf");
}

.home_animation_area {
    position: relative;
    background-color: lightpink;
    width: 100%;
    height: 100%;
}
.logo_temp {
    position: absolute;
    left: 0;
    top: 0;
    width: 30rem;
    height: auto;
}
.logo_1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 9rem;
    animation-name: logo1;
    animation-iteration-count: 1;
    animation-duration: 1.2s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
.logo_2 {
    position: absolute;
    left: 0;
    top: 10.5rem;
    width: 9rem;
    animation-name: logo2;
    animation-iteration-count: 1;
    animation-duration: 1.1s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
.logo_3 {
    position: absolute;
    left: 10.6rem;
    top: 0rem;
    width: 18.6rem;
    animation-name: logo3;
    animation-iteration-count: 1;
    animation-duration: 1.1s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
.logo_4 {
    position: absolute;
    left: 10.6rem;
    top: 10.5rem;
    width: 8.4rem;
    animation-name: logo4;
    animation-iteration-count: 1;
    animation-duration: 1.6s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
.logo_5 {
    position: absolute;
    left: 11.9rem;
    top: 11.9rem;
    width: 7.5rem;
    animation-name: logo5;
    animation-iteration-count: 1;
    animation-duration: 1.8s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
.logo_6 {
    position: absolute;
    left: 2rem;
    top: 21.4rem;
    width: 17.5rem;
    animation-name: logo6;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
.logo_7 {
    position: absolute;
    left: 21.3rem;
    top: 3.1rem;
    width:  7.9rem;
    animation-name:  logo7;
    animation-iteration-count: 1;
    animation-duration: 1.3s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
.logo_8 {
    position: absolute;
    left: 21.3rem;
    top: 21.3rem;
    width: 7.9rem;
    animation-name: logo8;
    animation-iteration-count: 1;
    animation-duration: 1.7s;
    animation-timing-function: ease;
    animation-delay: 2s;
}
@keyframes logo8 {
    0% {
        transform : translateY(-180px);
        transform: scale(1.2);
        transform: rotate(30deg);
    }
    25%{
        transform : translateX(210px);
        transform: scale(2);
        transform: rotate(90deg);
    }
    50% {
        transform : translateY(190px);
        transform: scale(1.6);
        transform: rotate(120deg);
    }
    75% {
        transform : translateX(0px);
        transform: scale(0.8);
        transform: rotate(180deg);
    }
    100% {
        transform : translateY(0px);
        transform: scale(1);
        transform: rotate(0);
    }
}
@keyframes logo1 {
    0% {
        transform : translateY(240px);
        transform: scale(0.7);
        transform: rotate(38deg);
    }
    30%{
        transform : translateX(-280px);
        transform: scale(0.4);
        transform: rotate(72deg);
    }
    60% {
        transform : translateY(-170px);
        transform: scale(0.9);
        transform: rotate(139deg);
    }
    80% {
        transform : translateX(120px);
        transform: scale(1.6);
        transform: rotate(219deg);
    }
    100% {
        transform : translateY(0px);
        transform: scale(1);
        transform: rotate(360deg);
    }
}
@keyframes logo2 {
    0% {
        transform : translateX(160px);
        transform: scale(1.3);
        transform: rotate(80deg);
    }
    25%{
        transform : translateY(480px);
        transform: scale(1.9);
        transform: rotate(122deg);
    }
    50% {
        transform : translateX(-160px);
        transform: scale(2.3);
        transform: rotate(192deg);
    }
    75% {
        transform : translateY(140px);
        transform: scale(1.4);
        transform: rotate(290deg);
    }
    100% {
        transform : translateX(0px);
        transform: scale(1);
        transform: rotate(360deg);
    }
}
@keyframes logo3 {
    0% {
        transform : translateY(180px);
        transform: scale(0.7);
        transform: rotate(99deg);
    }
    39%{
        transform : translateX(-200px);
        transform: scale(1.6);
        transform: rotate(199deg);
    }
    70% {
        transform : translateY(20px);
        transform: scale(0.9);
        transform: rotate(139deg);
    }
    85% {
        transform : translateX(120px);
        transform: scale(1.3);
        transform: rotate(219deg);
    }
    100% {
        transform : translateY(0px);
        transform: scale(1);
        transform: rotate(360deg);
    }
}
@keyframes logo4 {
    0% {
        transform : translateY(270px);
        transform: scale(0.7);
        transform: rotate(99deg);
    }
    12%{
        transform : translateX(-200px);
        transform: scale(1.6);
        transform: rotate(199deg);
    }
    40% {
        transform : translateY(-10px);
        transform: scale(1.9);
        transform: rotate(210deg);
    }
    75% {
        transform : translateX(220px);
        transform: scale(0.8);
        transform: rotate(219deg);
    }
    100% {
        transform : translateY(0px);
        transform: scale(1);
        transform: rotate(360deg);
    }
}
@keyframes logo5 {
    0% {
        transform : translateY(120px);
        transform: scale(0.9);
        transform: rotate(120deg);
    }
    22%{
        transform : translateX(200px);
        transform: scale(1.8);
        transform: rotate(180deg);
    }
    40% {
        transform : translateY(230px);
        transform: scale(0.7);
        transform: rotate(210deg);
    }
    75% {
        transform : translateX(-100px);
        transform: scale(0.8);
        transform: rotate(319deg);
    }
    100% {
        transform : translateY(0px);
        transform: scale(1);
        transform: rotate(360deg);
    }
}
@keyframes logo6 {
    0% {
        transform : translateY(190px);
        transform: scale(1.9);
        transform: rotate(20deg);
    }
    39%{
        transform : translateX(-100px);
        transform: scale(0.8);
        transform: rotate(138deg);
    }
    40% {
        transform : translateY(100px);
        transform: scale(1.3);
        transform: rotate(280deg);
    }
    75% {
        transform : translateX(210px);
        transform: scale(0.8);
        transform: rotate(339deg);
    }
    100% {
        transform : translateY(0px);
        transform: scale(1);
        transform: rotate(360deg);
    }
}
@keyframes logo7 {
    0% {
        transform : translateY(190px);
        transform: scale(1.9);
        transform: rotate(20deg);
        transform-origin: 80% 50%;
    }
    29%{
        transform : translateX(-100px);
        transform: scale(0.8);
        transform: rotate(138deg);
        transform-origin: 80% 50%;
    }
    50% {
        transform : translateY(100px);
        transform: scale(1.3);
        transform: rotate(280deg);
        transform-origin: 80% 50%;
    }
    85% {
        transform : translateX(210px);
        transform: scale(0.8);
        transform: rotate(339deg);
        transform-origin: 80% 50%;
    }
    100% {
        transform : translateY(0px);
        transform: scale(1);
        transform: rotate(360deg);
        transform-origin: 80% 50%;
    }
}
.openmenu{
    width:4.5rem;
    height:4.5rem;
    margin-top:2rem;
    margin-right:2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    border-color:#ffffff;
    border-style:solid;
    border-width:0px;
    border-radius: 50%;
    cursor: pointer;
}
@keyframes grow1 {
	0% {
        transform: rotate(0deg);
        background-color: black;
        width:75%;
        transform-origin: 54% 50%;
	}

	100% {
		margin-top:0.0rem;
        transform: rotate(-45deg);
        background-color: white;
        width:75%;
        transform-origin: 54% 50%;
	}
}
@keyframes grow2 {
	0% {
		margin-top:0.5rem;
        transform: rotate(0deg);
        background-color: black;
        width:75%;
        transform-origin: 54% 50%;
	}

	100% {
		margin-top:0.0rem;
        transform: rotate(45deg);
        background-color: white;
        width:75%;
        transform-origin: 54% 50%;
	}
}
@keyframes grow_reverse1 {
	0% {
        margin-top:0.0rem;
        transform: rotate(-45deg);
        background-color: white;
        width:75%;
	}

	100% {

        transform: rotate(0deg);
        background-color: black;
        width:75%;
	}
}
@keyframes grow_reverse2 {
	0% {
		margin-top:0.0rem;
        transform: rotate(45deg);
        background-color: white;
        width:75%;
	}

	100% {

        margin-top:0.5rem;
        transform: rotate(0deg);
        background-color: black;
        width:75%;
	}
}
@keyframes growCircle {
	0% {
        border-width:0px;
	}

	100% {
        border-width:0.1rem;
	}
}
@keyframes growCircle_reverse {
	0% {
        border-width:0.1rem;
	}

	100% {
        border-width:0px;
	}
}
.openmenu_line1{
    background-color: black;
    width:75%;
    height:0.2rem;
}
.openmenu_line2{
    background-color: black;
    width:75%;
    height:0.2rem;
    margin-top:0.5rem
}
.playshowmenuanimation_line1 {
	animation: grow1 0.5s 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.playshowmenuanimation_line2 {
	animation: grow2 0.5s 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.playhidemenuanimation_line1 {
	animation: grow_reverse1 0.5s 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.playhidemenuanimation_line2 {
	animation: grow_reverse2 0.5s 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.playshowmenuanimation_circle{
    animation: growCircle 0.5s 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.playhidemenuanimation_circle{
    animation: growCircle_reverse 0.5s 1;
}

#openmenu.off {
	animation-name: none;
}



.menu_image {
    position: fixed;
    top: 4rem;
    right: 3rem;
    cursor: pointer;
    z-index: 4;
}

.home_fixed_news {
    position: fixed;
    bottom: 4rem;
    left: 3rem;
    cursor: pointer;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.home_scrollDown {
    position: fixed;
    bottom: 4rem;
    right: 3rem;
    cursor: pointer;
    z-index: 2;
}
.home_logo {
    padding-top: 4rem;
    padding-left: 4rem;
    cursor: pointer;
}
.home_logo_image {
    width: 8rem;
    cursor: pointer;
}
.home_left_side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 4rem;
}
.home_left_side_bigTitle {
    align-self: flex-end;
    font-size: 2.5rem;
    font-weight: 800;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #004e59;
    line-height: 1.1;
    font-family: "OptimusPrinceps_Black";
}
.home_left_side_smallTitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: #3d4543;
    line-height: 2.1rem;
    margin-left: 2.4rem;
}
.home_left_side_smallTitle_1 {
    margin-top: 2rem;
}
.home_about_title {
    font-size: 5rem;
    font-weight: 500;
    margin-top: 4rem;
    color: #004e59;
    font-family: "ReemKufi-Bold";
}

.home_about_area {
    position: relative;
}
.home_about_content_left {
    background: #58a;
    background: linear-gradient(135deg, transparent 5rem, #004e59 0) top right,
        linear-gradient(-45deg, transparent 0, #004e59 0) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    height: 45rem;
}
.home_about_content_right {
    background: #58a;
    background: linear-gradient(135deg, transparent 0, #004e59 0) top left,
        linear-gradient(-135deg, transparent 0, #004e59 0) top right,
        linear-gradient(-45deg, transparent 5rem, #004e59 0) bottom right,
        linear-gradient(45deg, transparent 0, #004e59 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    height: 45rem;
    padding-top: 2rem;
}
.home_about_content {
    position: absolute;
    width: 100%;
    height: 45rem;
}
.home_about_image {
    margin-left: auto;
    margin-right: auto;
    padding-top: 8%;
    padding-bottom: 8%;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.home_about_content_right_1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 2rem;
    width: 70%;
    margin-top: 5rem;
}
.home_about_content_right_1_title {
    width: 6rem;
}
.home_about_content_right_1_content {
    color: #ffffff;
    font-size: 0.9rem;
    margin-left: 1rem;
    margin-right: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1.5rem;
}
.home_about_content_right_1_title_tai {
    width: 9rem;
}
.home_about_content_right_2 {
    background-color: #0c606b;
    width: 75%;
    height: 0.2rem;
    margin-top: 5rem;
    margin-bottom: 2rem;
}
.home_about_content_right_2_white {
    background-color: #ffffff;
    width: 6%;
    height: 0.2rem;
}

.home_about_content_viewmore_area {
    display: flex;
    flex-direction: row;
    margin-left: 60%;
    align-items: center;
    margin-top: 4rem;
    cursor: pointer;
}
.home_about_content_right_Viewmore {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-size: 0.4rem;
    color: #fff;
    line-height: 5rem;
    text-align: center;
    background: #00758d;
    font-family: "ReemKufi-Bold";
}
.home_about_content_right_Viewmore_arrow {
    width: 2.5rem;
    margin-left: -0.5rem;
}
.home_all_service_title {
    font-size: 2.5rem;
    line-height: 3rem;
}
.home_record_title {
    margin-top: 50rem;
    color: #3d4543;
    font-size: 3rem;
    text-align: center;
    letter-spacing: 0.1rem;
    font-family: "Noto-Light";
}
.home_record_description {
    margin-top: 5rem;
    color: #3d4543;
    font-size: 1.2rem;
    font-family: "Noto-Thin";
    letter-spacing: 0.1rem;
    line-height: 2.4rem;
}
.home_record_content {
    margin-top: 10rem;
    margin-bottom: 10rem;
}
.home_record_content_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home_record_content_1_amount_area {
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    color: #004e59;
    align-items: flex-end;
    text-decoration:none;
}
#home_record_content_1_amount, #home_record_content_2_amount, #home_record_content_3_amount {
    font-size: 4rem;
    font-family: "ReemKufi-Medium";
    color: #004e59;
}
.home_record_content_1_amount_unit {
    margin-bottom: 1.4rem;
    margin-left: 0.3rem;
    font-family: "Noto-Bold";
    font-size: 1.6rem;
    color: #004e59;
}
.home_record_content_1_amount_text {
    color: #3d4543;
    font-size: 0.8rem;
    margin-top: 2rem;
    font-family: "Noto-Bold";
    letter-spacing: 0.1rem;
}
.home_record_content_1_amount_line {
    background-color: #dadadb;
    width: 25%;
    height: 0.2rem;
    margin-top: 0.5rem;
}
.home_record_content_1_amount_line_green {
    background-color: #0c606b;
    width: 6%;
    height: 0.2rem;
}
.home_record_content_1_amount_plus {
    align-self: flex-start;
    font-family: "Noto-Bold";
    font-size: 2rem;
    margin-left: 0.3rem;
    color: #004e59;
}
.home_organization {
    background: #58a;
    background: linear-gradient(135deg, transparent 6rem, #7f8080 0) top left,
        linear-gradient(-135deg, transparent 0, #7f8080 0) top right,
        linear-gradient(-45deg, transparent 0, #7f8080 0) bottom right,
        linear-gradient(45deg, transparent 0, #7f8080 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    height: auto;
}
.home_organization_title {
    margin-top: 4rem;
}
.home_organization_image1 {
    width: 8rem;
}
.home_organization_image2 {
    width: 6rem;
    margin-top: -3rem;
}
.home_organization_image3 {
    width: 4.5rem;
    margin-top: -2rem;
}
.home_organization_image4 {
    width: 4rem;
    margin-top: -3rem;
}
.home_organization_des {
    margin-top: 1rem;
}
.home_organization_text {
    font-size: 0.8rem;
    font-family: "Noto-Bold";
    letter-spacing: 0.1rem;
}

.home_organization_image_area {
    position: relative;
    padding-left: 0;
    padding-right: 0;
}
.home_organization_image_area2 {
    padding-left: 0;
    padding-right: 0;
    margin-top: 2rem;
}
.home_organization_centercontent {
    position: absolute;
    width: 100%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 0.7rem;
}
.home_contact_line {
    background-color: #dadadb;
    width: 80%;
    margin-left: 10%;
    height: 0.2rem;
    margin-top: 7rem;
}
.home_contact_line_green {
    background-color: #0c606b;
    width: 3%;
    height: 0.2rem;
}
.home_contact_title {
    font-size: 5rem;
    margin-top: 2rem;
    color: #004e59;
    font-family: "ReemKufi-Bold";
}
.home_contact2 {
    width: 100%;
    margin-left: 0rem;
}
.contact_content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20rem;
}
.contact_content_left {
    width: 60%;
}
.contact_content_right {
    width: 50%;
}
.contact_footer {
    background-color: #3d4543;
    height: 20rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 7%;
    color: white;
    font-family: "ReemKufi-Regular";
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.about_bottom_area {
    height: 16rem;
    background-color: #004e59;
    color: white;
    display: flex;
    flex-direction: row;
    padding-left: 10rem;
    align-items: center;
    padding-top: 3rem;
    font-family: "ReemKufi-Regular";
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.menuPage {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 5;
}
.home_menu_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    object-fit: cover;
    object-position: right top;
}
.home_menu_content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.home_menu_x {
    width: 2rem;
    height: 2rem;
    align-self: flex-end;
    margin-top: 3rem;
    margin-right: 4rem;
    cursor: pointer;
}
.home_menu_top_option {
    color: white;
    align-self: flex-end;
    margin-top: 1.5rem;
    margin-right: 20%;
    font-family: "Noto-Bold";
    font-size: 1.2rem;
    letter-spacing: 0.3rem;
    line-height: 2rem;
}
.home_menu_bottom_option_left {
    font-family: "OptimusPrinceps";
    color: white;
}
.home_menu_bottom_option_left_lastline{
    font-family: "OptimusPrinceps";
    color: white;
    background-color: blue;
    width: 100%;
}
.home_menu_bottom_option {
    display: flex;
    flex-direction: row;
    margin-left: 15%;
    color: white;
}
.home_menu_bottom_option_image {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
}

.home_menu_bottom_text {
    margin-left: 15%;
    color: white;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-family: "ReemKufi-Bold";
}
#home_top_aboutus,
#home_top_service,
#home_top_news,
#home_top_housenews,
#home_top_showcase,
#home_top_city_showcase,
#home_top_ourteam,
#home_top_contact {
    cursor: pointer;
    font-weight: 700;
}
.about_leftbottom_linkarea_select {
    text-decoration: underline;
    font-family: "Noto-Bold";
    color: #53575a;
}
.about_leftbottom_linkarea_unselect {
    color: #004e59;
    font-family: "Noto-Thin";
}

.section_area {
    display: flex;
    flex-direction: row;
}
.main_area {
    flex-grow: 1;
    overflow-x: hidden;
    padding-left: 0rem;
    padding-right: 0rem;
}
.line_area {
    width: 1rem;
}
.line_content {
    width: 100%;
    height: 100%;

    background-color: #004e59;
}
.line_content_light {
    width: 100%;
    height: 25%;
    background-color: #00758d;
}
.home_left_side_smallTitle div {
    font-family: "ReemKufi-Bold";
    font-size: 1rem;
}
.home_bottom_contact_area {
    font-family: "ReemKufi-Regular";
}
.home_contact_bottom_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.landingpage{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: #004E59;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.ml12 {
    font-size: 2.3rem;
    text-transform: uppercase;
    letter-spacing: 0.0rem;
    font-family: "OptimusPrinceps_Black";
    color: white;
    margin-left: 2rem;
    margin-right: 2rem;
}
.ml13 {
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 1.0rem;
    font-family: "OptimusPrinceps_Black";
    color: white;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 2rem;
}

.ml12 .letter {
    display: inline-block;
    line-height: 1em;
}
.mousecircle{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 3;
}
.qrcode_image{
    width: 7rem;
    margin-left:2rem;
}
.home_menu_bottom_option_first{
    margin-top: 0rem;
}
@media only screen and (max-height: 900px){
    .home_menu_bottom_text{
        display: none;
    }
}
@media only screen and (max-height: 700px){
    .home_menu_bottom_option_first{
        margin-top: 2rem;
    }
    .home_menu_top_option {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        letter-spacing: 0.3rem;
        line-height: 1.3rem;
    }
    .home_menu_bottom_option_left{
        font-size: 0.7rem;
    }
}


@media screen and (min-width: 769px) and (max-width: 1430px) {
    .home_menu_bg {
        object-position: 50% 10%;
    }
}

@media only screen and (max-width: 768px) {
    .openmenu{
        width:4rem;
        height:4rem;
        margin-top:2rem;
        margin-right:2rem;
    }
    .home_animation_area{
        scale: 0.65;
        margin-top: 2rem;
    }
    .home_all_service_title {
        font-size: 1.3rem;
        line-height: 1rem;
    }

    @keyframes logo7 {
        0% {
            transform : translateY(90px);
            transform: scale(1.9);
            transform: rotate(20deg);
            transform-origin: 95% 50%;
        }
        29%{
            transform : translateX(-100px);
            transform: scale(0.8);
            transform: rotate(138deg);
            transform-origin: 95% 50%;
        }
        50% {
            transform : translateY(100px);
            transform: scale(1.3);
            transform: rotate(280deg);
            transform-origin: 95% 50%;
        }
        85% {
            transform : translateX(0px);
            transform: scale(0.8);
            transform: rotate(339deg);
            transform-origin: 95% 50%;
        }
        100% {
            transform : translateY(0px);
            transform: scale(1);
            transform: rotate(360deg);
            transform-origin: 95% 50%;
        }
    }
    .home_about_content_right_2 {
        width: 92%;
        height: 0.2rem;
        margin-left: 2%;
    }
    .home_fixed_news {
        left: 1.8rem;
    }
    .home_record_title {
        margin-top: 80rem;
        color: #3d4543;
        font-size: 1.4rem;
        text-align: center;
        margin-right: 1rem;
    }
    .home_organization_title {
        margin-top: 4rem;
        margin-left: 4rem;
    }

    .home_organization_image_area2 {
        margin-top: 0;
    }

    .home_left_side_smallTitle,
    .home_scrollDown,
    .about_scrollDown {
        display: none;
    }
    .home_logo {
        padding-left: 2rem;
    }
    .home_left_side_bigTitle {
        margin-top: 2rem;
        margin-right: 2rem;
    }
    .home_record_description {
        margin-left: 1rem;
        margin-right: 2rem;
    }
    .home_about_image {
        object-fit: cover;
        height: 31rem;
        padding-bottom: 0rem;
        padding-top: 3rem;
        width: 98%;
        margin-left: 0rem;
        padding-left: 0rem;
    }
    .home_about_content_left {
        height: 30rem;
        display: flex;
        flex-direction: row;
    }
    .home_about_title,
    .home_contact_title {
        font-size: 3rem;
        margin-left: 1rem;
    }
    .home_about_title{
        margin-top: 25rem;
    }
    .home_about_content_right_1 {
        margin-left: 1rem;
    }
    .home_about_content_right_1_title {
        width: 8rem;
    }
    .home_about_content_right_1_title_tai {
        width: 11rem;
    }
    .home_about_content_right_1_content {
        font-size: 1.1rem;
    }
    .home_record_content_1_mobile {
        margin-top: 5rem;
    }
    .home_organization {
        padding-right: 0rem;
    }
    .home_organization_image_mobile {
        padding-right: 0rem;
    }

    .menu_image {
        width: 3rem;
        right: 2rem;
    }
    .home_contact_line {
        width: 92%;
        margin-left: 6%;
        margin-right: 4%;
    }
    .contact_bottom_left {
        margin-top: -1rem;
        margin-bottom: 2rem;
    }
    .home_menu_bg {
        object-position: 50% 10%;
    }
    .home_menu_bottom_text {
        display: none;
    }
    .home_menu_x {
        margin-right: 2.7rem;
        margin-top: 3.3rem;
    }
    .about_bottom_area {
        display: flex;
        flex-direction: row;
        padding-left: 2rem;
        align-items: center;
        padding-top: 8rem;
    }
    .home_contact_bottom_right {
        margin-left: 4rem;
        margin-top: 2rem;
        width: 100%;
    }
    .home_contact_bottom_right_area {
        padding-left: 0rem;

    }
    .ml12 {
        margin-top: -2rem;
        font-size: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .ml13 {
        font-size: 1.2rem;
        letter-spacing: 0.3rem;
    }
    .qrcode_image{
        margin-top: 3rem;
        margin-left:4rem;
    }
    .contact_bottom_facebook{
        margin-left: 3.5rem;
        margin-top: 1rem;
    }
    .contact_bottom_line{
        margin-left: 3rem;
        margin-top: 1rem;
    }
}
@media screen and (max-width: 360px){
    .home_record_title {
        font-size: 1rem;

    }

}
@media only screen and (max-width: 768px) {
    .contact_bottom_facebook{
        margin-left: 4rem;
        margin-top: 2rem;
    }
    .contact_bottom_line{
        margin-top: 2rem;
    }

}