@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1030px) {
    
    p{ font-size:14px; line-height:18px; }
    .btn {
            font-size: 18px;
            padding-top: 15px;
            padding-bottom: 15px;
    }
    #banner-content {
            //min-height: 566px;
            height: auto !important;
            width: 100%;
    }
    #main-gallery .title{ font-size:32px; font-weight: bold;}
    #home {width:100%;}
    #home .items .captions h2 {
            font-size: 70px;
    }
    .wrap-wide {
            width: auto;
            margin-left: 15px;
            margin-right: 15px;
    }
    .content-wording .tagline {
            font-size: 32px;
            line-height: 38px;
    }
    #client ul li {
            width: 33.33%;
    }
    .service .title{ font-size:32px; }
    .service .wrap, .gallery .wrap {
            width: auto;
            margin-left:15px;
            margin-right:15px;
    }
    #banner-content .captions h2 {
            font-size: 70px;
            line-height: 60px;
    }
    #banner-content .captions {
            width: auto !important;
    }

    section#pre-productions, section#reporting {
            background-size: 50%;
    }
    .view-column.services div {
            padding-top: 30px;
    }
    .view-column.services {
            min-height: inherit;
    }
    .main-gallery li .hover.with-text .wrap-text .main-cap {
            font-size: 23px;
            line-height: 25px;
    }
    .main-gallery li .hover.with-text .wrap-text .img, .list-gallery.main_menu li .hover .img {
            width: 50px;
            height: 50px;
    }
    .main-gallery li .hover.with-text .wrap-text {
            height: 205px;
    }
    .main-gallery li .hover.with-text .wrap-text .name {
            font-size: 16px;
    }
    #banner-video {
            //height: auto;
            //max-height: 323px;
    }
    #banner-video video {
            width: 100%;
            height: 100%;
            //margin-top: -70px;
    }
    #banner-video .cap_video {
            font-size: 80px;
            height: 105px;
    }
    .main-gallery li .company-logo {
            width: 200px;
    }
    .list-gallery li .company-logo {
            width: 150px;
            height: 55px;
    }
    .home-info .main-title {
            font-size: 32px;
            line-height: 34px;
    }
    .icon-list {
            width: auto;
            max-width: 738px;
    }
    .icon-list li {
            width: 100px;
            margin-right: 59px;
    }
    .icon-list li div {
            width: 100px;
            height: 100px;
            background-size: 90px 90px;
    }
    .icon-list li:after {width: 100px; height: 100px;}
    
    .box-getstart{ text-align:center; }
    .box-getstart .btn{ float:none; margin-top:20px; }
    .box-getstart p{ line-height:27px; }
    .view-column.services .head{ font-size:32px; line-height:32px; }
    .btn.sort{ font-size:12px; }
    #blog-detail .title h1{ font-size: 32px; }
    #blog-detail .service .wrap{ width: auto; margin-right: 15px; margin-left: 15px; height: auto; }
    #blog-detail .other-title{ font-size: 24px; line-height: 25px; }
    #contact .address .address-tabs div{ display: block; float: left; height: 38px;}
    #contact .address .address-tabs div:nth-child(1){ width: 100%; }
    #contact .address .address-tabs div img{ width: 30px; }
    #contact .address .address-tabs div.logo img {width:90px;}
    #contact .address .address-tabs div span{ font-size: 14px; }
    #contact .address .address-tabs div:nth-child(3){ width: 165px; }
    #contact .address .address-tabs div:nth-child(4){ width: 175px; }
    #contact .address .address-tabs div:nth-child(5){ width: 70px; }
    
    
    
    /* css add 06-04-2015 by andrisam  
    ==================================================================================================================================
    ================================================================================================================================== */    
    header {height: 71px;}
    header span.left {display: none;}
    header .inquiry {width:72px; height:72px; background:url('../images/material/bg_inquiry.jpg') no-repeat 0 0; padding: 0; text-indent: -999999px;}
    header .inquiry span.hover {width:72px; height:72px; background:url('../images/material/bg_inquiry.jpg') no-repeat 0 0;}
    header .logo {padding-top:10px; margin-left: 0;}
    header .menu {padding:0px 0px; width:70px; height: 71px;}
    header .menu span.sline {left:20px;}
    
    #main-menu section {overflow-y: auto;}
    #main-menu section .wrap-sec {margin-top:40px; margin-left: 75px; margin-right: 75px;}
    #main-menu aside {width: 35%;}
    #main-menu section {width: 65%;}
    #main-menu aside .close {
        width:55px;
        height: 55px;
        background:url('../images/material/btn-close.png') no-repeat center 50%;
        z-index:25;
    }
    #main-menu aside ul li {margin-bottom: 20px;}
    #main-menu aside ul li a {font-size: 30px;}
    
    #home {padding-top:71px; height: 487px;}
    .parallax_box {padding-top:0px; position:relative;}
    #home .parallax_box .items {height: 487px;}  
    
    #home .items #wrhomeSlider img {  width: auto; height: 487px; max-width: 960px;}
    
    .middle_pos .center_pos .w-border {min-width: 240px; max-width: 280px;}
    
    #banner-content {margin-top:71px; min-height:640px; height: 640px;}
    #banner-content .parallax_box {height: 640px;}
    #banner-content img {height: 100%; min-width: 1024px; max-width: 1920px; margin-left: 0px;}
    #banner-content.bContact img {margin-left: -300px;}
    #banner-content.cr_detail img {margin-left: -300px;}
    #banner-content.about {height:576px; min-height: 576px;}
    #banner-content.about .parallax_box {height: 576px;}
    .home-info {padding-top: 40px;}
    
    .content-wording {padding-top: 50px;}
    
    section#pre-productions .view-column.services, section#reporting .view-column.services {
        min-height: 150px;
    }
    
    #home.gal {height:485px; padding-top: 71px !important;}
    #home.gal .parallax_box .items {height: 485px;}
    #home.gal .items #wrhomeSlider img {height: 100%; width:600px;}
    
    #banner-video {height: 580px; padding-top: 71px;}
    
    .like-gallery .main-gallery li {height: 265px;}
    
    #banner-content .block_relative {height: 100%;}
    #banner-video .parallax_box {height: 580px;}
    #banner-video video {margin-top: 0;}
    #banner-video .galVid {background: none !important;}
    
    #frame_blog {margin-top:71px;}
    
    .icon-list.hm {display:none;}
    
    .list-gallery.main_menu  {margin-top:0; height:305px; overflow: hidden;}
    .list-gallery.main_menu  li {width:450px; height: 305px;}
    .list-gallery.main_menu  li img {width: 100%; height: 305px;}   
    .list-gallery.main_menu  li .company-logo img {height:auto;} 
    .list-gallery.main_menu li .hover .img img {height: auto;}
    #main-menu section .wrap-sec h4 {}
    .list-blog {}
    .list-blog li h3 a {font-size: 18px; display: block; line-height: 19px;}
    
    #sec_workwithus.wkHome {display:block;}
    .box-getstart.gtHome {display:none;}
    
    .popup .wrap_popup .row input[type=text], .popup .wrap_popup .row textarea, .popup .wrap_popup .row select, #sec_workwithus .row input[type=text], #sec_workwithus .row textarea {
        font-size: 22px;
        padding:4px 4px 0 0;  
    }
    
    .popup .wrap_popup .row label, #sec_workwithus .row label {font-size: 16px;}
    #sec_workwithus .row input[type=text], #sec_workwithus .row textarea {
        font-size:22px;
        padding:4px 4px 0 0;     
        width: 670px;
    }
    .popup .wrap_popup form input[type=submit] {text-transform: capitalize;}
    
    .popup .wrap_popup .row, #sec_workwithus .row {border-bottom-width: 1px; position: relative;}
    #sec_workwithus .row.required {border:none;} 
    .popup .wrap_popup .row span.inFile, #sec_workwithus .row span.inFile {color:#ed1c24; font-size:16px; position: absolute; top: 30px; right: 0;}
    #sec_workwithus .row textarea {height: 110px;}
    .popup .wrap_popup form .wrap-file span {line-height: 56px; overflow: hidden; width: 100%;}
    .popup .wrap_popup form .wrap-file {width:100%;}
    
    .row_checkBox {padding:12px 0 0 0;}
    .row_checkBox input[type="checkbox"]{float:left; width:18px; height: 18px; border:none; padding: 0; margin: 2px 8px 0 0;}
    #sec_workwithus .row_checkBox span.txt {float:left; font-size: 16px; font-weight: bold; color:#999;}
    .row_checkBox .custom-check {
        float:left;             
        position: relative;
        top: 0em;
        margin: 0em;
        width: 19px;
        height: 19px;
        background: url('../images/material/checkbox.png') 0 0 no-repeat;
        cursor: pointer;
        margin-right: 5px; 
    }
    .row_checkBox .custom-check.checked {background: url('../images/material/checkbox_on.png') 0 0 no-repeat;}
    .popup .wrap_popup .row .icon-list li span {font-size: 16px; text-transform: uppercase; color: #333; fon-weight:normal;}
    
    .popup .wrap_popup .title {font-size:45px;}
    .popup .close {width: 55px;}
    
    .popup .wrap_popup form input[type=file] {width:100%;}
    
    .popup .wrap_popup .row span, #sec_workwithus .row span {color:#ed1c24; font-size:16px;}
    
    
    //.img-thumb {height: 258px; overflow-y: hidden;}
    .img-thumb {height: auto;}
    .img-thumb li {width: 25%;}       
    .img-thumb li:nth-child(5),
    .img-thumb li:nth-child(6),
    .img-thumb li:nth-child(7),
    .img-thumb li:nth-child(8),
    .img-thumb li:nth-child(9),
    .img-thumb li:nth-child(10),
    .img-thumb li:nth-child(11),
    .img-thumb li:nth-child(12),
    .img-thumb li:nth-child(13),
    .img-thumb li:nth-child(14),
    .img-thumb li:nth-child(15),
    .img-thumb li:nth-child(16),
    .img-thumb li:nth-child(17) {display: none;}
    
    #client ul {text-align: center;}
    #client ul li {width: 18.33%; height: auto; display: inline-block; float: none; position: relative !important; }
    
    .service {height: auto;}
    .view-column.two > div {min-height: 280px}
    
    .view-column.services {min-height: 150px; height: auto; padding-bottom: 40px; /*margin-left: 78px;*/}
    .view-column.two.services > div {width: 422px;}
    .view-column.two.services > div:first-child {margin-right: 0px; margin-left:78px;} 
    .view-column.two.services > div img {width: 422px !important;}
    
    .srch_form {border-radius: 20px;}
    .srch_form input {background:transparent; padding:9px 9px 9px 14px;}
    
    .select_category .fSelect .select-replace-cover {padding-left:7%;}
    
    #banner-content .captions {padding-left: 155px; padding-right: 155px;}
    
    
    #infoClient .wrap-wide {width: 713px; margin: 0 auto;}
    #infoClient > div > div {font-size: 14px;}
    .view-column.two.content-wording {width: 713px; margin-left: auto; margin-right: auto; display: block; *zoom:1;}
    .view-column.two.content-wording:before,
    .view-column.two.content-wording:after {
        display: table;
        line-height: 0;
        content: "";        
    }
    .view-column.two.content-wording:after {clear:both;}
    .view-column.two.content-wording > div {height: auto;}
    #video {width: 713px; margin: 0 auto 50px auto;}
    .imView {width: 713px; margin: 0 auto;}
    .display-image {width: 713px; margin: 0 auto; display: block;}
    .display-image div {float: none; display: inline-block;}
    .display-image div:nth-child(2) {width:460px;}
    .display-image div:nth-child(3) {width:240px;} 
    .footnote {width: 713px; margin: 0 auto 35px auto; display: block;}
    
    #blog-detail .wrap-wide {width: 713px; margin-left: auto; margin-right: auto; }
    #blog-detail .service .wrap {margin: 60px 55px 60px 55px;}
    
    #contact .address .address-tabs {width:710px; margin-left: auto; margin-right: auto; margin-top: -67px; position: relative;}
    
    #job .wrap-wide {width: 713px; margin-left:auto; margin-right: auto;}
    
    #main-gallery nav.afterclear a {display:none;} 
    #main-gallery nav.afterclear {text-align:center;}
    
    .select_category {
        display: inline-block;
        border: 1px solid #d8d8d8;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        vertical-align: top;
        margin-right:7px;
    }
    .select_category .fSelect {}
    .select_category .fSelect select {
        width: 185px;
        padding: 9px;
        margin:0 6px 0 0;
        border:none;
        cursor:pointer;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    } 
    
    .w-border .line.top, .w-border .line.bottom {height:8px;}
    .w-border .line.left, .w-border .line.right {width: 8px;}
    
    #home .items.img .maskVideo {display:block;}   
    
    #page404 {margin-top:71px;}
    
    
    .view-column.tServ {display: block;}
    .view-column.tServ > div {float:left; display: block;}
    
    .wrap-wide.cr_detail a.apply_desk {display:none;}
    .wrap-wide.cr_detail a.apply_mob {display:block;}
    
    
     #home .items .f_image, #home .items .f_video {top:0 !important; position: relative; background:none !important;} 
    #wrhomeSlider {display:none;}
    #home .items .f_video video {width:100%; display: none;}
    #home .items .f_video .still_image,
    #home .items .f_image .still_image {display:block; height:100%;}
    #home .items .f_video .still_image img,
    #home .items .f_image .still_image img {width: auto; max-width:1024px; height: 100%;}
    
    #banner-content video {display:none;}
    #banner-content .f_video .still_image {display:block;}
    
    #banner-video video {height: 580px; width: auto; max-width: 1920px; margin-top: 0px; display:none;}
    #banner-video .galVid .still_image {display:block;}
    #banner-video .galVid .still_image img {/*margin-left: -300px;*/ margin-left: 0px; width:auto; max-width:1920px;}
    
    
    footer .phone {margin-top:14px; margin-bottom: 14px;}
    footer p {float:none; display:block;}
    footer .socmed-foot {float:none; display: block;}
    footer p.telp {display: block;}
    
    
    #backTop {display:none !important;}
    

    /* ==========================================================================
   harlan style form plugin
   ========================================================================== */
    
    .form-label.form-label-auto {font-size: 16px;}
    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input {font-size: 22px !important; border-bottom-width: 1px !important; padding: }
    .form-all .form-submit-button {font-size: 18px !important;}
    
    .form-single-column .form-checkbox-item {width: 80px !important;}
    .form-checkbox-item .form-checkbox {width: 80px; height: 80px;}
    .form-checkbox-item .ico {height: 80px;}
    .form-checkbox-item .ico .bg {background-size: 80px !important;}
    .form-label.form-label-auto .form-required {top: 35px; right: 10px; color: #ed1c24;}
    .wrap_popup .form-all .form-line[data-type="control_checkbox"] .form-label.form-label-auto .form-required {top: 4px;}
    .wrap_popup .form-all .ls_ck {margin-top: 15px;}
    .form-checkbox-item label {font-size: 12px !important;}
    
    
    
}
@media screen and (max-width:768px){
    .main-gallery li{ width:50%; }
    .form-sub-label-container {float: none !important;}
}