@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Open+Sans+Condensed:300,300italic,700&subset=latin,vietnamese,latin-ext);

html {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
}
body{
    /*width: 100%;*/
    position: relative;
    min-height: 100%;
    height: 1px;
    font-family: 'Open Sans', sans-serif;
}
a {
    color: #D65206;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    text-decoration: underline;
}

/*header*/
.header {
    line-height: 30px;
    padding-right: 20px!important;
    z-index: 1000;
    font-size: 10pt;
    text-align: right;
    position: fixed;
    top: 0;
    right: 0;
    height: 100px;

    -moz-transition:right 500ms ease-out;
    -webkit-transition:right 500ms ease-out;
    -o-transition: right 500ms ease-out;
    transition: right 500ms ease-out;


}
.login input[type="text"], .login input[type="password"] {
    border: 1px solid #D65206;
    background: white;
    width: 150px;
    height: 30px;
    line-height: 30px;
    /*color: black!important;*/
    padding: 0 5px;
    float: right;
    margin: 0 0 0 10px;

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.login .button, .no_result .button{
    height: 30px;
    line-height: 30px;
    font-size: 11pt;
    padding: 0 5px;
    font-weight: bold;
    color: white!important;
    background: #D65206;
    cursor: pointer;
    text-align: center;
    float: right;
    margin-left: 10px;
    border:none;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.login .button:hover, .no_result .button:hover{
    background: black;
    color: white!important;
}
.login div {
    float: right;
    line-height: 18px;
    text-align: left;
}
.login div span {
    display: block;
    margin: 0;
}
.login div span:hover {
    cursor: pointer;
}
.login .avatar {
    border: 3px solid #D65206;
    border-radius: 5px;
    margin-right: 7px;
    text-align: center;
    max-height: 31px;
}
.login .avatar img {
    max-height: 31px;
}
.login .avatar img:hover {
    cursor: pointer;
}

/*Vertical layout*/
#main_content {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    -webkit-transition: width 0.8s ease-out;
    -moz-transition: width 0.8s ease-out;
    -o-transition: width 0.8s ease-out;
    transition: width 0.8s ease-out;
}
.main {
    position: relative;
}
.vertical-wrap {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /*background: #FBF8EC;*/
    position: relative;
    font-size: 10pt;
    overflow: hidden;
}
.left_m90{
    left: -90px!important;
}
.ver-main2-small {
    width: 265px!important
}
ul.title {
    position: absolute;
    top: 0px;
    left: 90px;
    text-transform: uppercase;
    color: white;
    font-size: 12pt;
}
.title li {
    float: left;
    display: inline-block;

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.title li:first-child {
    padding: 5px 7px 5px 60px;
    background: black;
}
.title li:last-child {
    padding: 5px 80px 5px 7px;
    background: #d65206;
    font-weight: 600;
}
.ver, .ver2 {
    margin-left: 60px;
    position: relative;

    -webkit-transition: width 0.8s ease-out;
    -moz-transition: width 0.8s ease-out;
    -o-transition: width 0.8s ease-out;
    transition: width 0.8s ease-out;
}
div.ver-main, div.ver-main2 {
    margin: auto;
    position: relative;
    width: 960px;
    height: 100%;
    top: 0;

    -webkit-transition: width 0.8s ease-out;
    -moz-transition: width 0.8s ease-out;
    -o-transition: width 0.8s ease-out;
    transition: width 0.8s ease-out;
}
div.ver-content, div.ver-content2 {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    height: 100%;
}
.align_top {
    vertical-align: top!important;
}
.main div.vertical-wrap:nth-child(odd) {
    background: url('../../img/layout2/bg1.jpg') 60% fixed no-repeat ;
}
.main div.vertical-wrap:nth-child(even) {
    background: white url('../../img/layout2/bg2.jpg') 60% repeat;
}

.result-num {
    padding: 10px;
    color: #d65206;
    font-size: 14pt;
    font-weight: 600;
}
.job-content {
    position: relative;
    height: 492px;
    overflow:hidden;
}
.tile_4 {
    position: relative;
    width: 450px;
    height: 144px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #cccccc;
    background: white;
    float: left;
    color: black!important;
    /*overflow: hidden;*/

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */

    -webkit-transition: border-color 0.5s ease, background 0.5s ease;
    -moz-transition: border-color 0.5s ease, background 0.5s ease;
    -o-transition: border-color 0.5s ease, background 0.5s ease;
    transition: border-color 0.5s ease, background 0.5s ease;
}
.tile_6 {
    position: relative;
    width: 240px;
    height: 144px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #cccccc;
    background: white;
    float: left;
    color: black!important;
    overflow: hidden;


    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    -webkit-transition: border-color 0.5s ease, background 0.5s ease;
    -moz-transition: border-color 0.5s ease, background 0.5s ease;
    -o-transition: border-color 0.5s ease, background 0.5s ease;
    transition: border-color 0.5s ease, background 0.5s ease;
}
.tile_4 h3 {
    line-height: 22px;
    height: 44px;
    color: #d65206;
    font-size: 14pt;
    font-weight: 400;
    margin-bottom: 10px;
}
.tile_6 h3 {
    font-size: 12pt;
    font-weight: 400;
    margin-bottom: 5px;
    color: black;
}
.tile_6 .brief-detail{display: none;}
.tile_6 .brief-detail2 span {display: block;}
.tile_4 .brief-detail2 {display:none;}
.tile_4 .expire {
    width: 70px;
    height: 70px;
    background: #d65206;
    color: white;
    float: left;
    margin-right: 10px;
    text-align: center;
    padding: 2px;

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.tile_4 .expired {
    width: 70px;
    height: 70px;
    background: #d65206;
    color: white;
    float: left;
    margin-right: 10px;
    text-align: center;
    padding: 2px 2px;
    text-transform: uppercase;
    font-weight: bold;
    word-wrap: break-word;
    display: table;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.tile_4 .expired span {
    display: table-cell;
    vertical-align: middle;
}
.tile_6 .expire {
    background: #d65206;
    color: white;
    float: right;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
    /*width: 115px;*/
    font-weight: 600;

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.tile_6 .expired {
    background: #d65206;
    color: white;
    float: right;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px;
    text-transform: uppercase;
    font-weight: bold;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.tile_6 .expire span {
    /*float: left!important;*/
    display: inline!important;
}
.tile_6 .expire span:first-child {
    margin: 9px 3px 9px 5px;
    /*float: left!important;*/
}
.tile_6 .expire span:nth-child(2){
    font-size: 22pt;
    /*float: left!important;*/
}
.tile_6 .expire span:last-child {
    margin: 9px 3px 9px 5px;
    /*float: left!important;*/
}
.tile_6 .expire .exp_jap {
    font-size: 18pt!important;
    margin: 0!important;
}
.tile_4 .expire span:first-child {
    min-height: 10pt;
    display: block;
}
.tile_4 .expire span:nth-child(2) {
    font-size: 30pt;
    font-weight: 600;
    margin: -8px 0 -9px 0;
    display: block;
}
.tile_4 .expire .exp_jap {
    font-size: 18pt!important;
    margin: 0!important;
}
.tile_4 .expire span {
    font-weight: 600;
}
.tile_4 table.brief-detail {
    float: left;
    max-height: 68px;
    overflow: hidden;
    max-width: 348px;
}
.tile_4 table.brief-detail tr td {
    padding: 1px 0;
}
.tile_4 table.brief-detail tr td:first-child {
    width: 100px;
}
.tile_4 table.brief-detail tr td:nth-child(2) {
    max-width: 248px!important;
    white-space: nowrap;
    overflow: hidden!important;
    text-overflow: ellipsis;
}
.tile_4:hover, .tile_4:active, .tile_4:focus {
    background: #E8A579;
    margin: 5px 5px;
    border: 6px solid #d65206;
    width: 460px;
    height: 154px
}
.tile_4:hover h3, .tile_4:active h3, .tile_4:focus h3,
.tile_6:hover h3, .tile_6:active h3, .tile_6:focus h3 {
    color: white;
}
.tile_6:hover, .tile_6:active, .tile_6:focus {
    background: #e8a579;
    margin: 5px;
    border: 6px solid #d65206;
    width: 250px;
    height: 154px;
}

.btn-bar .button, .btn-bar .button2 {
    height: 30px;
    line-height: 30px;
    font-size: 11pt;
    padding: 0 5px;
    font-weight: bold;
    color: white!important;
    background: #D65206;
    cursor: pointer;
    text-align: center;
    float: left;
    margin: 10px;

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.btn-bar .button:hover, .btn-bar .button2:hover, .job-header .button:hover{
    background: black;
    color: white!important;
}
.btn-bar .button2 {
    width: 30px;
    float: right;
    padding: 0!important;
    margin: 10px 0 20px 10px!important;
    text-align: center;
}
.btn-bar .lm {
    float: right!important;
    margin-right: 30px!important;

}
/* About HRnavi */
#about {
    position: relative;
}
.fade {
    opacity: 0;
}
.about-1 {
    background: white;
    border: 1px solid #cccccc;
    width: 410px;
    padding: 30px 60px 180px;
    color: black;
    position: relative;
    font-size: 12pt;
    left: 0;
    top: 80px;
    z-index: 200;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.about-2 {
    background: #d65206;
    width: 600px;
    min-height: 320px;
    padding: 30px 60px 60px 60px;
    color: white;
    position: absolute;
    top: 110px;
    left: 360px;
    font-size: 37px;
    font-family: "Open Sans Condensed", tahoma, san-serif;
    font-weight: 200;
    z-index: 300;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.about-3 {
    z-index: 400;
    background: black;
    width: 920px;
    padding: 60px;
    color: white;
    position: relative;
    top: -40px;
    left: 80px;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.about-3 div:first-child {
    width: 375px;
    float: left;
    margin-right: 30px;
    height: 220px;

}
.about-3 div:last-child {
    width: 375px;
    float: left;
}
.about-3 h3 {
    text-transform: uppercase;
    margin-bottom: 15px;
}
#team ul li {
    opacity: 0;
}
ul.filter {
    margin: 80px 0 0 0;
    background: rgba(0,0,0,0.2)!important;
    color: white;
    padding: 0 5px;
    width: auto;
}
ul.team-content {
    padding: 0!important;
    margin: 30px 0 80px 0;
    position: relative;
    height: 460px;
    overflow:hidden;
}
ul.filter li {
    float: left;
    margin: 0 15px 0 0;
    padding: 5px 0;
    font-weight: 600;
    text-transform: uppercase;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
ul.filter li:first-child {
    text-transform: none;
}
ul.filter li.current {
    padding: 5px;
    background: rgba(214,82,6,0.5);
    text-transform: uppercase;
}
ul.filter li a {
    color: white!important;
}
ul li.hidden {
    width: 0!important;
    height: 0!important;
    margin: 0!important;
    border: none!important;
    opacity: 0!important;
}
.tile_5 {
    position: relative;
    width: 230px;
    height: 143px;
    margin: 5px;
    border: 1px solid #cccccc;
    float: left;
    color: black!important;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */

    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.tile_5 img {
    width: 230px;
    height: 168px;
    position: absolute;
    top: 0;
    left:0;
    background: rgba(255,255,255,0.5);

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.tile_5:hover img, .tile_5:active img, .tile:focus img, .imghover {
    width: 270px!important;
    height: 198px!important;
    top: -25px!important;
    left: -18px!important;
    background: white!important;
}
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray alpha(opacity=50); /* IE6-9 */
    -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
.tile_5:hover img.grayscale, .tile_5:active img.grayscale, .tile_5:focus img.grayscale {
    filter: none!important;
    -webkit-filter: grayscale(0%)!important;
}
.tile_5 span {
    position: absolute;
    width: 100%;
    padding: 7px 7px;
    text-align: right;
    background: rgba(0,0,0,0.3);
    color: white;
    bottom: 0;
    left: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    font-size: 10pt;
    text-transform: uppercase;

    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}
.tile_5:hover span, .tile_5:active span, .tile_5:focus span, .spanhover {
    bottom: 0!important;
    background: rgba(214,82,6,0.7)!important;
}
svg {
    width: 400px!important;
    height: 330px!important;
}

/*arrow close icon*/
a.button3 {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 8pt;
    color: #D65206;
    text-transform: uppercase;
    font-weight: bold;
    background: url('../../img/layout2/arrow_right_30x30_white.png');
    width: 30px;
    height: 30px;
}

.nav_bar a.button3 {
    top: -20px!important;
}

.job-content, .details, .em-info, .apply, ul.team-content, .mCustomScrollbar {
    -ms-scroll-snap-points-y: snapInterval( 0px, 187px );
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-chaining: none;
}

/*no search result content*/
.ver-content .content {
    background: rgba(255,255,255,0.85);
    padding: 20px;
    width: 960px;
    position: relative;
    /*min-height: 400px;*/

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.top_info {
    border-bottom: 1px solid #9e9e9e;
    width: 100%;
    padding: 0!important;
    position: relative;
    min-height: 400px;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.top_info img {
    width: 350px;
    left: 50px;
    position: absolute;
    bottom: 0;
}
.bot_info {
    padding-top: 10px;
    padding-left: 50px;
}
.bot_info span, .bot_info a {
    margin: 20px;
    position: relative;
}
.bot_info .phone:before, .bot_info .email:before, .bot_info .fb:before {
    content: " ";
    width: 20px;
    height: 20px;
    background-size: 20px;
    margin-right: 5px;
    position: absolute;
    left: -22px;
}
.bot_info .email:before {
    background: url('../../img/layout2/icon_mail_17x16.png') no-repeat center top;
    top: 0px;
}
.bot_info .phone:before {
    background: url('../../img/layout2/icon_phone_18x16.png') no-repeat center top;
    top: 2px;
}
.bot_info .fb:before {
    background: url('../../img/layout2/icon_fb_19x20.png') no-repeat center top;
    top: -2px;
}
.no_result {
    float: right;
    display: inline;
    margin-right: 100px;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.cloud {
    width: 450px;
    padding: 10px;
    border: 2px solid #d65206;
    background: white;
    border-radius: 10px;
    margin-top: 50px;
    position: relative;
    text-align: justify;
}
#canvas {
    position: absolute;
    top: 50px;
    left: -10px;
}
.no_result input[type="text"] {
    border: 1px solid #d65206;
}
.no_result .inner2 {
    margin: 20px auto 20px;
    width: 300px;
    padding: 0 15px;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
@media (min-height: 1024px){
    ul.team-content {
        height: 612px;
    }
}

@media (max-width: 1280px){

    .tile_4 {
        width: 860px;
    }
    .tile_4:hover{
        width: 870px;
    }
    .about-1 {
        width: 380px;
        padding: 15px 30px 60px;
        color: black;
        position: relative;
        font-size: 12pt;
        left: 5px;
        top: 50px;

        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .about-2 {
        background: #d65206;
        width: 570px;
        padding: 15px 30px 55px 30px;
        color: white;
        position: absolute;
        top: 110px;
        left: 370px;
        font-size: 37px;
        font-family: "Open Sans Condensed",tahoma,san-serif;
        font-weight: 200;

        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .about-3 {
        background: black;
        width: 780px;
        padding: 30px;
        color: white;
        position: relative;
        top: 0px;
        left: 85px;

        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .about-3 div:first-child {
        width: 320px;
        float: left;
        margin-right: 20px;
        height: 280px;
    }
    .about-3 div:last-child {
        width: 320px;
        float: left;
    }
    .about-3 h3 {
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .tile_4 .job-info {
        width: 378px;
        overflow: hidden;
    }
    div.ver-main {
        width: 885px;
    }
    .job-header, .ver-content .content  {
        width: 875px;
    }
    .job-bar {
        width: 860px;
    }
    .job-bar ul li:first-child {
        width: 378px;
    }
    .no_result {
        margin-right: 15px;
    }

}

.moveDown{
    -webkit-transform: translateY(300px);
    -moz-transform: translateY(300px);
    transform: translateY(300px);

}
.moveUp {
    -webkit-animation: moveUp 1.2s ease forwards;
    -moz-animation: moveUp 1.2s ease forwards;
    animation: moveUp 1.2s ease forwards;
}

@-webkit-keyframes moveUp {
    to { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
    to { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
    to { transform: translateY(0); opacity: 1; }
}
.visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    /*-webkit-animation: none;*/
    /*-moz-animation: none;*/
    /*animation: none;*/
}