@font-face { font-family: 'UTM-Avo'; src: url('../font/UTM-Avo/UTM-Avo.eot'); src: url('../font/UTM-Avo/UTM-Avo.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Avo/UTM-Avo.woff') format('woff'), url('../font/UTM-Avo/UTM-Avo.ttf') format('truetype'), url('../font/UTM-Avo/UTM-Avo.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Banque'; src: url('../font/UTM-Banque/UTM-Banque.eot'); src: url('../font/UTM-Banque/UTM-Banque.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Banque/UTM-Banque.woff') format('woff'), url('../font/UTM-Banque/UTM-Banque.ttf') format('truetype'), url('../font/UTM-Banque/UTM-Banque.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Albertaheavy'; src: url('../font/UTM-Albertaheavy/UTM-Albertaheavy.eot'); src: url('../font/UTM-Albertaheavy/UTM-Albertaheavy.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Albertaheavy/UTM-Albertaheavy.woff') format('woff'), url('../font/UTM-Albertaheavy/UTM-Albertaheavy.ttf') format('truetype'), url('../font/UTM-Albertaheavy/UTM-Albertaheavy.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Androgyne'; src: url('../font/UTM-Androgyne/UTM-Androgyne.eot'); src: url('../font/UTM-Androgyne/UTM-Androgyne.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Androgyne/UTM-Androgyne.woff') format('woff'), url('../font/UTM-Androgyne/UTM-Androgyne.ttf') format('truetype'), url('../font/UTM-Androgyne/UTM-Androgyne.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Colossalis'; src: url('../font/UTM-Colossalis/UTM-Colossalis.eot'); src: url('../font/UTM-Colossalis/UTM-Colossalis.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Colossalis/UTM-Colossalis.woff') format('woff'), url('../font/UTM-Colossalis/UTM-Colossalis.ttf') format('truetype'), url('../font/UTM-Colossalis/UTM-Colossalis.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Cafeta'; src: url('../font/UTM-Cafeta/UTM-Cafeta.eot'); src: url('../font/UTM-Cafeta/UTM-Cafeta.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Cafeta/UTM-Cafeta.woff') format('woff'), url('../font/UTM-Cafeta/UTM-Cafeta.ttf') format('truetype'), url('../font/UTM-Cafeta/UTM-Cafeta.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Thuphap'; src: url('../font/UTM-Thuphap/UTM-Thuphap.eot'); src: url('../font/UTM-Thuphap/UTM-Thuphap.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Thuphap/UTM-Thuphap.woff') format('woff'), url('../font/UTM-Thuphap/UTM-Thuphap.ttf') format('truetype'), url('../font/UTM-Thuphap/UTM-Thuphap.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Flamenco'; src: url('../font/UTM-Flamenco/UTM-Flamenco.eot'); src: url('../font/UTM-Flamenco/UTM-Flamenco.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Flamenco/UTM-Flamenco.woff') format('woff'), url('../font/UTM-Flamenco/UTM-Flamenco.ttf') format('truetype'), url('../font/UTM-Flamenco/UTM-Flamenco.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-AlterGothic'; src: url('../font/UTM-AlterGothic/UTM-AlterGothic.eot'); src: url('../font/UTM-AlterGothic/UTM-AlterGothic.eot?#iefix') format('embedded-opentype'), url('../font/UTM-AlterGothic/UTM-AlterGothic.woff') format('woff'), url('../font/UTM-AlterGothic/UTM-AlterGothic.ttf') format('truetype'), url('../font/UTM-AlterGothic/UTM-AlterGothic.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'UTM-Aptima'; src: url('../font/UTM-Aptima/UTM-Aptima.eot'); src: url('../font/UTM-Aptima/UTM-Aptima.eot?#iefix') format('embedded-opentype'), url('../font/UTM-Aptima/UTM-Aptima.woff') format('woff'), url('../font/UTM-Aptima/UTM-Aptima.ttf') format('truetype'), url('../font/UTM-Aptima/UTM-Aptima.svg#UTM-alter') format('svg'); font-weight: normal; font-style: normal;}



html, body, div, span, h1, h2, h3, h4, h5, h6, p,a, em, img, strong, ol, ul, li { margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent; text-decoration:none; font-size:14px; font-family: "UTM-Avo"; color: white;}
body { padding:0 0; position: relative; background: black;}
@media screen and (max-width: 991px){
    html, body, div, span, h1, h2, h3, h4, h5, h6, p,a, em, img, strong, ol, ul, li { margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent; text-decoration:none; font-size:14px; font-family: "UTM-Avo"; color: white;}
}

.dropdown-backdrop { display: none !important; }

::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}

.padi0 { padding:0;}
.padi01 { padding:0 1px;}
.padi05 { padding:0 5px;}
.padi010 { padding:0 10px;}
.padi015 { padding:0 15px;}
.padi6060 { padding: 60px 0; }
.padi-top30 { padding-top: 30px; }
.padi-bot30 { padding-bottom: 30px; }
.padi-bot60 { padding-bottom: 60px; }
.magi0 { margin:0; }
.magi10 { margin-top: 10px; }
.magi20 { margin-top: 20px; }
.magi30 { margin-top: 30px; }
.magi10-0 { margin-top: 10px; }
.posi_re { position:relative; }

@media screen and (max-width: 991px){
    .padi-bot60 { padding-bottom: 30px; }
    .magi10-0 { margin-top: 0; }
}

.TeCenter { text-align: center !important; }
.TeRight { text-align: right !important; }
/*End_Title*/

/*Index*/
.wi100 { width: 100%; float: left;}
.index_01 { width: 100%; float: left; background: url(../images/bg_1.jpg) repeat;}
/*End_Index*/

.fl { float: left;}
.fr { float: right;}

a:hover {text-decoration: none !important;}


.container-1280 {max-width: 100%; width: 1650px; padding-right:0px; padding-left:0px; margin-right:auto; margin-left:auto;}
@media screen and (max-width: 1680px){
    .container-1280 { width: 100%; max-width: 1440px; }
}
@media screen and (max-width: 1470px){
    .container-1280 { max-width: 1270px; width: 100%; }
}
@media screen and (max-width: 1310px){
    .container-1280 { max-width: 910px; width: 100%; }
}
@media screen and (max-width: 1080px){
    .container-1280 { max-width: 704px; width: 100%; }
}
@media screen and (max-width: 767px){
    .container-1280 { max-width: 538px; width: 100%; padding-right:15px; padding-left:15px; border:none; }
}



#back-to-top {
    position: fixed; z-index: 9999; text-align: center;
    width: 32px; height: 32px; bottom: 85px; right: 10px;
    line-height: 30px; cursor: pointer; border: 0; border-radius: 2px;
    background: #f5f5f5; color: #444; text-decoration: none; transition: opacity 0.2s ease-out; opacity: 0;
}
#back-to-top:hover { background: #e9ebec;}
#back-to-top.show { opacity: 1;}
#content { height: 2000px;}


.index_background_01 { width:100%; float:left; background:url(../images/bg-home-01.png) no-repeat top right #020411; background-position:top right; }
.index_background_02 { width:100%; float:left; background:url(../images/bg-home-02.png) no-repeat top left #020411; background-position:top left;}
.index_background_05 { width:100%; float:left; background:url(../images/bg-home-03.png) no-repeat top left #020411; background-position:bottom left;}
.index_padibot120 { width:100%; float:left; padding-bottom:120px; } 
.index_background_03 { width:100%; float:left; background:#161824;}
.index_background_04 { width:100%; float:left; background: #020411;}
.noise { width:100%; float:left; background:url(../images/noise.png) repeat;}
.Border01 {width:1px; height:100%; left:0; background: white; margin-left:25%; position: absolute; opacity: .2; z-index: -1;}
.Border02 {width:1px; height:100%; right:-1px; background: white; position: absolute; opacity: .2}
.BorderRight { width:100%; float:left; position: relative; z-index: 0;}

.navbar { width: 100%; height: 98px; float: left; margin-bottom:0; position: fixed; z-index: 100; background: none;}
.navbar:hover { background:#020411; }
.navbar-fixed-top { padding-bottom: 0; background: #05050d; top: 0 !important; border-bottom: none; z-index: 100;}
.bg-header { width:100%; height:99px; float:left;}
.navbar:hover .BorderRight { border:none; }
/*------------------------------Header---*/
.header-menu { width:100%; height: 98px; float:left; border-bottom: 1px solid #888; position: relative;}
.navbar-fixed-top .header-menu { border-bottom: none; }
/*------------------------------*/
.logo { width: calc(25% - 10px); height:100%; float: left; -webkit-transition: all .6s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease;}
.logo a { width:182px; height: 68px; float: left; margin-top: 15px; -webkit-transition: all .6s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease;}
.logo a img { width: 100%; float: left; -webkit-transition: all .6s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease;}
.logo a img.logo_mobile { display:none; }
/*------------------------------*/
.language { width:59px; float: right; margin-top: 35px; margin-right: 10px; -webkit-transition: all .6s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease;}
.language a { float:left; font-size:13px; text-transform:uppercase; color: white; letter-spacing: 1.5px; line-height: 22px;}
.language p { float:left; color:white; padding:0 5px; font-size:10px; line-height:22px; }
.get_it { width:170px; float:right; margin-top:34px; }
.get_it ul { list-style:none; }
.get_it a { display: inline-flex; font-size: 13px; font-weight: bold;letter-spacing: 1.5px;text-transform: uppercase;color: #fffffa;background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.get_it a:before {content: "";display: inline-block;width: 6px;height: 6px;margin: 7px;background-color: #cfff15;}
/*------------------------------*/
.menu { float: left; width: calc(75% - 259px);}
.menu ul { list-style: none;}
.menu > ul { height: 100%; float: left;}
.menu > ul > li {   height: 100%; float: left; padding: 0 25px 0 0; position: relative;}
.menu > ul > li > a { height:96px; float: left; padding: 0 10px 0; color: white; font-size: 14px; font-family: "arial"; position: relative; font-weight: bold; line-height: 96px; letter-spacing: 1.5px; text-transform: uppercase;}
.menu > ul > li > a:hover {
    color: #fffffa;
    background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.menu > ul > li > a > span { height:2px; width:0; background: white; position: absolute; left: 50%; bottom: 0; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease;}
.menu > ul > li:hover span, .menu > ul > li.active span {width: 100%; left: 0;}
/*------------------------------*/
.menu > ul > li > ul.menu_c2_01 { width:1000px; height:0px !important; overflow: hidden; position: fixed; top: 100px; left: 50%; margin-left: -500px; opacity: 0; background: none; padding:0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
.menu > ul > li:hover > ul.menu_c2_01 { width:100%; height: auto !important; top:98px; opacity:1; background:#020411; left: 0; margin-left: 0; padding-bottom: 30px;}
.menu > ul > li > ul.menu_c2_01 > li { width:100%; float: left;}

.div20 { width:20%; float:left; padding: 0 15px; margin-top: 30px;}
.div40 { width:40%; float:left; padding: 0 15px; margin-top: 30px;}
.bordertop { width:100%; float:left; padding:0 15px;}
.bordertop > p { width:100%; height:1px; float:left; background:#999; }
.box-wwd { width:100%; float:left; }
.box-wwd > a { width:100%; float:left; }
.box-wwd > a > img { width:100%; float:left; }
.box-wwd > a > p { width:100%; float:left; color:white; margin-top:5px; }
.box-wwd > a:hover p { display: inline-flex; color: #fffffa; background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.box-wwd-link { width:100%; float:left; }
.box-wwd-link > p { width:100%; float:left; color:white; opacity:.6; text-transform:uppercase;}
.box-wwd-link > ul { width:100%; float:left; column-count:2; }
.box-wwd-link > ul > li { width:100%; float:left;}
.box-wwd-link > ul > li > a { width:100%; float:left; color:white; margin-top:18px; }
.box-wwd-link > ul > li > a:hover { display: inline-flex; color: #fffffa; background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
/*------------------------------*/
.menu > ul > li > ul.menu_c2_02 { width:240px; height: 0px; overflow: hidden; position: absolute; top: 100px; left: 25px; opacity: 0; background: none; padding: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
.menu > ul > li:hover > ul.menu_c2_02 { top:97px; left: -5px; opacity:1; height: auto; background:#020411; padding: 24px 0; border-top:1px solid #999;}
.menu > ul > li > ul.menu_c2_02 > li { width:100%; float:left; padding:6px 30px;}
.menu > ul > li > ul.menu_c2_02 > li > a { 
    display: inline-flex; font-size: 13px; font-weight: bold;
    letter-spacing: 1.5px;
    color: white;
    background: linear-gradient(92deg, #ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.menu > ul > li > ul.menu_c2_02 > li > a:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 7px 10px 7px 0;
    background-color: white;
}
.menu > ul > li > ul.menu_c2_02 > li > a:hover {
    display: inline-flex; font-size: 13px; font-weight: bold;
    letter-spacing: 1.5px;
    color: #fffffa;
    background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.menu > ul > li > ul.menu_c2_02 > li > a:hover:before {background-color: #cfff15;}
/*------------------------------*/
header { display: none;}
a.drawer-menu-item { position:relative; width:100%; float:left;}
span.number { width:25px; height:30px; float:left; color:white; font-size:12px; line-height:26px !important; opacity:.6; }
span.tmenu { height: 30px; float:left; font-size:22px; color:white; font-family:"arial"; text-transform:uppercase; }
.drawer-menu li:hover span.tmenu , .drawer-menu li.open span.tmenu {
    color: #fffffa;
    background: linear-gradient(92deg, #e9792f, #fde14d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
span.tmenu:before {
    content: "_";
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
}
ul.drawer-menu { padding:20px 15px !important; }
li.drawer-dropdown { padding:20px 0 }
li.drawer-dropdown p {position: relative;float: right;width: 30px;height: 30px;background: none;border: none;outline: none;right: 0;}
li.drawer-dropdown p span { width:20px; height:2px; position: absolute; background: white; top:50%; margin-top: -1px; right: 0; transition: all 0.3s linear;}
li.drawer-dropdown p span.span_2 {transform: translate(-50%, -50%) rotate(90deg); margin-right: -10px; }
li.open p span.span_2 {transform: translate(-50%, -50%) rotate(0deg) !important; margin-top: 0; }

ul.drawer-dropdown-menu { width:100%; float:left; border-top: 1px solid white; margin-top: 10px;}
ul.drawer-dropdown-menu li { width:100%; float:left; padding:20px 0 0 25px; }
ul.drawer-dropdown-menu li a { width:100%; float:left; color:white; font-size:14px; font-weight:bold; font-family:"arial"; }
ul.drawer-dropdown-menu li a:hover {
    color: #fffffa;
    background: linear-gradient(92deg, #e9792f, #fde14d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
ul.drawer-dropdown-menu li p { width:100%; float:left; text-transform:uppercase; font-size:12px; color:white; opacity:.6; font-family:"arial"; padding-top:10px; }

@media screen and (max-width: 767px){
    li.drawer-dropdown { padding:10px 0 }
    span.tmenu { font-size:16px;}
    ul.drawer-dropdown-menu li { padding:10px 0 0 25px; }
    ul.drawer-dropdown-menu li a { font-size:12px;}
    ul.drawer-dropdown-menu li p { font-size:10px;}
}

/*------------------------------*/
.index-banner { width:100%; float:left; border-bottom:1px solid #999; }
.banner-home { width:100%; float:left; position:relative; }
.banner-home img { width:100%; float:left; }
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media screen and (max-width: 1500px){
    
    .menu > ul > li { padding: 0;}
}
@media screen and (max-width: 1310px){
    .Border01 { margin-left:38%;}
    .drawer-menu { width: 940px; max-width:100%; display: table; margin: 0 auto !important;}

    header { display: block;}
    .menu { display:none; }
    .get_it { width:cauto; float:left; margin-top:34px; margin-left: 14%;}
    .get_it ul { display:table; margin:0 auto; }
    .language { margin-right:60px; }

    .drawer--right .drawer-nav {
        height: calc(100% - 99px) !important;
        top: 99px !important;}  
}
@media screen and (max-width: 1080px){

    .drawer-menu { width: 734px;}

    .main_right_header { width:90px; height:40px; top:40px; left:0; margin-left:0;}
    .navbar_properties .main_right_header { top:20px; } 
    .main_right_header .search { width:20px; margin-top: 10px; margin-left: 10px;}
    .search a.search_des { display:none; } 
    .search a.search_mob { display:block;}
    .main_right_header .language { width:40px; float:right;}

    .navbar-fixed-top .logo a { top: 20px; }/*16/10/23*/

    .navbar-fixed-top .main_right_header { width:90px; height:40px; top:20px; left:0; margin-left:0;}
    .navbar-fixed-top .main_right_header .search { width:20px; margin-top: 10px; margin-left: 10px;}
    .navbar-fixed-top .search a.search_des { display:none; } 
    .navbar-fixed-top .search a.search_mob { display:block;}
    .navbar-fixed-top .main_right_header .language { width:40px; float:right;}
    

    /*------------------------------*/
    .menu { display: none;}
}

@media screen and (max-width: 767px){
    .Border01 { display:none;}

    .drawer-menu { width: 538px;}

    .navbar { height: 70px;}
    .bg-header { height:71px;}
    .header-menu { height: 70px;}

    .logo { width: 50px; height:100%;}
    .logo a { width:50px; height: 100%; margin-top: 10px;}
    .logo a img.logo_mobile { display:block; }
    .logo a img.logo { display:none; }

    .get_it { width:calc(100% - 199px); margin-left: 15px; margin-top: 21px;}
    .language { margin-top:22px; }

    .drawer--right .drawer-nav {
        height: calc(100% - 71px) !important;
        top: 71px !important;}

    .drawer-hamburger { top:25px !important;}
    
}
@media screen and (max-width: 538px){
    .navbar .BorderRight { width: 100%; }
    .drawer-menu { width: 100%; padding: 0 15px !important;}
    
}
/*------------------------------------------------------------------------------------------------------------------------*/


.title-01 { width:100%; float:left; margin-top:100px; }
.title-01 > a { width:100%; float:left; text-transform: uppercase;}
.title-01 > a > span { float:left; color:white; font-size:16px; letter-spacing: 1.5px; font-weight: bold;}
.title-01 > a > span.icon-01 { width:6px; height:6px; background:white; float:left; margin:10px 0 0 10px; }

.title-02 { width:100%; float:left; margin-top:20px; }
.title-02 > a { width:100%; float: }
.title-02 > a > span { float:left; color:white; font-size:62px; text-transform:uppercase; letter-spacing: 1.5px; font-weight: bold;}
.title-02 > a > span:after {content: "_";}

.title-03 { width:100%; float:left; margin-top: 10px;}
.title-03 > a { float:left; color:white; font-size:34px; text-transform:uppercase; letter-spacing: 1.5px; font-weight: bold; margin-right: 15px;}
.title-03 > a > span { 
    padding-top: 10px;
    font-size:34px; 
    color: #fffffa;
    background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.content-01 { width:100%; float:left; margin-top:30px; }
.content-01 p { width:100%; max-width:623px; float:left; color:white; font-size:19px; }
a.view-01 { width:100%; float:left; margin-top:30px; cursor: pointer; }
a.view-01 span { font-size: 22px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid #4e97f7;
    padding-bottom: 5px;
    padding-top: 10px;
    background: linear-gradient(90deg, #61b5b6, #2a99ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
a.view-01 i { font-size:22px; margin-left:10px; }
a.view-01:hover span { border-bottom: 1px solid white; background: linear-gradient(90deg, white, white);-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
a.view-01:hover i { color:white; }


.boxWWD { width: 33.33%; float:left; padding:0 15px; }
.WWWD { width:100%; float:left; background:#161824; margin-top:50px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
.WWWD a { width:100%; float:left; padding:40px; min-height:520px; }
.WWWD a img { max-width:100%; display:table; margin:0 auto; }
.WWWD a h3 { width:100%; float:left; color:white; font-size:24px; font-weight:bold; margin-top:30px; line-height:30px; font-family: "arial"}
.WWWD a p { width:100%; float:left; color:white; font-size:16px; margin-top:15px; line-height:24px; }


.WWWD-01:hover {
    background: rgb(178,76,37);
    background: linear-gradient(135deg, rgba(207,255,21,1) 0%, rgba(2,83,16,1) 100%);
}
.WWWD-02:hover {
    background: rgb(73,153,141);
    background: linear-gradient(135deg, rgba(207,255,21,1) 0%, rgba(2,83,16,1) 100%);
}
.WWWD-03:hover {
    background: rgb(39,83,178);
    background: linear-gradient(135deg, rgba(207,255,21,1) 0%, rgba(2,83,16,1) 100%);
}

@media screen and (max-width: 1310px){
    .boxWWD { width: 100%;}
    .WWWD { max-width:602px; }
    .WWWD a { min-height:auto; }
}
@media screen and (max-width: 1080px){
    .boxWWD { width: 100%;}
    .WWWD { max-width:440px; }
}
@media screen and (max-width: 767px){
    .WWWD { max-width:100%; }
    .title-01 > a > span {font-size:16px;}
    .title-02 > a > span {font-size:43px;}
    .title-03 > a, .title-03 > a > span {font-size:26px;}
    .content-01 p { font-size:14px; }

    a.view-01 span { font-size: 14px;}
}

.title-04 { width:100%; float:left; margin-top:30px; }
.title-04 > a { float:left; color:white; font-size:36px; text-transform:uppercase; letter-spacing: 1.5px; font-weight: bold; margin-right: 15px; }
.title-04 > a:after {content:"_"}

.mgtop0 { margin-top:0 !important; }

.list-lv { width:100%; float:left; margin-top: 60px;}
.box-lv01 { width:50%; height: 435px; float:left; padding:0 15px; overflow:hidden; }
.box-lv02 { width:50%; height: 435px; float:left; padding:0 15px; overflow:hidden; }
.box-lv03 { width:100%; height:125px; float:left; margin:30px 15px 0 15px; overflow:hidden; }
.box-lv { width:100%; height: 100%; float:left; position:relative;}
.box-lv img { min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: var(--card-p-y) var(--card-p-x);}
.box-lv p { width:100%; position:absolute; z-index:10; bottom:30px; left:30px;}
.box-lv span.icon { color:#ccc; font-size:12px; }
.box-lv span.icon:after {    content: "__"; margin-left: 10px;}
.box-lv span.text { width:100%; float:left; color:white; font-weight:bold; font-size:22px; }

@media screen and (max-width: 1310px){
    .box-lv01 { width:100%; height: auto; float:left; padding:0 15px; overflow:unset; }
    .box-lv02 { width:100%; height: auto; float:left; padding:0; overflow:unset; margin-top:30px; }
    .box-lv03 { width:100%; height: auto; float:left; margin:30px 0 0 0; overflow:hidden; }
    .box-lv01 > .box-lv { height:500px; }
    .box-lv02 > .box-lv { height:500px; }
    .box-lv03 > .box-lv { height:200px; }
    .box-lv { overflow:hidden; }
}
@media screen and (max-width: 767px){
    .box-lv01 > .box-lv { height:300px; }
    .box-lv02 > .box-lv { height:300px; }
    .box-lv03 > .box-lv { height:150px; }
    .title-04 > a { font-size:24px; }
}

.content-02 { width:75%; float:right; margin-top:30px; }
.content-02 p { width:100%; max-width:623px; float:left; color:white; font-size:19px; }
@media screen and (max-width: 1310px){
    .content-02 { width:62%;}
}
@media screen and (max-width: 767px){
    .content-02 { width:100%;}
    .content-02 p { font-size: 14px;}
}

.content-03 { width:100%; float:left; margin-top:60px; }






/*------------------------------------------------------------------------------------------------------------------------*/
.main_content { width:100%; float:left; position:relative;}
.main_title_home {width: 100%; float: left; position: relative;}
.bg_text_left { width:20px; height:620px; position:absolute; left:0; bottom:0; z-index: 1;}
.bg_text_left > p {
    color: white;
    font-size: calc(.5rem + 2 * ((100vw - 20rem) / 960));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    display: block;
    line-height: .75rem;
    transform: rotate(-180deg);
    writing-mode: vertical-lr;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -6px;
    margin-top: -100px;
    height: 400px;}

.bg_light_right { width:120px; height:260px; position:absolute; top:0; right:0; background:url(../images/light-blue.png) repeat; }

.title_01 { width:100%; float:left; margin: 125px 0;}
.title_01 > p { float: left; width: 100%; font-size: 45px; line-height: 54px; font-family: "UTM-Aptima"; color: #243264; font-weight: bold; position: relative; padding-left:15px;}
.title_01 > p:before { background: #203367;
    content: "";
    top: 16px;
    left: 0;
    position: absolute;
    width: 1px;
    height: calc(100% - 10px);}
@media screen and (max-width: 1310px){
    .bg_text_left { display:none; }
}
@media screen and (max-width: 991px){
    .bg_light_right { display:none; }

    .title_01 { margin: 75px 0;}
    .title_01 > p { font-size: 40px; line-height: 50px;}
    .title_01 > p:before { height: calc(100% - 20px);}
}
@media screen and (max-width: 767px){
    .title_01 { margin: 60px 0;}
    .title_01 > p { font-size: calc(1.875rem + 15 * ((100vw - 20rem) / 960)); line-height: 1.2em;}
}





.main_content_home_04 { 
    width:100%; float:left; position:relative; float: left; 
    background: url(../images/bgtext.jpg) no-repeat bottom #020411;
    background-size: 100%;
}

.main_home_04 { width:100%; height: 700px; float:left; position:relative; overflow:hidden;}
.listpronew { width: 100%; float: left; position: absolute; left: 50%; margin-left: -825px;}
.listpronew li { width: 100%; float: left; float: left; padding: 0; margin:0;}
.listpronew li div.pronew { padding:0 22px; float: left; width: 100%;}
.listpronew li div.pronew div.pronew-1 { float: left; width: 100%;}
.listpronew li div.pronew div.pronew-1 > a { width:100%; height:100%; float:left;}
.listpronew li div.pronew div.pronew-1 > a > span.pic { 
    width:100%; height: 500px; float:left; padding:20px;
    padding:10px;
    color:#fff;
    margin:0 auto;
    position:relative;}
.listpronew li div.pronew div.pronew-1 > a > span.pic img {
    margin:auto;
    position:absolute;
    top:0; left:0; right:0; bottom:0; max-width:80%; max-height: 80%;}
.listpronew li div.pronew div.pronew-1 > a > span.tit { width:100%; float:left; text-align:left; color:white; margin-top:20px; font-size:2.1875rem; text-transform:uppercase; font-weight:bold; }
.listpronew li div.pronew div.pronew-1 > a > p { 
    width:100%; float:left; text-align: left; font-size:26px ; font-family:"UTM-Aptima"; color:#999;margin-top:20px; 
    line-height: 32px;}
.listpronew li div.pronew div.pronew-1 > a > p:after { content:"_" }
.clearout { height:20px; clear:both; }

#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {display:none;}
.listpronew .nbs-flexisel-container { position:relative;max-width:100%;}
.listpronew .nbs-flexisel-ul {position:relative;width:99999px;margin:0px;padding:0px;list-style-type:none; text-align:center;  overflow: auto; padding-bottom: 70px;}
.listpronew .nbs-flexisel-inner {position: relative;overflow: hidden;float:left;width: 100%;}
.listpronew .nbs-flexisel-item {float:left;margin:0px;padding:0px;cursor:pointer;position:relative;line-height:0px;}
.listpronew .nbs-flexisel-nav-left,.nbs-flexisel-nav-right {width: 22px;height: 40px; position: absolute;cursor: pointer;z-index: 1;opacity: 1;}
.listpronew .nbs-flexisel-nav-left {top: 50% !important; margin-top:-80px; left: 22px; background: url(../images/prev.png);}
.listpronew .nbs-flexisel-nav-right {top: 50% !important; margin-top: -80px; right: 34%; background: url(../images/next.png);}

@media screen and (max-width: 1680px) {
    .listpronew { margin-left: -742px;}
}
@media screen and (max-width: 1470px) {
    .listpronew { margin-left: -656px;}
}
@media screen and (max-width: 1310px) {
    .main_home_04 { height: 610px;}
    .listpronew { margin-left: -476px;}
    .listpronew li div.pronew div.pronew-1 > a > span.pic { height:400px;}
}
@media screen and (max-width: 1080px) {
    .main_home_04 { height: 480px;}
    .listpronew { margin-left: -374px;}
    .listpronew li div.pronew div.pronew-1 > a > span.pic { height:300px;}
}

@media screen and (max-width: 767px) {
    .main_home_04 { height: 480px;}
    .listpronew { margin-left: 0; left: 0}
    .listpronew li div.pronew div.pronew-1 > a > span.pic { height:300px;}
    .listpronew .nbs-flexisel-nav-right { right: 22px;}
}



.busi-img { width:45%; padding: 0 15px; float:left; margin-top:60px;}
.busi-img img { width:100%; float:left; }

.busi-text { width:55%; padding: 0 15px; float: left;}
.bg-busi-text { width:100%; loat:left; margin-top:60px; padding-top:120px; 
    background: url(../images/busi-bg.png) no-repeat top right; background-size:500px;
    background-size:400px; }
.bg-busi-text p { width:100%; float:left; margin-top:10px; color:white; font-size:16px; }
.textright { text-align:right; }
.height120 { width:100%; height:120px; float:left; }

.view-02 { width:100%; float:left; padding: 60px 0;}
.view-02 svg { float:right; margin-top:58px; margin-right:40px; }
.view-02 p { width: calc(100% - 150px); float:left; text-transform: uppercase;}
.view-02 p span {
    float: right;
    margin-right: 50px;
    color: white;
    font-size: 57px;
    text-align: right;
    letter-spacing: 5px;
}
.view-02 p span.vn {
    float: right;
    margin-right: 50px;
    color: white;
    font-size: 36px;
    text-align: right;
    letter-spacing: 5px;
    margin-top: 40px;
}
/*.view-02 p span:after { content:"_" }*/
.view-02 .letchat { width:150px; float:right; margin-top:57px }
.view-02 .letchat a { width:100%; text-transform: uppercase;
     height: 60px; float: right; display:block; text-align:center; line-height:60px; 
    color:white; font-family: "arial";
    background: rgb(43,65,165);
    background: linear-gradient(225deg, rgba(43,65,165,1) 0%, rgba(43,65,165,1) 100%);
}
.view-02 .letchat a:hover { 
    background: rgb(205,210,132);
    background: linear-gradient(45deg, rgba(205,210,132,1) 0%, rgba(49,78,170,1) 100%);
}

@media screen and (max-width: 1310px) {
    .view-02 p span { font-size:38px; margin-right:30px; }
    .view-02 p span.vn { font-size:24px; margin-right:30px; margin-top:22px; }
    .view-02 .letchat { margin-top:24px }
    .view-02 svg { margin-top:28px; margin-right:20px; }
}


@media screen and (max-width: 1080px) {
    .busi-img { width:100%;}
    .busi-text { width:100%;;}
    
    .view-02 p { width:100%;}
    .view-02 p span { width:100%; margin: 0; text-align: center;}
    .view-02 p span.vn { width:100%; margin: 0; text-align: center;}

    .view-02 .letchat { width:100%; float:left;}
    .view-02 .letchat a { width:150px;
     height: 60px; float: unset; display:table; text-align:center; margin: 0 auto;}

      .view-02 svg { display:none; }
}

@media screen and (max-width: 767px) {
    .view-02 p span { font-size: 30px;}
    .height120 { height:20px; }
}


.main_footer_in { width:100%; float:left; background:url(../images/bg-footer.png) no-repeat right bottom; background-size:80%; padding-bottom:40px; border-top:1px solid #777; }

.box-01 { width:25%; float:left; }
.box-02 { width:25%; float:left; }


.box-footer { padding:0; margin-top:30px; }
.box-footer > p { width:100%; float:left; color:white; font-weight:bold; font-size:16px; text-transform:uppercase; }
.box-footer > ul { list-style:none; width:100%; float:left; margin-top:20px; }
.box-footer > ul > li { width:100%; float:left; margin-top:10px; }
.box-footer > ul > li > a { width:100%; float:left; color:#cdcdcc; font-size:14px; }
.box-footer > ul > li > a:hover { color:white; }

.box-copy { width:100%; float:left; margin-top:30px; }
.copy_footer { width:calc(100% - 240px); float:left; margin-top:30px; }
.copy_footer p { color:white; font-size:14px; }
.follow_us { width:240px; float:right; margin-top: 15px;}
.follow_us ul { list-style:none; }
.follow_us ul li { width:50px; height:50px; float:left; margin-left:10px; }
.follow_us ul li img { width:100%; float:left; }
@media screen and (max-width: 1470px) {
    .box-01 { width:25%;}
}
@media screen and (max-width: 1310px) {
    .box-01 { width:38%;}
    .box-02 { width:20%;}
}
@media screen and (max-width: 1080px) {
    .box-01 { width:34%;}
    .copy_footer {
        margin-top: 16px;
    }
}
@media screen and (max-width: 1080px) {
    .box-01 { width:50%;}
    .box-02 { width:50%;}
    .copy_footer p span { width:100%; float:left; }
    .main_footer_in { background:none; }
}
@media screen and (max-width: 767px) {
    .index_background_05 { background:url(../images/bg-home-03-mobile.png) no-repeat bottom left #020411;}
    .box-footer > p { font-size:12px; }
    .box-footer > ul { margin-top:5px; }
    .box-footer > ul > li { margin-top:5px; }
    .box-footer > ul > li > a { font-size:13px; }

    .follow_us { width:100%; float:left;}
    .follow_us ul { width:240px; display:table; margin:0 auto; text-align:center; }
    .follow_us ul li { margin:0 5px; }


    .copy_footer { width:100%; margin-top: 5px;}
    .copy_footer p span {  text-align: center;}
}


.listproducts {width: 100%; float: left;}
.pronew-2 { width: 33.33%; float: left; padding: 0 15px;}
.pronew-2 > a { width:100%; height:100%; float:left;}
.pronew-2 > a > span.pic { 
    width:100%; height: 500px; float:left; padding:20px;
    padding:10px;
    color:#fff;
    margin:0 auto;
    position:relative;}
.pronew-2 > a > span.pic img {
    margin:auto;
    position:absolute;
    top:0; left:0; right:0; bottom:0; max-width:80%; max-height: 80%;}
.pronew-2 > a > span.tit { width:100%; float:left; text-align:left; color:white; margin-top:20px; font-size:2.1875rem; text-transform:uppercase; font-weight:bold; }
.pronew-2 > a > p { 
    width:100%; float:left; text-align: left; font-size:26px ; font-family:"UTM-Aptima"; color:#999;}
.pronew-2 > a > p:after { content:"_" }

@media screen and (max-width: 1310px) {
    .pronew-2 { width: 50%;}
}
@media screen and (max-width: 767px) {
    .pronew-2 { width: 100%;}
}
/*
.main_content_home_05 { width:100%; height: 792px; float:left; position:relative; float: left; margin-top: 222px;}
.bg_xam_bottom_05 { width:100%; height:50%; position:absolute; bottom:0; background:#f4f5f7; left:0; z-index:0 }
.bg_img_right_05 { width: calc(100% - 100px); height: 100%; float: right; background:#152142; position: absolute; top: 0; right: 0; overflow: hidden;}
.bg_img_right_05 > img { min-width:100%; height:auto; min-height: 100%; float: left; opacity: .35; bottom: 0; right: 0; position: absolute;}

.main_home_05 { width: 100%; height: 100%; float: left;}

.main_home_05 > p { position:absolute; color:white; font-family:"UTM-Aptima"; font-weight: bold; font-size:2.5rem; margin:170px 0 0 50px; }
.main_home_05 > p:before { background: #3965dd;content: "";display: block;top: auto;right: auto;bottom: 0;left: 0;position: absolute;width: 40px;height: 1px;}
.cont_count { width:100%; padding: 0 50px; float: left; margin-top: 340px;}
.boxtquan { width:calc(25% - 50px); float:left; float: left; margin-left: 50px; position: relative;}
.boxtquan:before { background: #fff;content: "";top: 10px;left: -20px;position: absolute;opacity: .3;width: 1px;height: calc(100% - 5px);}
.boxtquan > p { width:100%; float:left; color:white; font-weight:bold; font-family:"UTM-Aptima"; font-size:4rem; }
.boxtquan > span { width:100%; float:left; color:white; font-weight:bold; font-size:15px; margin-top:20px; }

@media screen and (max-width: 1330px) {
    .main_content_home_05 { height:460px; margin-top: 122px;}
    .main_home_05 > p { margin:90px 0 0 40px; }
    .bg_img_right_05 { width: 100%; height: 500px; overflow: hidden;}
    .bg_img_right_05 > img { min-width:100%; height:auto; min-height: 100%;}

    .cont_count { margin-top:250px; }
    .boxtquan > p { font-size: 3rem;}
    .boxtquan > span { margin-top:10px; }
}
@media screen and (max-width: 991px) {
    .main_home_05 > p {font-size: calc(1.75rem + 12 * ((100vw - 20rem) / 960)); width: 100%; text-align: center; margin: 0; margin-top: 90px;}
    .main_home_05 > p:before {left: 0;margin: 0 auto;right: 0;text-align: center; top: 60px;}
}
@media screen and (max-width: 767px) {
    .main_content_home_05 { height:850px; margin-top:122px; }
    .bg_img_right_05 { width:100%; height:850px; }
    .bg_img_right_05 > img { width:auto; height:100%; }
    .cont_count { margin-top:200px; }
    .boxtquan { width:100%; float:left; margin-left: 0; margin-top: 50px}
    .boxtquan:before { display:none; }
    .boxtquan > p, .boxtquan > span { text-align: center;}
}
@media screen and (max-width: 500px) {
    .main_content_home_05 { height: 800px; margin-top:60px; }
    .bg_img_right_05 { height:800px; }
    .cont_count { margin-top:150px; }
}

.main_content_home_06 { width:100%; float:left; position:relative; float: left; background: #f4f5f7; padding: 100px 0;}
.bg_light_right_06 { width:120px; height:160px; position:absolute; top:0; right:0; background:url(../images/pattern-diagonal-lines--blue.png) repeat; }
.main_home_06 { width:100%; float:left; }
.main_home_06 > span { width:100%; float:left;}
.main_home_06 > span > img { width:50px;}
.main_home_06 > p {width: 100%; float: left; text-align: center; font-size: 27px;line-height: 1.3em; color: #243264; font-family: "UTM-Aptima"; font-weight: bold; padding: 30px 0;}
@media screen and (max-width: 1230px) {
    .bg_light_right_06 { display:none; }
}
@media screen and (max-width: 1080px) {
    .main_home_06 > p { font-size:25px; }
}
@media screen and (max-width: 991px) {
    .main_content_home_06 { padding:60px 0; }
    .main_home_06 > span > img { width:32px;}
    .main_home_06 > p { font-size:22px; padding:20px 0; }
}
@media screen and (max-width: 767px) {
    .main_home_06 > p { font-size:calc(1.375rem + 5 * ((100vw - 20rem) / 960));}
}

.main_content_home_07 { width:100%; float:left; position:relative; float: left;}
.bg_xam_top_07 { width:100%; height:50%; position:absolute; top:0; background:#f4f5f7; left:0; z-index:0 }

.main_home_07 { width:calc(100% - 100px); height: 554px; float:right; position:relative; overflow:hidden;}
p.tit_07 { width:100%; float:left; font-size:40px; font-family:"UTM-Aptima"; color:#243264; font-weight:bold; }
p.tit_07:before {   background: #3965dd;content: "";display: block;top: 75px;right: auto;bottom: 0;left: 0;position: absolute;width: 40px;height: 1px;
                    -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease;}
.listpronew1 { width: 110%; float: left; position: absolute; right: -10%; background: #f4f5f7; height: 385px; margin-top: 110px;}
.listpronew1 li { width: 100%; float: left; float: left; padding: 0; margin:0;}
.listpronew1 li div.pronew1 { padding:0 20px 0 0; float: left; width: 100%;}
.listpronew1 li div.pronew1 div.pronew1-1 { float: left; background: white; width: 100%; height: 380px; border-radius: 0; overflow: hidden;}
.listpronew1 li div.pronew1 div.pronew1-1 > a { width:100%; float: left;}
.listpronew1 li div.pronew1 div.pronew1-1 > a > div.imgnews { width: 100%; height: 250px; overflow: hidden; position: relative;}
.listpronew1 li div.pronew1 div.pronew1-1 > a > div.imgnews > img { width:auto; min-height:100%; height:auto; }
.listpronew1 li div.pronew1 div.pronew1-1 > a > div.imgnews > span { width:50px; height:50px; border-radius:25px; background:#3965dd; text-align:center; line-height:50px; color:white; font-family:"arial"; font-weight:bold; position:absolute; right:20px; bottom:20px; font-size:12px;}
.listpronew1 li div.pronew1 div.pronew1-1 > a > p { width:100%; float:left;font-size: 17px; line-height: 25px; font-weight: bold; overflow: hidden; height: 50px; min-height: 50px; margin-top: 20px; color: #243264; padding: 0 20px;}
.listpronew1 li div.pronew1 div.pronew1-1 > a > span { float: right; color:#243264; font-size:17px; margin-top:20px; margin-right:20px; position:relative; }
.listpronew1 li div.pronew1 div.pronew1-1 > a > span:before {    background: #203367; top: 12px;content: "";display: block;opacity: .3;bottom: 0;left: 0;position: absolute;width: 30px;height: 1px;}

#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {display:none;}
.listpronew1 .nbs-flexisel-container { position:relative;max-width:100%;}
.listpronew1 .nbs-flexisel-ul {position:relative;width:99999px;margin:0px;padding:0px;list-style-type:none; text-align:center;  overflow: auto; padding-bottom: 70px;}
.listpronew1 .nbs-flexisel-inner {position: relative;overflow: hidden;float:left;width:100%;}
.listpronew1 .nbs-flexisel-item {float:left;margin:0px;padding:0px;cursor:pointer;position:relative;line-height:0px;}
.listpronew1 .nbs-flexisel-item img {min-width: 100%;height: 100%;cursor: pointer;position: relative;}
.listpronew1 .nbs-flexisel-nav-left,.nbs-flexisel-nav-right {width: 12px;height: 13px; position: absolute;cursor: pointer;z-index: 100;opacity: 1;}
.listpronew1 .nbs-flexisel-nav-left {top: 410px !important; left: 45%; margin-left: -20px; background: url(../images/carousel-arrow-left-blue.png) no-repeat;}
.listpronew1 .nbs-flexisel-nav-right {top: 410px !important; right: 55%; margin-right: -20px; background: url(../images/carousel-arrow-right-blue.png) no-repeat;}

@media screen and (max-width: 1230px) {
    .main_home_07 { width:100%; height: 504px;}
    p.tit_07 { margin-left:40px; }
    p.tit_07:before { left:40px; }
    .listpronew1 { width: 140%; left: -20%; height: 335px; margin-top: 110px;}
    .listpronew1 li div.pronew1 { padding:0 5px 0 5px;}
    .listpronew1 li div.pronew1 div.pronew1-1 { height: 330px;}
    .listpronew1 li div.pronew1 div.pronew1-1 > a > div.imgnews { height: 200px;}
    .listpronew1 .nbs-flexisel-nav-left {top: 360px !important; left: 50%; margin-left: -20px;}
    .listpronew1 .nbs-flexisel-nav-right {top: 360px !important; right: 50%; margin-right: -20px;}
}
@media screen and (max-width: 767px) {
    .main_home_07 { height: 474px;}
    p.tit_07 { margin-left:28px; font-size: calc(1.75rem + 12 * ((100vw - 20rem) / 960)); line-height: 1.2em;}
    p.tit_07:before { left:28px; top:55px; }
    .listpronew1 { width: 180%; left: -40%; height: 335px; margin-top: 80px;}
}
@media screen and (max-width: 500px) {
    .listpronew1 { width: 260%; left: -80%; height: 335px; margin-top: 80px;}
}

/*------------------------------------------------------------------------------------------------------------------------*/




#back-to-top {
    position: fixed; z-index: 9999; text-align: center;
    width: 32px; height: 32px; bottom: 40px; right: 40px;
    line-height: 30px; cursor: pointer; border: 0; border-radius: 2px;
    background: #f5f5f5; color: #444; text-decoration: none; transition: opacity 0.2s ease-out; opacity: 0;
}
#back-to-top:hover {
    background: #e9ebec;
}
#back-to-top.show {
    opacity: 1;
}

@media screen and (max-width: 991px) {
    #back-to-top { bottom: 28px; right: 28px;}
}
@media screen and (max-width: 767px) {
    #back-to-top { bottom: 20px; right: 20px;}
}



.main-01 { width: 100%; height: 100vh; float: left; position: relative;}
.ban1 { width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom; background-size: auto 120%; background-attachment: fixed;}
.ShowBan-01 { min-height: 100%; position: relative;}
.title_banner { width:calc(100% - 40px); position: absolute; left: 20px; top: 50%; margin-top: -100px; z-index: 2;}
.title_banner p.title_banner_01 { display:block; text-align:center;}
.title_banner p.title_banner_01 span { border-bottom:3px solid #8b92a5; padding-bottom:5px; color:white; text-transform:uppercase; font-size: calc(.5rem + 2 * ((100vw - 20rem) / 960)); letter-spacing: 3px; font-weight: bold;}
.title_banner p.title_banner_02 { display: block; text-align: center; font-family: "UTM-Aptima"; color:white; font-weight: bold; font-size: calc(2.5rem + 45 * ((100vw - 20rem) / 960));}
.title_banner p.title_banner_03 { display: block; text-align: center; color:white; margin-top: 20px; font-size: calc(.875rem + 3 * ((100vw - 20rem) / 960));}



.show { width:100%; float:left; margin:30px 0 10px 0; }
.show > p { width:100%; float:left; font-family:"UTM-Aptima"; color:#666e87; padding:0 10px; }
.show > p > span { color:#4364d5; }





.list_properties { width: 100%; float: left; margin-top: 30px;}
.box-properties { width:calc(20% - 20px); float:left; margin:20px 10px 0 10px; padding-bottom: 20px;}
.box-properties > a { width:100%; float:left; position:relative; }
.box-properties > a > span { width:50px; height:50px; border-radius:25px; background:#3965dd; text-align:center; line-height:50px; color:white; font-family:"arial"; font-weight:bold; position:absolute; right:20px; bottom:-25px; font-size:12px; }
.box-properties > a > img { width:100%; float:left; }
.box-properties > a.tit_pro { 
    width:100%; float:left; font-weight: bold; font-size: 16px; height:50px; overflow:hidden; margin-top:10px;
    color: white;
} 
.box-properties:hover > a.tit_pro { 
    color: #fffffa;
    background: linear-gradient(90deg, #e9792f 60%, #fde14d 81%, #33a8d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
} 
.box-properties > a.view_pro { width:100%; float:left; margin-top:10px; display:block; text-align:right; color:white; font-size: 12px;}



.paging { width:100%; float:left; padding: 60px 40px;}
.paging ul { list-style: none; text-align: center; margin: 0 auto; vertical-align: middle;display: table;}
.paging ul li { width:40px; height:40px; border-radius:5px; background:white; float:left; margin:0 2px; }
.paging ul li a { width:100%; text-align:center; line-height:44px; color:#333; }
.paging ul li a img { width:15px; margin-top:12px; }




@media screen and (max-width: 1600px) {
    .box-properties { width:calc(25% - 20px);}
}
@media screen and (max-width: 1080px) {
    .show > p { padding:0 5px;}
    .box-properties { width:calc(33.33% - 10px); margin: 10px 5px 0 5px;}
}
@media screen and (max-width: 1080px) {
    .box-properties > a.tit_pro { font-size: 17px; height: 78px;} 
    .box-properties > a.view_pro { font-size: 14px;}
}
@media screen and (max-width: 767px) {
    .box-properties { width:calc(50% - 10px);}
    .paging ul li { width:30px; height:30px;}
    .paging ul li a { line-height:30px;}
}
@media screen and (max-width: 500px) {
    .box-properties { width:calc(100% - 10px);}
}


.main-02 { width:100%; float:left; position: relative; top: 0; left: 0;}
.title_detail_properties { width: 100%; float: left; padding: 60px 0;}
.title_detail_properties h1 { width:670px; text-align: center; color:white; font-size: calc(2.1875rem + 15 * ((100vw - 20rem) / 960)); font-weight: bold; font-family:"UTM-APtima"; margin:0 auto;}









.main-03 { width: 100%; height: calc(100vh - 200px); float: left; position: relative;}
.ban3 { width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom; background-size: auto 120%; background-attachment: fixed;}
.ShowBan-03 { min-height: 100%; position: relative;}
.title_banner_detail { width:calc(100% - 40px); position: absolute; left: 20px; top: 50%; margin-top: -100px; z-index: 2;}
.title_banner p.title_banner_02_news { display: block; text-align: center; font-family: "UTM-Aptima"; color:white; font-weight: bold; font-size: 50px; line-height: 60px; margin-top: 25px;}
@media screen and (max-width: 1080px) {
    .title_banner p.title_banner_02_news { font-size: 40px; line-height: 50px;}
}
@media screen and (max-width: 767px) {
    .title_banner p.title_banner_02_news { font-size: 30px; line-height: 36px;}
}

.topic { width:100%; float:left; margin-top:30px;}
.topic > p { color:black; font-weight:bold; font-size:12px; font-family:"arial";}
.topic > p > a { background:#e9eaef; color:#4364d5; font-size: 14px; padding:5px 10px; border-radius:5px; font-family:"arial";}

.next_page { width:100%; float:left; margin-top:50px; }
.next_page > ul { list-style:none; }
.next_page > ul > li { width:50%; float:left; padding:20px; border-top:1px solid #ddd; border-bottom: 1px solid #ddd; }
.next_page > ul > li > a { font-size:12px; color:#01114b; font-family:"arial"; font-weight:bold; display:block; }
.next_page > ul > li.next_page_01 { border-right:1px solid #ddd; } 
.next_page > ul > li.next_page_01 > a { text-align:right; display:block; }


p.contact { width:100%; font-size:27px; color:#243264; font-family:"UTM-Aptima"; font-weight:bold; text-align:center; margin-top:30px; position:relative; }
p.contact:before { background: #3965dd;content: "";top: 53px;right: auto;bottom: 0;left: 50%;position: absolute;width: 40px;height: 1px;transform: translateX(-50%);}
.contact { width:100%; float:left; margin-top:50px; }
.contact ul { list-style:none; }
.contact ul li { width:calc(50% - 2px); float:left; margin:0 1px; }
.contact ul li input { width:100%; float:left; background:#f4f5f7; border:none; padding:20px; margin-top:2px; font-weight:bold; color:#182140; font-family:"arial"; font-size:10px; }
.contact ul li input:focus-visible { border:none; }
.contact ul li.last { width:calc(100% - 2px); margin:0 1px; }
.contact ul li textarea { width:100%; height: 400px; float:left; background:#f4f5f7; border:none; padding:20px; margin-top:2px; font-weight:bold; color:#182140; font-family:"arial"; font-size:10px; }







/*---Product Detail---*/

.backtolist { width: 100%; float: left; padding: 40px 0;}
.backtolist a { color:white; text-transform:uppercase; font-size: 10px; letter-spacing: 2px; font-weight: bold;}

.slider {width: 100%;float: left; margin-top: 0;border: none;padding: 0}
li.bigpro {width: 100%;float: left;color: #fff;margin: 0 auto;position: relative;}
li.bigpro img {width: 90%;float: left; margin: 5%;}
ul.slides li.thumbpro {width: 100%;height: 70px;float: left;color: #fff;margin: 0 auto;position: relative;margin: 2px 2px 0 0;padding: 2px; border: 1px solid #333;border-radius: 0;overflow: hidden}
ul.slides li.thumbpro img {margin: auto;max-height: 68px;max-width: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;cursor: pointer}
li.flex-nav-prev, li.flex-nav-next {display: none}

.product-detail { width:100%; float:left;}
.product-detail > h2 { float: left;font-size: 34px;color: #fffffa;
    background: linear-gradient(90deg, #e9792f 60%, #fde14d 81%, #33a8d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.product-detail > h3 { width:100%; float:left; margin-top: 10px;}
.product-detail > h3 p { width:100%; float:left; font-size:26px; color:white; }
.pro-detail-in { width:100%; float:left; margin-top:16px; }
.pro-detail-in p { width:100%; float:left; color:#999; font-family: "arial"}


/*---Giới Thiệu---*/
.gioithieu { width:100%; float:left; padding:60px 0; }



/*---FKC Làm gì---*/

.content-title { width:100%; float:left; padding-top:60px; }
.content-title > h1 { float: left;font-size: 34px;color: #fffffa; padding-top: 10px;
    background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

.content_detail { width:100%; float:left;}
.content_detail > h1 { width:100%; float:left; font-size:27px; font-weight:bold; color:#243264; font-family:"UTM-Aptima"; margin-top:60px; position:relative; padding-bottom:30px; }
.content_detail > p.title_content { width:100%; float:left; font-size:40px; font-weight:bold; color:#243264; font-family:"UTM-Aptima"; margin-top:40px; position:relative; padding-bottom:30px; }
.content_detail > p.title_content:before { background: #3965dd;content: "";display: block;top: 68px;right: auto;bottom: 0;left: 0;position: absolute;width: 40px;height: 1px;}
.content_detail > p { width:100%; float:left; margin-top:10px; }
.content_detail > p > img { max-width:100%; width:800px; margin:0 auto; text-align:center; padding:20px 0; display:block; }
.main_content_home_09 { width:100%; float:left; position:relative; float: left; background: #f4f5f7; padding-top: 40px;}

@media screen and (max-width: 500px) {
    .content_detail { width:100%; float:left; padding:0 20px 40px 20px; }
    .content_detail > p.title_content { font-size:30px; margin-top: 20px;}
}



p.tit_07 { float: left;font-size: 34px;color: #fffffa; margin-top: 60px;
    background: linear-gradient(90deg, #cfff15 60%, #69e015 81%, #158b01);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

.content-002 { width:100%; float:left; padding:60px 0; }
.content-002 > img.avata-cata { width:50%; float:left; padding:0 30px 30px 0; }

@media screen and (max-width: 767px) {
    .content-002 > img.avata-cata { width:100%; padding: 0; padding-bottom: 20px;}
}



p.contact {
    width: 100%;
    font-size: 27px;
    color: #243264;
    font-family: "UTM-Aptima";
    font-weight: bold;
    text-align: center;
    margin-top: 30px;
    position: relative;
}
p.contact:before {
    background: #3965dd;
    content: "";
    top: 53px;
    right: auto;
    bottom: 0;
    left: 50%;
    position: absolute;
    width: 40px;
    height: 1px;
    transform: translateX(-50%);
}
.contact {
    width: 100%;
    float: left;
    margin-top: 50px;
}
.contact ul {
    list-style: none;
}
.contact ul li {
    width: calc(50% - 30px);
    float: left;
    margin: 0 15px;
    background: none;
    border-bottom: 1px solid #333;
}
.contact ul li input {
    width: 100%;
    float: left;
    background: #f4f5f7;
    border: none;
    padding: 20px;
    margin-top: 2px;
    color: #243264 !important;
    font-family: "arial";
    font-size: 15px;
    background: none;
}
.contact ul li.last {
    width: calc(100% - 2px);
    margin: 0 1px;
}
.contact ul li textarea {
    width: calc(100% - 30px);
    margin-left: 15px;
    height: 60px !important;
    float: left;
    background: #f4f5f7;
    border: none;
    padding: 20px;
    margin-top: 2px;
    color: #243264 !important;
    font-family: "arial";
    font-size: 15px;
    background: none;
}
.main_contact_map { width:100%; float: left; margin: 40px 0 90px 0; position: relative;z-index: 1;}
.contact_thongtin { width:50%; float: left; background: #f4f5f8; padding: 40px; padding-left: calc(50% - 570px);}
.contact_thongtin > h1 { width: 100%;
    font-size: 27px;
    color: #243264;
    font-family: "UTM-Aptima";
    font-weight: bold;}
.contact_thongtin > ul { list-style:none; float:left; margin-top:30px; margin-bottom: 30px}
.contact_thongtin > ul > li { width:100%; float:left; margin-top:10px; }
.contact_thongtin > ul > li > p { width:100px; float:left; }
.contact_thongtin > ul > li > span { width:calc(100% - 100px); float:right; }
.contact_maps { width:50%; float:right;}
iframe.maps_contact { width:100%; height: 500px; float: left;}
@media screen and (max-width: 1230px) {
    .contact_thongtin { padding-left: 40px;}
}
@media screen and (max-width: 767px) {
    .contact_thongtin { width:100%; padding: 40px 20px; padding-left: 20px;}
    .contact_maps { width:100%; float:left;}
}
.sc_contact { width:100%; float:left; margin-top:50px; }


.find_more { width:150px; float:right; margin-top:57px; margin-bottom:60px; }
.find_more a { width:100%; text-transform: uppercase;
     height: 60px; float: right; display:block; text-align:center; line-height:60px; 
    color:white; font-family: "arial";
    background: rgb(43,65,165);
    background: linear-gradient(225deg, rgba(43,65,165,1) 0%, rgba(43,65,165,1) 100%);
}
.find_more a:hover { 
    background: rgb(205,210,132);
    background: linear-gradient(45deg, rgba(205,210,132,1) 0%, rgba(49,78,170,1) 100%);
}



.main_content_home_04-01 { 
    width:100%; float:left; position:relative; float: left; 
    background:  #020411;
}

.main_home_04-01 { width:100%; float:left; position:relative; overflow:hidden; margin-top: 30px;}


.listpronew-01 { width: 100%; float: left; margin-top: 30px;}
.listpronew-01 li { width: 100%; float: left; float: left; padding: 0; margin:0;}
.listpronew-01 li div.pronew-01 { padding:0 15px; float: left; width: 100%;}
.listpronew-01 li div.pronew-01 div.pronew-101 { float: left; width: 100%;}
.listpronew-01 li div.pronew-01 div.pronew-101 > a { width:100%; height:100%; float:left;}
.listpronew-01 li div.pronew-01 div.pronew-101 > a > span.pic { 
    width:100%; height: 350px; float:left; padding:20px;
    padding:10px;
    color:#fff;
    margin:0 auto;
    position:relative;}
.listpronew-01 li div.pronew-01 div.pronew-101 > a > span.pic img {
    margin:auto;
    position:absolute;
    top:0; left:0; right:0; bottom:0; max-width:100%; max-height: 100%;}
.listpronew-01 li div.pronew-01 div.pronew-101 > a > span.tit { 
    width:100%; float:left; text-align:left; color:white; margin-top:20px; font-size:22px; text-transform:uppercase; font-weight:bold; 
    line-height: 30px;
}
.listpronew-01 li div.pronew-01 div.pronew-101 > a > p { 
    width:100%; float:left; text-align: left; font-size:22px ; font-family:"UTM-Aptima"; color:#999;margin-top:10px; 
    line-height: 32px;}
.listpronew-01 li div.pronew-01 div.pronew-101 > a > p:after { content:"_" }
.clearout { height:20px; clear:both; }

.listpronew-01 .nbs-flexisel-container { position:relative;max-width:100%;}
.listpronew-01 .nbs-flexisel-ul {position:relative;width:99999px;margin:0px;padding:0px;list-style-type:none; text-align:center;  overflow: auto; padding-bottom: 70px;}
.listpronew-01 .nbs-flexisel-inner {position: relative;overflow: hidden;float:left;width: 100%;}
.listpronew-01 .nbs-flexisel-item {float:left;margin:0px;padding:0px;cursor:pointer;position:relative;line-height:0px;}
.listpronew-01 .nbs-flexisel-nav-left,.nbs-flexisel-nav-right {width: 22px;height: 40px; position: absolute;cursor: pointer;z-index: 1;opacity: 1;}
.listpronew-01 .nbs-flexisel-nav-left {top: 50% !important; margin-top:-80px; left: 15px; background: url(../images/prev.png);}
.listpronew-01 .nbs-flexisel-nav-right {top: 50% !important; margin-top: -80px; right: 15px; background: url(../images/next.png);}

@media screen and (max-width: 1680px) {
}
@media screen and (max-width: 1470px) {
}
@media screen and (max-width: 1310px) {
    .listpronew-01 li div.pronew-01 div.pronew-101 > a > span.pic { height:250px;}
}
@media screen and (max-width: 1080px) {
    .listpronew-01 li div.pronew-01 div.pronew-101 > a > span.pic { height:200px;}
}
@media screen and (max-width: 767px) {
    .listpronew-01 li div.pronew-01 div.pronew-101 > a > span.pic { height:300px;}
}






.contact_left { width:25%; float:left; }
.contact_left p { width:100%; float:left; }
.contact_left p img { float:left; padding:40px 20px; width:80% }
.contact_right { width:75%; float:right; }

@media screen and (max-width: 1310px) {
    .contact_left { display: none;}
    .contact_right { width:100%; float:left; }
}


.box-contact { width:45%; float:left; margin: 10px 10px 0 0; padding: 20px; min-height: 200px;
background: rgb(178,76,37);
    background: linear-gradient(45deg, rgba(40,84,179,1) 0%, rgba(97,168,160,1) 100%);}
.box-contact h1, .box-contact p, .box-contact span { color:#fff; font-family:"arial"; }
.box-contact h1 { width:100%; float:left; font-weight:bold; font-size:20px; padding-bottom:10px; }
.box-contact p { width:100%; float:left; margin-top:5px; font-size:15px; }
.box-contact p span { float:left; font-weight:bold; padding-right:10px; }

@media screen and (max-width: 1080px) {
    .box-contact { width:100%; margin: 10px 0 0 0; padding: 20px; min-height: auto;}
}