/* CSS Document */
html {overflow-x: hidden;}
body {	-webkit-text-size-adjust:100%; font-family: 'Barlow', sans-serif; overflow-x: hidden; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { margin:0; padding:0; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

p, td, li, label {font-size: 16px; line-height: 32px;font-weight: normal;}

.content-Box { max-width:1200px; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:32px; color: #fff; letter-spacing: 0.05rem; padding-top: 130px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 20px;line-height:30px;}

.section-1 { display: flex;flex-direction: row; flex-wrap: nowrap; align-items: center; height: calc(100vh + 10px); background: url(../images/section-1-bg.png) no-repeat top center; background-size: cover;}
.section-1-slogn { padding: 0 8%; position: relative; max-width: 1200px; margin: 0 auto 0 0; width: 100%;}
.section-1-slogn iframe { width: 100%; border-width: 0;}

/*loader*/
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;
}
#loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db;
 -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
 z-index: 1001;
}
#loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c;
 -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

#loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922;
 -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */   animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

#loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222222; z-index: 1000; -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(0);  /* IE 9 */ transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left { left: 0;
}

#loader-wrapper .loader-section.section-right { right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(-100%);  /* IE 9 */
            transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(100%);  /* IE 9 */
            transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;  
            transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
    visibility: hidden;

    -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateY(-100%);  /* IE 9 */
            transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

    -webkit-transition: all 0.3s 1s ease-out;  
            transition: all 0.3s 1s ease-out;
}


.pto-effect { position: relative;overflow: hidden;}
.pto-effect-1, .pto-effect-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.pto-effect-1 { background-color: #263b49; z-index: 4;}
.pto-effect-2 { background-color: #fff; z-index: 3;}

.section-2 { display: flex;flex-direction: row; flex-wrap: wrap; background: #263b49;}
.section-2 > div { display: flex;flex-direction: column; flex-wrap: nowrap;}
.section-2 > div > div:nth-of-type(1) { height: 520px; position: relative;}
.section-2 > div:nth-of-type(1) > div:nth-of-type(1) { overflow: hidden;}
.section-2 > div > div:nth-of-type(2) { height: 434px; position: relative;}
.section-2 > div:nth-of-type(1) { width: 65%;}
.section-2 > div:nth-of-type(2) { width: 35%;}

.loop { line-height: 0;}
.loop .owl-dots { display: none;}
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop .owl-prev { left:30px; }
.loop .owl-next { right:30px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.5;transition: all 0.4s ease-out 0s;width: 50px; height: 50px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff;}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); }
.loop .owl-next:before { content: ""; transform: rotate(45deg);}
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: 10px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #fff !important; width: 13px !important; height: 13px !important; border: 0px solid #4c4c4c;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #620c0b !important; }

.banner-pto { height: 520px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.banner-pto2 { height: 800px; overflow: hidden;}
.banner-pto3 { height: 550px; overflow: hidden; position: relative;}
.banner-pto4 { height: 1084px; }
.banner-pto5 { height: 911px; }
.banner-pto6 { height: 433px;  overflow: hidden; position: relative;}
/*.banner-pto > div { height: 520px;}
.banner-pto img { object-fit: cover; width: 100%; height: 100%;}*/
.banner-pto2 > div { height: 434px;}
.banner-pto3 > div { height: 550px;}
.banner-pto4 > div { height: 1084px;}
.banner-pto5 > div { height: 911px;}
.banner-pto2 img { object-fit: cover; width: 100%; height: 100%;}

.content-type-1 { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 2% 8%; color: #fff;}
.name-type { line-height: 0; margin-bottom: 54px; position: relative; z-index: 10;}
.name-type2 { margin-bottom: 35px; }
.title-bg-1 { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content:flex-end; align-items: center; background: #d1d1d1;}
.title-bg-2 { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content:flex-end; align-items: center; background: #ebebeb; position:absolute; z-index: 10; bottom: 0; left: 0; width: 35%; height: 520px;}
.title-bg-3 { height: 520px; position:absolute; z-index: 10; top: 0; left: 0;background: #d1d1d1;}
.title-bg-4 { top: 0; right: 0; bottom: auto; left: auto;}

.segmentation { display: flex;flex-direction: row; flex-wrap: wrap; height: 50px;}
.segmentation > div:nth-of-type(1) { width: 65%; background: #ebebeb;}
.segmentation > div:nth-of-type(2) { width: 35%; background: #263b49;}

.section-3-top { position: relative;}
.section-3-bottom { display: flex; flex-direction: row; flex-wrap: wrap; background: #3e3731;}
.section-3-bottom > div:nth-of-type(1) { width: 35%;}
.section-3-bottom > div:nth-of-type(2) { width: 65%;}

.R-data { font-size: 20px; color: #ff9c00; line-height: 32px; padding-bottom: 30px;}

.btn-link { color: #fff; text-decoration: none; display: inline-block; border: 1px solid #fff; padding: 2px 8px; margin-top: 8px;}
.btn-link:hover { color: #fff; text-decoration: none; padding: 2px 15px;}

.section-4 { position: relative;height: 1084px;}
.section-4-banner { width: 65%; margin: 0 0 0 auto;}
.section-4-content { width: 65%; position: absolute; z-index: 11; bottom: 0; left: 0; background: #2f2f2f;display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 2% 8%; color: #fff; min-height: 564px;}
.section-4-pto { position: absolute; top:40px; right: 30px; z-index: 3;}

.section-5-content { background: #2271a9;position: relative;}
.section-5-pto { position: absolute; bottom:74px; right: 72px; z-index: 3;}

.section-6-content { background: #352e27}


@media only screen and (max-width: 980px) {
    .section-2 > div:nth-of-type(1) { width: 100%; order: 2;}
    .section-2 > div:nth-of-type(2) { width: 100%; order: 1; position: relative;}
    .section-2 > div:nth-of-type(2) > div:nth-of-type(1) { width:200px; height: 200px; position:absolute; z-index: 2; top: 0; left: 0;}
    .section-2 > div:nth-of-type(2) > div:nth-of-type(1) img { max-width: 100px;}
    .section-2 > div:nth-of-type(1) > div:nth-of-type(1) { height: 350px;}
    .section-2 > div:nth-of-type(1) > div:nth-of-type(2) { height: auto; padding-bottom: 60px; padding-top: 60px;}
    .banner-pto { height: 350px;}
    
    .title-bg-2 { width:200px; height: 200px;}
    .title-bg-2 img { max-width: 100px;}
    
    .section-4 { height: auto;}
    .section-4-banner { width: 100%;}
    .section-4-content { position: inherit; width: 100%; bottom: inherit; left: inherit;padding-bottom: 60px; padding-top: 60px;}
    .banner-pto4, .banner-pto4 > div { height: 450px; }
}
@media only screen and (max-width: 768px) {
    .name-type img { max-width: 250px;}
    .section-3-bottom > div:nth-of-type(1) { display: none;}
    .section-3-bottom > div:nth-of-type(2) { width: 100%; padding-bottom: 60px; padding-top: 60px;}
    
    .section-4-pto {position: inherit; top: inherit; right: inherit; margin-bottom: 25px;}
    
    .section-5-pto {position: inherit; bottom: inherit; right: inherit;}
}
@media only screen and (max-width: 640px) {
    
}
@media only screen and (max-width: 570px) {
	
}

@media only screen and (max-width: 414px) {
	
	

}

@media only screen and (max-width: 320px) {

}