@charset "UTF-8";

@font-face {
    font-family: Open Sans;
    src: url(../fonts/open-sans/OpenSans-Regular.ttf);
}
@font-face{
    font-family: Open Sans Light;
    src: url(../fonts/open-sans/OpenSans-Light.ttf);
}
html {
    font-family: 'Open Sans';
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.u02{
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.u02w1{
    padding: 0 80px 0 40px;
    background-color: #ececec;
}
.u02text{
    color: #00758F;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    /* margin-left: 16%; */
    width: 100%;
}
.tno_icon{
    background-color: #312D2A;
    font-family:Georgia, serif;
}
.tn02logow1{
    width: 140px;
}
.tn02logow1 a{
    color: #fff;
    margin: 0 2px;
    text-decoration: none;
    padding: 15px 25px;
    font-size: 29.5px;
    letter-spacing: 8px;
    font-weight: 600;
}
.tn02logow1 a span{
    /* margin-left: 10px; */
    width: 79px;
    height: 0px;
    display: inline-block;
}
.u02mlink .u02hamenu span, .u02mlinkw2 .u02hamenu span {
    display: none;
}
.u02mlinkw1 .u02hamenu span{
    display: block;
}
.u02menucontent, .u02menucontent .u02menu-l1, .u02menucontent .u02menu-ultn{
    width: 70px;
}
.u02menu-l2{
    left: 70px;
}
.u02menucontent a, .u02menucontent a:link, .u02menucontent a:visited {
    padding: 8px 5px;
    font-size: 13px;
}
.u02menucontent hr{
    padding: 0;
    margin: 0;
}
.ic_servise{
    background: url(../image/BSPVN_Home/icon_menu_Services.png);
    width: 32px;
    height: 32px;
    background-size: cover;
    margin: 0 auto;
}
.ic_aboutus{
    background: url(../image/BSPVN_Home/icon_menu_AboutUs.png);
    width: 32px;
    height: 32px;
    background-size: cover;
    margin: 0 auto;
}
.ic_contact{
    background: url(../image/BSPVN_Home/icon_menu_contact.png);
    width: 32px;
    height: 32px;
    background-size: cover;
    margin: 0 auto;
}
.ic_training{
    background: url(../image/BSPVN_Home/icon_menu_Training.png);
    width: 32px;
    height: 32px;
    background-size: cover;
    margin: 0 auto;
}
.ic_career{
    background: url(../image/BSPVN_Home/icon_menu_Career.png);
    width: 32px;
    height: 32px;
    background-size: cover;
    margin: 0 auto;
}
.u02menucontent .u02menu-ul{
    padding: 4px 0;
    background-color: #00252d;
    text-align: center;
}
.u02menu-l1z1 i {
    border-bottom: 17px solid #00252d;
}
.u02menu-hasm:hover{
    text-align: center;
}
.u02menu-hasm:hover{
    border-left: 2px solid #fff;
    background-color: #5c7a8b;
}
.tn02no{
    margin: 15px 15px;
    border-radius: 5px;
}
.u02menucontent a.tn02blink, .u02menucontent a:link.tn02blink, .u02menucontent a:visited.tn02blink{
    border-radius: 5px;
    padding: 10px;
    text-align: left;
    font-size: 15px;
}
.u02dtop .u02menu-l2>.u02menu-ul{
    background-color: #013744;
}
.ic02_telephone{
    background: url(../image/BSPVN_Home/icon_contact_bsp.png);
    width: 32px;
    height: 32px;
    background-size: cover;
    margin: 5px 5px 0 15px;
}
.ic02_support{
    background: url(../image/BSPVN_Home/icon_Get_Support.png);
    width: 32px;
    height: 32px;
    background-size: cover;
    margin: 5px 5px 0 15px;
}
.slick-dots li.slick-active button {
    background: #ed7a00;
    border-color: #ed7a00;
    opacity: 1;
}
.hp10dark .hp10w3 h1, .hp10dark .hp10w3 p, .hp10dark .hp10w3 a.hp10txtlnk, .hp10dark .hp10w3 a.hp10txtlnk:after{
    color: #fff;
}
.hp10dark .hp10w3 h1{
    font-size: 32px;
    text-transform: uppercase;
}
.hp10dark .hp10w3 p{
    width: 70%;
}
.obttns>div.obttn9 a, .obttns>div.obttn9 a:after, .obttns>div.obttn9 button, .obttns>div.obttn9 button:after, .obttns>div.obttn9:before, .obttns>div.obttn9 a:before, .obttns>div.obttn9 button:before{
    color: #49b7e0;
}
.obttns a:after, .obttns button:after{
    content: none;
}
.img_icobt{
    background: url(../image/BSPVN_Home/icon_arrow.png);
    width: 40px;
    height: 15px;
    float: right;
    background-size: contain;
    margin: 6px 6px 6px 25px;
}
.ic_mobile{
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #fff;
}
.ic_mobile:hover{
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #ed7a00;
}


.ic_mobilenew{
    background: url(../image/BSPVN_Home/icon_Topaction_Mobile_Development_Orange.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ic_web{
    background: url(../image/BSPVN_Home/icon_Topaction_Web_Development_Orange.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ic_onside{
    background: url(../image/BSPVN_Home/icon_Topaction_Onsite_Development_Team_Orange.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}

.ic_getAI{
    background: url(../image/BSPVN_Home/icon_Topaction_AI_Orange.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ic_getAI:hover{
    background: url(../image/BSPVN_Home/icon_Topaction_AI_White.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}

.ic_getstart{
    background: url(../image/BSPVN_Home/icon_Topaction_Howtogetstart_Orange.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ic_getstart:hover{
    background: url(../image/BSPVN_Home/icon_Topaction_Howtogetstart_White.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}

.ic_why{
    background: url(../image/BSPVN_Home/icon_Topaction_WhysBSP_Orange.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ic_mobilenew:hover{
    background: url(../image/BSPVN_Home/icon_Topaction_Mobile_Development_white.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ic_web:hover{
    background: url(../image/BSPVN_Home/icon_Topaction_Web_Development_White.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ic_onside:hover{
    background: url(../image/BSPVN_Home/icon_Topaction_Onsite_Development_Team_White.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}

.ic_why:hover{
    background: url(../image/BSPVN_Home/icon_Topaction_WhysBSP_White.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}

.tnright_footer{
    width: 420px;
    height: 61px;
    overflow: hidden;
    margin-top: 8px;
    float: left;
}
.logo_footer{
    border-right: 1px solid #fff;
    width: 130px;
    float: left;
    margin-right: 30px;
}
.text_footer{
    margin-left: 15px;
}
.text_footer div{
    font-size: 26px;
    margin-bottom: 8px;
}
.text_footer p{
    font-size: 13px;
}
.menu_footer{
    float: right;
}
.menu_footer li{
    float: left;
    padding: 10px 20px;
}
.menu_footer div{
    float: left;
}
.ic_fb{
    width: 36px;
    height: 36px;
    background-size: cover;
}
.menu_footer li a, .menu_footer li a:hover, .menu_footer li a:link, .menu_footer li a:active {
    font-size: 13px;
    text-decoration: none;
}
.u10-links{
    margin-bottom: 0;
    padding-left: 10px;
}
.u10-links li {
    font-size: 12px;
}
.u10-links li span {
    color: #50a2c0;
}
.obttns>div.obttn9:hover{

}


.obttns a, .obttns button{
    padding: .6em 1em .57em 1.2em;
}
.cn24 {
    background-color: #312D2A;
}
.cn24w1 {
    padding-top: 32px;
}
.cn24 h3 {
    font-weight: bold;
}
.tnmeun_02{
    opacity: 0.7;
    background: #000;
    margin-top: -47px;
    color: #fff;
    width: 100%;
}
#menu2 ul{
    float: left;
    margin-bottom: 0px;
}
#menu2 ul li{
    float: left;
    padding: 12px 25px;
}
#menu2 ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 13px;
}
#menu2 ul li a:hover{
    border-top: 5px solid #ed7a00;
    padding-top: 10px;
    padding-bottom: 10px;  
}
.tntopmenu_02{
    opacity: 0.7;
    background: #312d2a;
    color: #fff;
    width: 100%;
    position: absolute;
    z-index: 5;
    padding-left: 110px;
    padding-right: 110px;
}
.menu_text{
    padding: 12px 0;
    font-size: 13px;
}

.tn24Menu {
    min-height: 0px;
    font-size: 14px;
}
.tn24Menu .cwidth{
    padding-top: 0px;
    padding-bottom: 3px;
}
.tn24Menu .cn24w3{
    width: 90%;
}
.tn24Menu .cn24w3 li{
    font-size: 13px;
    width: auto !important;
    padding: 0 25px;
}
.tn24Menu .cn24w3 li a{
    padding-top: 10px;
}
.tn24Menu .cn24w3 li a:hover{
    border-top: 5px solid #ed7a00;
    padding-top: 5px;
}
.tn24Menu .cn24w4 a>span{
    font-size: 13px;
    font-weight: normal;
    top: -1px;
    padding: 0;
}
.icn-cvthnr-right:before {
    content: none;
}
.tn24Menu .cwidth {
    text-align: center;
}
.tn24Menu .cn24w4{
    text-align: center;
}
.cn24 .cn24w5 ul {
    display: block;
    position: relative;
    width: 25rem;
    padding: 2rem 15px;
    margin-bottom: 0;
}
.hp10 .slick-nav .slick-arrow.slick-prev::before { 
    content: url(../image/BSPVN_Home/icon_angle_left_white.png);
}
.hp10 .slick-nav .slick-arrow.slick-next::before { 
    content: url(../image/BSPVN_Home/icon_angle_right_white.png);
}

/*Content*/

.tn58cdiv{
    background-color: #ececec;
    float: left;
    width: 100%;
    margin-bottom: 50px;
    margin-top: 10px;
}
.tn58cimage{
    width: 50%;
    float: left;
}
.tn58ctext{
    width: 50%;
    float: left;
    padding: 35px 40px;
}
.tn58ctext span{
    color: #ed7a00;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
}
.tn58ctext h1{
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 23px;
    font-family: sans-serif;
    margin: 10px 0 15px 0;
}
.tn58ctext div.tn58chow{
    color: #ed7a00;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 4px;
    width: auto;
    height: 170px;
    float: left;
    margin-left: 12px;
    margin-right: -115px;
    font-family: sans-serif;
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.tn58ctext p{
    font-size: 12.5px;
    color: #000;
    margin: 0 0 0.6em;
    line-height: 1.4;
}
.tn58ctext div.tn58cmore{
    margin-top: 33px;
}
.tn58ctext div a.tn58clearn{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    background-color: #fff;
    padding: 8px 15px;
    cursor: pointer;
    color: #49b7e0;
    text-decoration: none;
}
.tn58reationimg{
    margin-top: 15px;
}
.tn58rea{
    position: absolute;
    top: 30px;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    left: 0%;
}
.tn58rea div{
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 23px;
    font-family: sans-serif;
}
.iconheadln{
    background: url(../image/BSPVN_Home/icon_headline_white.png);
    width: 70px;
    height: 3px;
    background-size: contain;
    margin: 6px 6px 6px 25px;
    margin: 0 auto;
}
.iconheadln_blue{
    background: url(../image/BSPVN_Home/icon_headline_blue.png);
    width: 70px;
    height: 3px;
    background-size: contain;
    margin: 6px 6px 6px 25px;
    margin: 0 auto;
}

.tn58two{
    position: absolute;
    top: 74px;
    text-align: center;
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 23px;
}
.tn58r50{
    width: 38%;
    text-align: left;
    padding: 15px 50px;
    float: left;
}
.tn58span1{
    font-weight: normal;
    font-size: 47px;
    letter-spacing: 2px;
    font-family: 'Open Sans Light';
}
.tn58span2{ 
    font-size: 35px;
    font-family: sans-serif;
    font-weight: bold;
}
.ic_threepoint{
    width: 8px;
    height: auto;
    vertical-align: baseline;
    margin: 0 25px 0 10px;
}
.tn58r50 p{
    font-size: 13px;
    text-transform: capitalize;
    font-weight: normal;
    line-height: 2;
    margin-left: 50px;
}
.tn58two_left{
    left: 50%;
}
.tn58two_top{
    top: 261px;
}
.img_bgr{
    height: 492px;
}
.tn58reationworkflow div{
    text-align: center;
    color: #00252d;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 26px;
    font-family: sans-serif;
}
.tntop58cus{
    top: 7%;
}
.tn58r100{
    width: 100%;
}

#slider {
    height:auto;
    width:100%;
	margin:auto;
    overflow:hidden;
    position: absolute;
    top: 18%;
}

#single_item{
    margin-top: -40%;
}
.slide_cus {
    height:510px;
    float:left;
    text-align:center;
    font-size:40px;
}
.slide_in{
    height: auto;
}
.tnslide_in{
    border-radius: 6px;
    margin: 10px;
    background-color: #fafafa;
    height: auto;
    position: absolute;
    z-index: 1;
    margin-top: 80px;
    padding-top: 5.6%;
    width: 8.6%;
    padding-bottom: 30px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.tn02slide{
    border-radius: 6px;
    margin: 29px;
    background-color: #fafafa;
    height: auto;
    position: absolute;
    z-index: 2;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    cursor: pointer;
    width: 7.75%;
}
.tn02slide:hover{
    margin: 10px;
    width: 8.6%;
    margin-top: 10px;
    border-radius: 6px;
}
.tn02slide img{
    height: auto;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

#single_item a.slick-prev, #single_item a.slick-next{
    display: none !important;
}

.slick-dots li button{
    border: 2px solid #fff;
}
.slick-dots li button:hover{
    background: #fff;
}
.show_detail{
    display: none;
    margin-top: 20px;
}
.show_detail a{
    padding: 6px 20px;
    border: 1px solid #ed7a00;
    color: #ed7a00;
    font-weight: normal;
    text-transform: none;
    font-size: 12px;
}

.tnslidexp{
    margin-top: 10px;
    background-color: #f2f3f5;
    padding: 0 60px 80px 60px;
}

.textexp{
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    font-family: sans-serif;
    text-align: center;
    padding: 30px;
}

.slide_expert{
    padding: 10px 40px 0px 40px;
}
.slide_expert img{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
}

#single_item_expert .slick-arrow.slick-prev::before, #single_item_feedback .slick-arrow.slick-prev::before { 
    content: url(../image/BSPVN_Home/icon_angle_left_blue.png);
    margin-left: 22px;
}
#single_item_expert .slick-arrow.slick-next::before, #single_item_feedback .slick-arrow.slick-next::before { 
    content: url(../image/BSPVN_Home/icon_angle_right_blue.png);
    margin-left: 22px;
}

.tn58custech{
    width: 100%;
    float: left;
}
.tn_technical{
    padding: 0px;
}
.tndivtech{
    width: 100%;
    padding: 25px 100px;
    float: left;
}
.cnt58in{
    float: left;
    padding: 10px 0;
}
.tech58in{
    width: 33%;
    float: left;
}
.ic_mobile58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_Mobile_Development.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_hub58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_HUBSPOT.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_des58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_UI_UX_DESIGN.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_mag58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_MAGENTO_DEVELOPMENT.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_web58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_Web_Development.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_crm58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_CRM_ERP_SOFTWARE.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_hot58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_HOSTING_SERVICES.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_ecom58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_ECOMMERCE.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_shopy58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_SHOPIFY_DEVELOPMENT.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_mean58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_MEAN_STACK_EXPERT.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_itcon58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_IT_CONSULTING-02.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.ic_ibig58{
    background: url(../image/BSPVN_Home/icon_Technical_Expertise_IBigCommerce.png);
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
}
.textcnt58{
    float: left;
    width: 80%;
    margin-left: 15px;
}
.cnt58in span{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    line-height: 2.8;
}
.cnt58in p{
    font-size: 12px;
}

.tn60r{
    width: 100%;
    height: 100%;
    margin-top: -30px;
}
.tn60r span.tn60spanleft img{
    width: 60%;
    float: left;
    margin-bottom: -1px;
}
.tn60r span.tn60spanright img{
    width: 40%;
    float: left;
}

.tn61r{
    padding: 30px 0 0 0;
}
.tn61r img{
    width: 100%;
}
.tn61rimg{
    
}
.tn61rdiv{
    position: absolute;
    z-index: 2;
    top: 35%;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 0 30px;
}

.ic_kepleft{
    background: url(../image/BSPVN_Home/icon_quote_left-01.png);
    float: left;
    width: 31px;
    height: 25px;
    margin: 20px;
    background-size: contain;
}
.ic_kepright{
    background: url(../image/BSPVN_Home/icon_quote_right-01.png);
    float: right;
    width: 31px;
    height: 25px;
    margin: 20px;
    background-size: contain;
}
.cnt_center{
    float: left;
    width: 80%;
    padding: 0px 20px;
    margin-left: 4%;
}
.tn61rslide{
    padding: 0 60px;
}
.tn61rslide p{
    color: #fff;
    font-size: 14px
}

.tn61rslide span{
    color: #00b9f3;
    font-size: 14px
}

.tn62r{
    padding: 0;
}

.bgvlightgrey, .afterbg-vlightgrey:after, .beforebg-vlightgrey:before, .setvlightgrey .bcbackgroundcolor, ul.icn-list.icn-circle-list li.bgvlightgrey:after {
    background-color: #ffffff !important;
}

/*End Content*/


@media only screen and (max-width: 1366px){
    .u10w1 {
        max-width: 1366px;
        padding-left: 100px;
        padding-right: 100px;
    }
    .mwidth, .cwidth {
        max-width: 1366px;
        padding-left: 100px;
        padding-right: 100px;
    }
    .hp10w3.hp10left {
        width: 34em;
        left: 110px;
    }
    .tnmeun_02{
        max-width: 1366px;
        padding-left: 75px;
        padding-right: 75px;
    }
    
    .tn24Menu .cwidth{
        padding-left: 72px;
        padding-right: 72px;
    } 
}
@media only screen and (max-width: 1044px){
    .u02text {
        height: 30px;
        line-height: 17px;
    }
}
@media only screen and (max-width: 1023px){
    .cwidth {
        padding-left: 0px;
        padding-right: 0px;
    }
    .ic_threepoint {
        width: 5px;
        margin: 0 10px 0 0px;
    }
    .tn58span1 {
        font-size: 50px;
    }
    .tn58span2 {
        font-size: 25px;
    }
    .tn58r50 {
        width: 50%;
        text-align: left;
        padding: 10px 25px;
        float: left;
    }
    .tn58r50 p {
        font-size: 12px;
        margin-left: 25px;
    }
    .tndivtech {
        padding: 25px 20px;
        float: left;
    }
    .cnt_center {
        float: left;
        width: 77%;
        padding: 0px 20px;
        margin-left: 3%;
    }
    .tn61rslide p{
        font-size: 13px;
    }
    .tn61rslide span {
        color: #00b9f3;
        font-size: 13px;
    }
    .ic_kepright, .ic_kepleft{
        width: 20px;
        height: 16px;
    }
    .tn58ctext {
        padding: 10px 15px;
    }
    .hp10 .slick-nav .slick-arrow.slick-prev::before {
        content: url(../image/icon_angle/icon_angle_left_white_1_2.png);
        top: 65px;
        text-align: center;
    }
    .hp10 .slick-nav .slick-arrow.slick-next::before {
        content: url(../image/icon_angle/icon_angle_right_white_1_2.png);
        top: 65px;
        text-align: center;
    }
    .tn58reationimg img.img_bgrservices{
        height: 560px;
    }
    .slide_cus {
        height: 450px;
        font-size: 40px;
    }
    #single_item {
        margin-top: -48%;
    }
}
@media only screen and (max-width: 1044px){
    .u02text {
        height: 0;
        line-height: 0;
    }
}
@media only screen and (max-width: 900px){
    #single_item {
        margin-top: -55%;
    }
}
@media (max-width: 1024px) and (min-width: 770px){
    .tn58ctext h1 {
        font-size: 18px;
        margin: 4px 0 8px 0;
    }
    .tn58ctext div.tn58chow {
        font-size: 13px;
    }
    .tn58ctext span {
        font-size: 13px;
        font-weight: bold;
    }
    .tn58ctext p {
        font-size: 12px;
    }
}
@media only screen and (max-width: 983px){
    .cnt_center {
        float: left;
        width: 84%;
        padding: 0px 0px;
        margin-left: 0%;
    }
    .tn61rslide p {
        font-size: 12px;
    }
    .tn61rslide span {
        color: #00b9f3;
        font-size: 12px;
    }
    .tn61r img {
        width: 100%;
        height: 160px;
    }
}
@media only screen and (max-width: 974px){
    .cnt_center {
        float: left;
        width: 70%;
        padding: 0px 0px;
        margin-left: 4%;
    }
    .tn02logow1 a {
        padding: 9px 25px;
    }
    .u02w1 {
        padding: 0;
    }
}
@media (max-width: 974px) and (min-width: 831px){
    .f11 .u02menu-l2, .ocom-responsive .u02menu-l2{
        left: 70px;
    }
    .f11 .u02mainmenu, .f11 .u02menucontent .u02menu-ultn{
        width: 70px;
    }
}
@media only screen and (max-width: 933px){
    .tn02logow1 a {
        margin: 0 5px;
    }
    /* .u02search {
        width: 45px;
    } */
    .u02text {
        font-size: 1.5vw;
        margin-left: 0;
        width: 100%;
    }
}
@media only screen and (max-width: 831px){
    .u02w1 {
        padding: 0 0px 0 0px;
    }
    .f11 .u02menu-l2, .ocom-responsive .u02menu-l2{
        left: 65px;
    }
    .f11 .u02mainmenu, .f11 .u02menucontent .u02menu-ultn{
        width: 65px;
    }
    .tn02logow1 a {
        margin: 0 0px;
    }
    .u02menucontent a, .u02menucontent a:link, .u02menucontent a:visited {
        font-size: 12px;
    }
    .u02menucontent a.tn02blink, .u02menucontent a:link.tn02blink, .u02menucontent a:visited.tn02blink{
        font-size: 13px;
    }
    .tntopmenu_02 {
        padding-left: 65px;
        padding-right: 65px;
    }
    .tnmeun_02 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .u10w1 {
        padding-left: 40px;
        padding-right: 40px;
    }
    .tn24Menu .cwidth {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media only screen and (max-width: 770px){
    .hp10w2 img{
        /*left: 30%;*/
    }
    .hp10dark .hp10w3 h1 {
        font-size: 20px;
    }
    .hp10dark .hp10w3 p {
        width: 100%;
    }
    .obttns a{
        padding: 7px 1em 4px 1.2em;
    }
    .f11 .u10w1, .ocom-base .u10w1 {
        margin: 0 0 0em 0;
    }
    .u10w1 {
        padding-left: 25px;
        padding-right: 25px;
    }
    .tn24Menu .cwidth {
        padding-left: 15px;
        padding-right: 25px;
    }
    .tech58in {
        width: 100%;
        float: none;
    }
    .textcnt58 {
        float: left;
        width: 90%;
        margin-left: 15px;
    }
    .tn58ctext {
        width: 100%;
        float: none;
        padding: 30px 20px;
    }
    .tn58cimage {
        width: 100%;
        float: none;
    }
    .tn58reationimg img.img_bgr{
        height: 580px;
    }
    .tn58reationimg img.img_bgrservices{
        height: 580px;
    }
    .tn02slide{
        width: 10.50%;
    }
    .tnslide_in{
        width: 11.8%;
        padding-top: 7.6%;
    }
    .slide_cus {
        height: 415px;
    }
    #single_item {
        margin-top: -64%;
    }
    .tn02slide:hover{
        margin: 10px;
        width: 11.8%;
        margin-top: 10px;
        border-radius: 6px;
    }
}
@media only screen and (max-width: 770px){
    .tn24Menu .cwidth {
        padding-left: 0px;
        padding-right: 20px;
    }
    .tn24Menu .cn24w3 li {
        padding: 0 15px;
    }
    .f11 .u02menuback {
        display: none;
    }
    .tnright_footer {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin-top: 15px;
        float: none;
        margin: 0 auto;
    }
    .menu_footer {
        float: none;
    }
    .logo_footer{
        width: 100%;
        float: none;
        border-right: none;
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: center;
    }
    .text_footer div{
        display: none;
    }
    .text_footer{
        text-align: center;
    }
    .tn60r span.tn60spanleft img{
        width: 100%;
    }
    .tn60r span.tn60spanright img{
        width: 100%;
    }
    .tnslidexp {
        padding: 0 10px 80px 10px;
    }
    .tn61rslide {
        padding: 0 0px;
    }
    .tn61rdiv {
        top: 15%;
    }
    .cwidth {
        padding-left: 20px;
        padding-right: 20px;
    }
    .u02text {
        font-size: 1.5vw;
        margin-left: 0;
        width: 100%;
        /* height: 30px;
        line-height: 15px; */
    }
}

@media only screen and (max-width: 700px){
    .tn58reationimg img.img_bgrservices{
        height: 600px;
    }
    .slide_cus {
        height: 400px;
    }
    #single_item {
        margin-top: -70%;
    }
}
@media only screen and (max-width: 670px){
    .u02text {
        font-size: 2vw;
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        line-height: 15px;
    }
}
@media only screen and (max-width: 650px){
    .tn58reationimg img.img_bgrservices{
        height: 600px;
    }
    .slide_cus {
        height: 370px;
    }
    #single_item {
        margin-top: -75%;
    }
}

@media only screen and (max-width: 600px){
    .slick-prev, .slick-next { 
        height: 9em;
        width: 5em;
        position: absolute;
        transform: translate(0, -50%);
    }
    #single_item_expert .slick-arrow.slick-prev::before, #single_item_expert .slick-arrow.slick-next::before{
        margin-left: 8px;
    }
    #single_item_feedback .slick-arrow.slick-prev::before, #single_item_feedback .slick-arrow.slick-next::before{
        margin-left: 8px;
    }
    .tn61rdiv {
        top: 22%;
    }
    .tn61rdiv {
        padding: 0 20px;
    }
    #single_item {
        margin-top: -85%;
    }
    .tn58reationimg img.img_bgrservices{
        height: 550px;
    }
}
@media only screen and (max-width: 520px){
    .cnt_center{
        width: 62%;
    }
    .tn61r img{
        height: 185px;
    }
    .tn58reationimg img.img_bgrservices{
        height: 500px;
    }
    .slide_cus {
        height: 350px;
    }
}
@media only screen and (max-width: 500px){
    .hp10 .slick-nav {
        top: 208px;
        height: 42px;
        padding: 0px 1em;
    }
    .tn02slide{
        width: 14.4%;
        height: 300px;
    }
    .tn02slide img{
        height: 300px;
    }
    .tnslide_in{
        width: 15.8%;
        padding-top: 10.6%;
    }
    .tn58reationimg img.img_bgrservices{
        height: 750px;
    }
    .slide_cus {
        height: 500px;
    }
    #single_item {
        margin-top: -140%;
    }
    .tn02slide:hover{
        margin: 10px;
        width: 15.8%;
        margin-top: 10px;
        border-radius: 6px;
    }
}
@media only screen and (max-width: 470px){
    #single_item {
        margin-top: -150%;
    }
}
@media only screen and (max-width: 436px){
    .cnt_center{
        width: 62%;
        margin-left: 2%;
    }
    .tn61r img{
        height: 220px;
    }
    #single_item {
        margin-top: -160%;
    }
    .slide_cus {
        height: 460px;
    }
}


#tn1, #tn2, #tn3, #tn4, #tn5, #tn6{
    display: none;
}
#tp7, #tp8, #tp9, #tp10{
    display: none;
}

@media only screen and (max-width: 1350px){
    #tp6{ display: none;}
    #tn6{ display: block;}
}
@media only screen and (max-width: 1175px){
    #tp5{ display: none;}
    #tn5{ display: block;}
}
@media only screen and (max-width: 985px){
    #tp4{ display: none;}
    #tn4{ display: block;}
}
.tnone2{
    display: none;
}
.u02mobi .u02mlink.u02opened {
    background: #00252d;
    transition-duration: 0.3s;
}
.u02menuback{
    display: none;
}

@media only screen and (max-width: 974px){
    .u02search {
        width: 100%;
    }
}

@media only screen and (max-width: 670px){
    .tn02logow1 a{
        font-size: 23px;
        text-align: center;
    }
    .tn02logow1 a span {
        width: 65px;
      }
    .f11 .u02tools>ul, .ocom-responsive .u02tools>ul{
        background-color: #00252d;
    }
    .f11 #mobisearch.u02searchpop, .ocom-responsive #mobisearch.u02searchpop {
        background: #00252d;
    }
    .f11 .u02search.u02searchpop, .ocom-responsive .u02search.u02searchpop{
        background: #00252d;
    }
    .u02mobi .u02mlink .u02menu-l2>.u02menu-ul, .u02mobi .u02mlink .u02menu-l3>.u02menu-ul {
        padding: 2px 0;
    }
    .u02mobi .u02blink {
        padding: 10px !important;
        font-weight: normal;
        border-bottom: none;
    }
    .f11 .u02menuback {
        display: block;
        font-weight: bold;
        border-bottom: #5c7a8b solid 1px;
        font-size: 18px;
        text-align: left;
    }
    .f11 .u02menuback a {
        font-size: 18px;
        padding-left: 70px !important;
    }
    .u02mobi .u02blink:before, .u02more .u02blink:before, .u02mobi .u02blink:after, .u02more .u02blink:after {
        display: none;
    }
    .u02menuback .u02blink:before, .u02menuback .u02blink:after{
        display: block;
    }
    .u10w5 {
        margin: 0 auto;
        text-align: center;
    }
    
}
@media only screen and (max-width: 667px){
    #tp3{ display: none;}
    #tn3{ display: block;}
    .tn24Menu .cwidth {
        padding-left: 20px;
        padding-right: 20px;
        width: 100% !important;
    }
    .cn24 .cn24w1 {
        padding-top: 2.7rem;
        width: 100% !important;
    }
    .cn24 .cn24w5{
        margin-top: -2.5em;
    }
    .cn24 .cn24w5 ul{
        width: 100%;
    }
    .tnmore{
        display: none;
    }
    .tnone2{
        display: block;
        color: #fff;
        position: inherit;
        margin-top: -5px;
    }
    .cn24 .cn24w4>a>span {
        display: block;
        padding: 0 0 1.5em 0;
        text-align: center;
    }
    .f11 .u02mainmenu, .f11 .u02menucontent .u02menu-ultn {
        width: 340px;
    }
    .u02menucontent .u02menu-ul {
        padding: 0px 0;
    }
    .tntopmenu_02 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .cwidth {
        padding-left: 20px;
        padding-right: 20px;
    }
    .tn58two_top {
        top: 55%;
    }
    .tn58rea div {
        font-size: 18px;
    }
    .tn58r50 {
        padding: 10px 10px;
    }
    .tn58span1 {
        font-size: 40px;
    }
    .tn58span2 {
        font-size: 16px;
    }
}
@media only screen and (max-width: 567px){
    .textcnt58 {
        float: left;
        width: 85%;
        margin-left: 15px;
    }
}
@media only screen and (max-width: 496px){
    .u02text {
        font-size: 2.6vw;
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        line-height: 15px;
    }
    .tn02logow1 a {
        padding: 10px 15px;
    }
    .tn02logow1 {
        width: 105px;
    }

    .tn58reationimg img.img_bgr {
        height: 800px;
    }
    .tn58two_left {
        left: 0;
        top: 35%;
    }
    .tn58r50 {
        width: 100%;
    }
    .tn58two_top {
        top: 55%;
    }
    .tn58four{
        top: 75%;
    }
    .tn58r50 {
        padding: 10px 15px;
    }
}
@media only screen and (max-width: 400px){
    .u02text {
        font-size: 2.3vw;
    }
    .tn02logow1 a {
        padding: 9px 10px;
    }
    .tn02logow1 {
        width: 98px;
    }
    .slide_cus {
        height: 450px;
    }
    .tnslide_in {
        padding-top: 11.6%;
    }
    .tn58reationimg img.img_bgrservices{
        height: 700px;
    }
    .textcnt58 {
        width: 82%;
    }
    .img_icobt{
        width: 20px;
        height: 8px;
        margin: 6px;
    }
    .hp10w3 p, .hp10w3 a{
        font-size: 12px;
    }
}
@media (max-width: 360px) and (min-width: 320px){
    .tnslide_in {
        padding-top: 12.6%;
    }
    .tn02slide {
        width: 14%;
    }
    .tn58reationimg img.img_bgrservices{
        height: 650px;
    }
    .textcnt58 {
        width: 80%;
    }
    .cwidth {
        padding-left: 15px;
        padding-right: 15px;
    }
    .cn24 .cn24w3 li a>div>span{
        font-size: 3.5vw;
    }
    .ic_mobile {
        width: 36px;
        height: 36px;
    }
    .hp10dark .hp10w3 h1 {
        font-size: 18px;
    }
    .hp10w3{
        padding: 1em !important;
    }
    .tn58ctext div.tn58chow {
        height: 260px;
        float: left;
        margin-left: 54px;
        margin-right: -170px;
    }
    .tn58reationworkflow div {
        font-size: 18px;
    }
    .textexp {
        font-size: 18px;
    }
    .tn61rdiv {
        padding: 0 15px;
    }
    .tn61rdiv {
        padding: 0 15px;
    }
    .cnt_center{
        width: 55%;
    }
    .tn61rdiv {
        top: 16%;
    }
    .tn61r img{
        height: 280px;
    }
}
@media (max-width: 340px) and (min-width: 320px){
    .tnslide_in {
        padding-top: 13.6%;
    }
    .tn58reationimg img.img_bgrservices{
        height: 600px;
    }
}

.u02tlink:not([href$='#open']):after, .u02xlink:after, .u02ulink:after{
    content: none;
}

.tn58reationimg .slider .slick-dots{
    bottom: 0 !important ;
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
  width: 100%;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 50px;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 15px 10px;
    cursor: pointer;
    background-color: #ececec;
    border-bottom: 1px solid #d4d4d4;
    font-size: 14px;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

#mainSlider .slick-prev,#mainSlider .slick-next{
    position: absolute;
    width: 66px;
    height: 117px;
    border: 0;
    bottom: 30%;   
    z-index: 1;
}
#mainSlider .slick-prev{
    left: 0;
    background: url(../image/BSPVN_Home/icon_angle_left_white.png) center no-repeat;
}

#mainSlider .slick-next{
    right: 0;
    background: url(../image/BSPVN_Home/icon_angle_right_white.png) center no-repeat;
}

#mainSlider .slick-prev:hover{
    background-color:rgba(0,0,0,0.3) ;
}
#mainSlider .slick-next:hover{
    background-color:rgba(0,0,0,0.3);
}
#mainSlider .slick-dots{
    bottom: 50px;
}
.slick-dots li button:before{
    display: none;
}
@media only screen and (max-width: 770px) and (min-width: 590px){
    #mainSlider .slick-prev, #mainSlider .slick-next {
        width: 50px;
        height: 30px;
        bottom: 221px !important;
        background-size: 20px auto;
    }
    #mainSlider .slick-prev:hover,#mainSlider .slick-next:hover{
        background-size: 20px auto;
        background-color:transparent;
    }
    #mainSlider ul.slick-dots {
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 233px;
    }
    #mainSlider ul.slick-dots li{
        width: 14px;
        height: 14px;
        margin-top: 15px;
    }
    #mainSlider ul.slick-dots li button{
        width: 8px;
        height: 8px;
    }
}
@media only screen and (max-width: 589px) and (min-width: 500px){
    #mainSlider .slick-prev, #mainSlider .slick-next {
        width: 50px;
        height: 30px;
        bottom: 238px !important;
        background-size: 20px auto;
    }
    #mainSlider .slick-prev:hover,#mainSlider .slick-next:hover{
        background-size: 20px auto;
        background-color:transparent;
    }
    #mainSlider ul.slick-dots {
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 250px;
    }
    #mainSlider ul.slick-dots li{
        width: 14px;
        height: 14px;
        margin-top: 15px;
    }
    #mainSlider ul.slick-dots li button{
        width: 8px;
        height: 8px;
    }
}
@media only screen and (max-width: 500px){
    #mainSlider .slick-prev,#mainSlider .slick-next{
        width: 50px;
        height: 30px;
        bottom: 293px !important;
        background-size: 20px auto;
    }
    #mainSlider .slick-prev:hover,#mainSlider .slick-next:hover{
        background-size: 20px auto;
        background-color:transparent;
    }
    #mainSlider ul.slick-dots{
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 307px;
    }
    #mainSlider ul.slick-dots li{
        width: 14px;
        height: 14px;
        margin-top: 15px;
    }
    #mainSlider ul.slick-dots li button{
        width: 8px;
        height: 8px;
    }
}
@media only screen and (width: 390px){
    #mainSlider ul.slick-dots {
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 288px;
    }
    #mainSlider .slick-prev, #mainSlider .slick-next {
        width: 50px;
        height: 30px;
        bottom: 275px !important;
        background-size: 20px auto;
    }
}
.txtSearch-next svg {
    width: 50px;
    height: 30px;
    background-size: 20px auto;
    position: absolute;
    bottom: 16px;
}
.txtSearch-next{
    display: none;
}
.txtSearchPlahoder{
    position: absolute;
    left: 75px;
    bottom: 32px;
    display: none;
}
@media only screen and (width: 375px){
    #mainSlider .slick-prev,#mainSlider .slick-next{
        width: 50px;
        height: 30px;
        bottom: 291px !important;
        background-size: 20px auto;
    }
    #mainSlider ul.slick-dots{
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 302px;
    }
}
@media only screen and (min-width: 390px) and (max-width:414px){
    #mainSlider .slick-prev,#mainSlider .slick-next{
        width: 50px;
        height: 30px;
        bottom: 291px !important;
        background-size: 20px auto;
    }
    #mainSlider ul.slick-dots{
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 302px;
    }
}
@media only screen and (min-width: 320px) and (max-width: 360px){
    #mainSlider .slick-prev, #mainSlider .slick-next {
        width: 50px;
        height: 30px;
        bottom: 283px !important;
        background-size: 20px auto;
    }
    #mainSlider ul.slick-dots {
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 294px;
    }
}
@media only screen and (width: 360px){
    #mainSlider .slick-prev, #mainSlider .slick-next {
        width: 50px;
        height: 30px;
        bottom: 266px !important;
        background-size: 20px auto;
    }
    #mainSlider ul.slick-dots {
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 40px;
        bottom: 277px;
    }
}