.section { width: 100%; text-align: center; position: relative; height: 100vh; overflow: hidden; background-size: cover; }
.section .section_content { margin: 0px auto; text-align: center; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0px; right: 0px; position: absolute; }
.section .background_scroll { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

#landing {  background: url('resources/index/background.jpg') center no-repeat;  min-height: 400px; font-family: 'OpenSans-Regular'; }
#landing .landing_scroll { background: url('resources/index/background.jpg') center no-repeat; background-size: cover; }
#landing .landing_content { max-width: 640px; color: #FFF; margin: 0 auto;}
#landing .landing_content .logo { margin-bottom: 20px; }
#landing .landing_content .slogan_1 { font-size: 30px; line-height: 1; margin-bottom: 20px; }
#landing .landing_content .slogan_2 { font-size: 45px; font-weight: bold; line-height: 1; letter-spacing: 1px; margin-bottom: 30px; }
#landing .landing_content .slogan_2 .first_word { font-size: 50px; }
#landing .landing_content .landing_icon_wrapper  { margin-bottom: 30px; }
#landing .landing_content .landing_icon_wrapper .landing_icon { margin: 0 20px; }
#landing .landing_content .button_talktous { text-align: center; width: 160px; height: 40px; color: #FFF !important; font-size: 13px; display: block; background: rgba(79, 45, 122 ,0.9); vertical-align: middle; line-height: 40px; position: relative; margin: 0 auto; }
#landing .landing_content .button_talktous:hover { background: rgba(79, 45, 122 ,0.7); } 

#aboutus { background: url('resources/about/background.jpg') center no-repeat; min-height: 400px; font-family: 'norwester'; }
#landing .aboutus_scroll { background: url('resources/about/background.jpg') center no-repeat; }
#aboutus .aboutus_content { height: 300px; width: 46%; background: rgba(255, 255, 255 ,0.9); min-width: 540px;}
#aboutus .aboutus_content .aboutus_text { width: 90%; margin: 0 auto; position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
#aboutus .aboutus_content .aboutus_text .aboutus_title_1 { color: #4F2D7A; line-height: 1; font-size: 24px; font-weight: bold; margin-bottom: 10px; display: none; }
#aboutus .aboutus_content .aboutus_text .aboutus_title_2 { color: #4F2D7A; line-height: 1; font-size: 28px; font-weight: bold; margin-bottom: 20px; display: none; }
#aboutus .aboutus_content .aboutus_text .aboutus_content_text { color: #353535; font-size: 16px; line-height: 160%; display: none; }

#showcase { height: auto; min-height: 100vh; font-family: 'Univers'; }
#landing .aboutus_scroll { background: #FFF; }
#showcase .showcase_content { width: 60%; position: relative; top: 0; transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); margin: 50px auto 80px; min-width: 565px;}
#showcase .title { color: #4F2D7A; line-height: 1; font-size: 28px; font-weight: bold; text-align: center; margin-bottom: 50px; }
#showcase .category_wrapper { text-align: center; margin-bottom: 30px; }
#showcase .category_wrapper .button_category { vertical-align: top; margin: 0 20px; }
#showcase .project_wrapper { position: relative; text-align: center; margin: 0 auto;}
#showcase .project_wrapper .project { width: 550px; height: 300px; float: left; overflow: hidden; margin: 0 7px 20px; position: relative; }
#showcase .project_wrapper .project .project_image { max-width: 550px; position: absolute; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0;}
#showcase .project_wrapper .project .detail_wrapper { position: absolute; bottom: -110px; width: 100%; height: 75px; background: rgba(255, 255, 255 ,0.8); text-align: left;}
#showcase .project_wrapper .project .detail_wrapper .type_logo { position: absolute; top: -30px; right: 50px; }
#showcase .project_wrapper .project .detail_wrapper .project_name { color: #4F2D7A; font-size: 15px; margin-top: 24px; margin-left: 10px;}
#showcase .project_wrapper .project .detail_wrapper .project_date { font-size: 13px; margin-left: 10px; }
#showcase .button_down { position: absolute; bottom: 50px; }

#talktous { background: url('resources/talktous/background.jpg') top center no-repeat; min-height: 800px; height: auto; overflow: hidden; font-family: 'Ubuntu-L'; }
#talktous .button_down { position: absolute; top: 50px; }
#landing .talktous_scroll { background: url('resources/talktous/background.jpg') center no-repeat; }
#talktous .talktous_content_wrapper { margin: 435px auto 0; width: 100%; text-align: center; position: relative; left: 0px; right: 0px; min-height: 500px; background: rgba(6, 1, 33 ,0.9); color: #FFFFFF; overflow: hidden;}
#talktous .talktous_content_wrapper .talktous_content { width: 60%; margin: 0 auto; overflow: hidden;}
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper { float: left; width: 500px; height: 350px; margin-top: 60px; text-align: left; margin-right: 80px; }
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper .title { border-bottom: 1px #FFF dashed; padding-bottom: 10px; }
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper form { margin-top: 20px; position: relative; }
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper .form_title { font-size: 15px; float: left; width: 160px; margin: 10px 0; }
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper .field { font-size: 15px; float: left; margin: 10px 0; border: 1px #FFF solid; background: transparent; color: #FFF; outline: none; width: 150px; font-family: 'Ubuntu-L'; }
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper .content_textarea { resize: none; font-size: 15px; border: 1px #FFF solid; background: transparent; color: #FFF; outline: none; width: 150px; height: 280px; position: absolute; top: 10px; left: 340px; font-family: 'Ubuntu-L'; }
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper .button_submit { text-align: center; width: 150px; height: 40px; color: #FFF !important; font-size: 13px; display: block; background: rgba(79, 45, 122 ,0.9); vertical-align: middle; line-height: 40px; position: relative; margin-top: 30px;}
#talktous .talktous_content_wrapper .talktous_content .talktous_wrapper .button_submit:hover { background: rgba(79, 45, 122 ,0.7); } 
#talktous .talktous_content_wrapper .talktous_content .contactus_wrapper { float: left; width: 500px; height: 350px; margin-top: 60px; text-align: left; position: relative; margin-bottom: 60px;}
#talktous .talktous_content_wrapper .talktous_content .contactus_wrapper .title { border-bottom: 1px #FFF dashed; padding-bottom: 10px; }
#talktous .talktous_content_wrapper .talktous_content .contactus_wrapper .contact_content { position: relative; margin-top: 30px; width: 165px; }
#talktous .talktous_content_wrapper .talktous_content .contactus_wrapper .contact_content .contact_title { margin: 10px 0; color: #6D6C71; font-size: 13px; }
#talktous .talktous_content_wrapper .talktous_content .contactus_wrapper .contact_content .contact_detail { margin: 0px 0; font-size: 13px; line-height: 180%; }
#talktous .talktous_content_wrapper .talktous_content .contactus_wrapper .map_wrapper { position: absolute; top: 60px; left: 200px; }
#talktous .talktous_content_wrapper .talktous_content .contactus_wrapper .map_wrapper iframe { height: 320px; }

.loading_warpper { position: fixed; width: 100%; height: 100vh; top: 0px; left: 0px; background: rgba(200, 200, 200 ,0.7); z-index: 5; }
.loading_warpper .loading_detail { position: absolute; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0px; right: 0px; margin: 0 auto; text-align: center; }
.loading_warpper .loading_detail .percent { color: #000; font-size: 20px; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); }


*::-webkit-input-placeholder {
    color: #FFF;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #FFF;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #FFF;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #FFF;
}

@media screen and (max-width: 1900px){
    .project_wrapper { width: 565px; }

}
@media screen and (max-width: 1830px){
    .talktous_content { width: 500px !important; }
    #talktous .talktous_content_wrapper { background: rgba(6, 1, 33, 1.0) !important; position: relative; margin-top: 650px;}
}
@media screen and (min-width: 641px){
    /*.dialog_height { height: 5000px !important; }*/
    .dialog_project { width: 70%; height: 100vh; }
    .dialog_project .button_dialog_close { position: absolute; top: 5%; right: -20px; }
    .dialog_project .image_wrapper { width: 75%; height: 90vh; overflow: auto; position: absolute; left: 0px; top: 5%; }
    .dialog_project .image_wrapper .image { text-align: right; position: relative;}
    .dialog_project .image_wrapper .image img { max-width: 100%;}
    .dialog_project .button_href { text-align: center; width: 60%; height: 30px; color: #FFF !important; font-size: 13px; display: block; background: rgba(79, 45, 122 ,0.9); vertical-align: middle; line-height: 30px; margin-top: 20px;}
    .dialog_project .button_href:hover { background: rgba(79, 45, 122 ,0.7); } 
    .dialog_project .project_detail { width: 17%; background: #FFF; border-top: 30.1px solid #2B114E; padding: 0 20px; overflow: hidden; position: absolute; left: 75%; top: 8%; font-family: 'Univers'; }
    .dialog_project .project_detail .title { border-bottom: 1px #000 dashed; padding-bottom: 20px; margin: 30px 0;}
    .dialog_project .project_detail .title .type_logo { width: 45px; float: left; margin-right: 20px; vertical-align: middle; }
    .dialog_project .project_detail .title .title_detail { float: left; vertical-align: middle; }
    .dialog_project .project_detail .title .title_detail .project_name { color: #000; font-size: 15px; margin-top: 7px; margin-left: 10px;}
    .dialog_project .project_detail .title .title_detail .project_date { font-size: 13px; margin-left: 10px; color: #6D6C71; }
    .dialog_project .project_detail .detail_title { color: #000; font-size: 15px; margin-top: 7px; }
    .dialog_project .project_detail .language_title { margin-top: 30px; }
    .dialog_project .project_detail .detail_text { font-size: 13px; color: #6D6C71; margin-top: 7px; }
    .dialog_project .project_detail .language_text { margin-bottom: 150px; }
}
@media screen and (max-width: 640px){
    /*.dialog_height { height: 5000px !important; }*/
    .dialog_project { width: 90%; height: 100vh; }
    .dialog_project .button_dialog_close { position: absolute; top: 10px; right: -20px; }
    .dialog_project .image_wrapper { width: 100%; height: 70vh; position: relative;}
    .dialog_project .image_wrapper .image { text-align: right; }
    .dialog_project .image_wrapper .image img { max-width: 100%; }
    .dialog_project .button_href { text-align: center; width: 200px; height: 40px; color: #FFF !important; font-size: 20px; display: block; background: rgba(79, 45, 122 ,0.9); vertical-align: middle; line-height: 40px; margin-top: 20px;}
    .dialog_project .button_href:hover { background: rgba(79, 45, 122 ,0.7); } 
    .dialog_project .project_detail { width: 100%; background: #FFF; border-top: 30.1px solid #2B114E; overflow: hidden; position: relative; margin-top: 8%; font-family: 'Univers'; height: 18vh; border-bottom: 2px #2B114E solid;}
    .dialog_project .project_detail .title { margin: 10px 0px 0px 10px; float: left; width: 46%; }
    .dialog_project .project_detail .title .type_logo { float: left; vertical-align: middle; }
    .dialog_project .project_detail .title .title_detail { float: left; vertical-align: middle; }
    .dialog_project .project_detail .title .title_detail .project_name { color: #000; font-size: 17px; margin-top: 18px; margin-left: 10px;}
    .dialog_project .project_detail .title .title_detail .project_date { font-size: 16px; margin-left: 10px; color: #6D6C71; }
    .dialog_project .project_detail .detail { margin: 10px 0 0 10px; float: left; width: 48%; }
    .dialog_project .project_detail .detail_title { color: #000; font-size: 18px; margin-top: 7px; }
    .dialog_project .project_detail .language_title { margin-top: 20px; }
    .dialog_project .project_detail .detail_text { font-size: 16px; color: #6D6C71; margin-top: 7px; }
    .dialog_project .project_detail .language_text { /* margin-bottom: 150px; */ }
}