@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900&subset=latin,latin-ext);

body {
    font-family: 'Roboto', sans-serif;
    background-color: #50ABF1;
    color: #858585;
}

a,
a:hover,
a:focus,
a:active { text-decoration: none; color: #3a3a3a; }


h1,h2,h3,h4,h5,h6 { color: #3b3b3b; }


/* Short Codes *****************************************************/

.f3 {font-weight: 300;}
.f4 {font-weight: 400;}
.f5 {font-weight: 500;}
.f6 {font-weight: 600;}
.f7 {font-weight: 700;}
.f8 {font-weight: 800;}
.f9 {font-weight: 900;}

.m0 { margin: 0px; }
.mT15 {margin-top: 15px;}
.mB15 {margin-bottom: 15px;}
.mT30 {margin-top: 30px;}
.mB30 {margin-bottom: 30px;}

.p0 { padding: 0px; }
.pT15 {padding-top: 15px;}
.pB15 {padding-bottom: 15px;}
.pT30 {padding-top: 30px;}
.pB30 {padding-bottom: 30px;}

.pR { position: relative; }
.db { display: block !important; }
.dib { display: inline-block !important; }
.w100 { float: left; width: 100%; }
.w50 { float: left; width: 50%; }
.eclipse { overflow:hidden; text-overflow:ellipsis; white-space: nowrap; }
.flexCC { display: flex; display: -ms-flex; align-items:center; justify-content:center; }
.flexCR { display: flex; display: -ms-flex; align-items:center; justify-content:flex-end; }
.flexCL { display: flex; display: -ms-flex; align-items:center; justify-content:flex-start; }
.flexCB { display: flex; display: -ms-flex; align-items:center; justify-content:space-between; }
.flexCA { display: flex; display: -ms-flex; align-items:center; justify-content:space-around; }

.tW {color: #fff !important;}
.tW a {color: #fff !important;}
.bW {background-color: #fff !important;}

.tB {color: #000 !important;}
.tB a {color: #000 !important;}
.bB {background-color: #000 !important;}

.tG {color: #ebebeb !important;}
.tG a {color: #ebebeb !important;}
.bG {background-color: #ebebeb !important;}

.trl {
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}
.trlX {
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
}
.trlY {
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.cover {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.contain {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -ms-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}


/* Buttons *********************************************************/

.btnBlue { padding: 10px 30px; color:#fff; display: inline-block; background-color: #2e4da7; font-weight: 500; font-size: 14px; text-align: center; border-radius: 0px; }
.btnBlue:hover { background-color: #233A7D; color:#fff; }

.btnRed { padding: 10px 30px; color:#fff; display: inline-block; background-color: #db2c2c; font-weight: 500; font-size: 14px; text-align: center; border-radius: 0px; }
.btnRed:hover { background-color: #B72424; color:#fff; }

/*******************************************************************/



/* Custom CSS Desing ***********************************************/

.captionCenter { position: relative; text-align: center; margin: 15px 0px; padding-bottom: 15px; font-weight: 900; }
.captionCenter:before { content: ''; position: absolute; width: 30px; height: 2px; bottom: -1px; left: 50%; margin-left: -15px; background-color: #2e4da7; }

.captionLeft { position: relative; text-align: left; margin: 15px 0px; padding-bottom: 15px; font-weight: 900; }
.captionLeft:before { content: ''; position: absolute; width: 30px; height: 2px; bottom: -1px; left: 0%; background-color: #2e4da7; }

.navbar-toggle { border-radius: 0px; border-color: transparent !important; background-color: transparent; }
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover { background-color: transparent; }
.navbar-default .navbar-toggle .icon-bar { background-color: #fff; }
.navbar-toggle.collapsed .icon-bar:nth-child(1) { transform: none; -webkit-transform:none; }
.navbar-toggle.collapsed .icon-bar:nth-child(2) { opacity: 1; }
.navbar-toggle.collapsed .icon-bar:nth-child(3) { transform: none; -webkit-transform:none; }

.navbar-toggle .icon-bar:nth-child(1) { transform: rotate(45deg)translate(4px, 4px); -webkit-transform: rotate(45deg)translate(4px, 4px); -moz-transform: rotate(45deg)translate(4px, 4px); -ms-transform: rotate(45deg)translate(4px, 4px); -o-transform: rotate(45deg)translate(4px, 4px); }
.navbar-toggle .icon-bar:nth-child(2) { opacity: 0; }
.navbar-toggle .icon-bar:nth-child(3) { transform: rotate(-45deg)translate(5px, -5px); -webkit-transform: rotate(-45deg)translate(5px, -5px); -moz-transform: rotate(-45deg)translate(5px, -5px); -ms-transform: rotate(-45deg)translate(5px, -5px); -o-transform: rotate(-45deg)translate(5px, -5px); }

.form-control { border-radius: 0px; border: 2px solid #eeeeee; height: 40px; box-shadow: none; }
.form-control:focus { border-color: #2E4DA7; }

.bread h4 { float: left; }
.breadcrumb { float: right; border-radius: 0px; background-color: transparent; text-align: right; }
.breadcrumb li a { color: white; }
.breadcrumb li.active { color: white; font-weight: 700; }

/*******************************************************************/


/* TRANSITION ******************************************************/

#header .navbar-nav>li>a,
.navbar-default .navbar-toggle .icon-bar,
#main .film-machine .main-box .main-box-img,
#main .film-machine .main-box .main-box-btn,
#main .film-machine .main-box .main-box-text h4:after,
.footer-menu li a {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

/*******************************************************************/



/* HEADER **********************************************************/

#header .header-top {  }
#header .header-top .logo { height: 133px; }
#header .header-top .language { height: 133px; }
#header .header-top .language .lang a { float: left; color: #999; font-weight: 500; }
#header .header-top .language .lang a:after { content: '|'; padding: 0px 8px; }
#header .header-top .language .lang a:last-child:after { display: none; }
#header .header-top .language .lang a.active { font-weight: 700; }


#header .nav-top .navbar-default { margin: 0; background-color: #2e4da7; border-radius: 0px; border: none; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16); }
#header .nav-top .navbar-default .navbar-brand { padding: 0px 15px; }
#header .nav-top .navbar-default .navbar-brand img { height: 35px; margin-top: 6px; }
#header .nav-top .navbar-default .navbar-nav>li>a { color: white; padding: 25px; font-weight: 500; }

#header .nav-top .navbar-default .navbar-nav>li>a:focus,
#header .nav-top .navbar-default .navbar-nav>li>a:hover,
#header .nav-top .navbar-default .navbar-nav>.active>a,
#header .nav-top .navbar-default .navbar-nav>.active>a:focus,
#header .nav-top .navbar-default .navbar-nav>.active>a:hover { background-color: white; color: #2e4da7; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16); transform:translateY(-10px); -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -ms-transform:translateY(-10px); -o-transform:translateY(-10px); }

/*
#header .nav-top .navbar-default .navbar-nav>.dropdown>a,
#header .nav-top .navbar-default .navbar-nav>.dropdown>a:focus,
#header .nav-top .navbar-default .navbar-nav>.dropdown>a:hover { stransform:translateY(0px); -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); }


#header .nav-top .navbar-default .navbar-nav>.open>a,
#header .nav-top .navbar-default .navbar-nav>.open>a:focus,
#header .nav-top .navbar-default .navbar-nav>.open>a:hover { background-color: white; color: #2e4da7; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16); transform:translateY(0px); -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); }
*/
#header .nav-top .navbar-default .navbar-nav .dropdown-menu { padding: 0; border-radius: 0px; border: none; margin-top: -10px; }
#header .nav-top .navbar-default .navbar-nav .dropdown-menu>li>a { padding: 8px 20px; }

#header .nav-top .navbar-default .navbar-nav .dropdown-menu>li>a:focus,
#header .nav-top .navbar-default .navbar-nav .dropdown-menu>li>a:hover { background-color: #2e4da7; color: white; }

/*******************************************************************/


/* MAIN ************************************************************/

#main .banner { position: relative; z-index: 1; }
#main .banner .slider { height: 670px; }

#main .film-machine { position: relative; z-index: 2; }
#main .film-machine .main-box { min-height: 378px; }
#main .film-machine .main-box .main-box-img { position: relative; height: 280px; background-color: white; margin-bottom: 30px; }
#main .film-machine .main-box .main-box-text { padding: 0px 15px; }
#main .film-machine .main-box .main-box-text h4 { position: relative; text-align: center; font-weight: 900; margin: 0; margin-bottom: 15px; padding-bottom: 15px; }
#main .film-machine .main-box .main-box-text h4:after { content: ''; position: absolute; width: 30px; height: 2px; left: 50%; bottom: 0; margin-left: -15px; background-color: #db2c2c; }

#main .film-machine .main-box .main-box-btn { position: absolute; width: 45px; height: 45px; bottom: -22.5px; left: 50%; margin-left: -22.5px; background-color: #db2c2c; border-radius: 50%; text-align: center; line-height: 45px; color: white; font-size: 35px; z-index: 3; }

#main .film-machine .main-box:hover .main-box-img,
#main .film-machine .main-box:hover .main-box-btn { box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16); }

#main .film-machine .film { margin-top: -40px; margin-bottom: 50px; }
#main .film-machine .machine { margin-bottom: 50px; }
#main .film-machine .machine.machine-in { margin-top: -40px; margin-bottom: 50px; }

#main .film-machine .film .main-box .main-box-img { border-bottom: 3px solid #db2c2c; }

#main .film-machine .film .main-box:hover .main-box-img { border-bottom: 3px solid #2e4da7; }
#main .film-machine .film .main-box:hover .main-box-btn { background-color: #2e4da7; }
#main .film-machine .film .main-box:hover .main-box-text h4:after { background-color: #2e4da7; }

#main .film-machine .machine .main-box .main-box-img { border-bottom: 3px solid #2e4da7; }
#main .film-machine .machine .main-box .main-box-btn { background-color: #2e4da7; }
#main .film-machine .machine .main-box .main-box-text h4:after { background-color: #2e4da7; }

#main .film-machine .machine .main-box:hover .main-box-img { border-bottom: 3px solid #db2c2c; }
#main .film-machine .machine .main-box:hover .main-box-btn { background-color: #db2c2c; }
#main .film-machine .machine .main-box:hover .main-box-text h4:after { background-color: #db2c2c; }


#main .news { padding: 30px 0px; }
#main .news .all-news { font-weight: 700; text-decoration: underline; }
#main .news .main-slider-item { }
#main .news .main-slider-item .item-img { width: 100%; }

#main .bread { height: 155px; background-color: #50abf1; }
#main .bread.red { background-color: #db2c2c; }

#main .content { padding-bottom: 20px; }
#main .content .content-body { padding: 30px; margin-top: -40px; background-color: white; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16); }

#main .news-content { padding-bottom: 20px; }
#main .news-content .news-content-body { position: relative; padding: 30px; margin-top: -40px; background-color: white; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16); }
#main .news-content .news-content-body .news-content-item { position: relative; padding-bottom: 15px; margin-bottom: 15px; }
#main .news-content .news-content-body .news-content-item:after { content: ''; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background-color: #ddd; }
#main .news-content .news-content-body .news-content-item:last-child { margin-bottom: 0; padding-bottom: 0; }
#main .news-content .news-content-body .news-content-item:last-child:after { display: none; }
#main .news-content .news-content-body .news-content-item .news-content-left img { width: 100%; }
#main .news-content .news-content-body .news-content-item .news-content-right p.text { height: 95px; overflow: hidden; }
#main .news-content .news-content-body .news-detail-img { float: left; max-width: 50%; margin-right: 15px; margin-bottom: 15px; }
#main .news-content .news-content-body .time { position: absolute; right: 0; top: -24px; color: white; }

#main #product-slide {  }
#main #product-slide .product-item { height: 510px; }
#main #product-slide-thumb { margin-top: 50px; }
#main #product-slide-thumb .owl-item { padding: 10px; }
#main #product-slide-thumb .owl-item.active .slide-thumb { border: 1px solid #555; }
#main #product-slide-thumb .slide-thumb { width: 100%; height: 100px; border: 1px solid #E8E8E8; cursor: pointer; }


/*******************************************************************/




/* FOOTER **********************************************************/

#footer { border-top: 25px solid #ebebeb; }
#footer .footer-col { padding: 30px 0px; background-color: #50abf1; color: white; }
#footer .footer-col a { color: white; }
#footer .footer-title { font-size:20px; font-weight: 700; color: white; border-bottom: 1px solid white; padding-bottom: 15px; margin-bottom: 15px; margin-top: 0px; }
#footer .footer-menu { padding: 0px; margin: 0px; list-style-type: none; }
#footer .footer-menu li {  }
#footer .footer-menu li a { display: block; padding: 3px 0px; }
#footer .footer-menu li a:hover { padding: 3px 0px 3px 3px; }
#footer .footer-social { float: right; padding: 0; margin: 0; list-style-type: none; margin-bottom: 30px; }
#footer .footer-social li { float: left; margin-right: 5px; margin-bottom: 5px; }
#footer .footer-social li a { display: block; }
#footer .footer-social li a i { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; border: 1px solid white; }
#footer .footer-social li a i.fa-facebook { background-color: #3a5898; color: white; }
#footer .footer-social li a i.fa-twitter { background-color: #56adef; color: white; }
#footer .footer-social li a i.fa-instagram { background-color: #49769c; color: white; }
#footer .footer-social li a i.fa-linkedin { background-color: #177eb8; color: white; }
#footer .footer-social li a i.fa-behance { background-color: #1a6ff8; color: white; }
#footer .footer-social li a i.fa-youtube-play { background-color: #cc181e; color: white; }

/*******************************************************************/

/* Responsive ******************************************************/

/* XS */
@media (max-width: 767px) {
    #header .header-top .language { height: 45px; }
    #main .film-machine .film { margin-top: 15px; }
    #header .nav-top .navbar-default .navbar-nav>li>a { padding: 8px 15px; }
    #header .nav-top .navbar-default .navbar-nav .dropdown-menu { margin-top: 0px; }
    #header .nav-top .navbar-default .navbar-nav .dropdown-menu>li>a { color: white; }

    #header .nav-top .navbar-default .navbar-nav>li>a:focus,
    #header .nav-top .navbar-default .navbar-nav>li>a:hover,
    #header .nav-top .navbar-default .navbar-nav>.active>a,
    #header .nav-top .navbar-default .navbar-nav>.active>a:focus,
    #header .nav-top .navbar-default .navbar-nav>.active>a:hover { padding: 8px 20px; transform:none; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; }
    #main .news-content .news-content-body .news-detail-img { width: 100%; }
    #main .bread { text-align: center; }
    #main .bread h4 { float: none; }
    #main .breadcrumb { float: none; }

}

/* SM */
@media (min-width: 768px) and (max-width: 991px) {

}
/* MD */
@media (min-width: 992px) and (max-width: 1199px) {
    .dropdown:hover .dropdown-menu { display: block; }
}

/* LG */
@media (min-width: 1200px) {
    .dropdown:hover .dropdown-menu { display: block; }
}



.buttons:before, .buttons:after {content: ''; display: table;}
.buttons {text-align: right; margin: 20px 0;}

.share-box:before, .share-box:after {content: " "; display: table;}
.share-box {border-top: 1px dotted #ccc; padding-top: 15px; margin-top: 20px; margin-bottom: 20px;}
.share-box p {margin-bottom: 5px;}
.share-box > a {text-indent: -9999px; display: inline-block; margin-right: 5px;}
.share-box > a.facebook {background: url(../img/share-facebook.png) no-repeat; width: 88px; height: 25px;}
.share-box > a.twitter {background: url(../img/share-twitter.png) no-repeat; width: 79px; height: 25px;}
.share-box > a.google {background: url(../img/share-google.png) no-repeat; width: 67px; height: 25px;}