﻿/*body {
	background: #fff url("../images/about.jpg") no-repeat center top;
}*/


.modal {
    width: 64vw;
	 height: 36.4vw;
    padding: 0;
   
}


.modal::-webkit-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}


.modal p , .modal ul{
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
    color: #333;
}

.modal p { margin: 20px auto 0; }
.modal ul { list-style: disc; }

.modal h2 {
    text-align: center;
    font-size: 58px;
    font-weight: 500;
    letter-spacing: -1px;
    margin: 0% auto 0;
    border-bottom: 3px solid rgb(189,193,198);
    line-height: 1.1;
    color: #cd0a0a;
    padding-bottom: 3%;
}

.modal h2 strong{
	font-weight: 900;
	color: #aaaaaa;
}

.modal .button {
  font-size: 18px;
  border: 0;
  cursor: pointer;
  background: #cd0a0a;
  color: #fff;
  font-weight: 700;
  padding: 6px 6px;
  margin: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}



.transparent{
	opacity: 0;
}

.section1 {
    height: 1200px;
	background: url(../images/about_sec1.jpg) no-repeat top center;
}

.sec1Texts {
    font-size: 18px;
    text-align: center;
    color: #fff;
    margin: 22px auto 0;
    width: 72%;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

.sec1-btns {
    display: flex;
    justify-content: space-between;
    max-width: 868px;
    margin: auto;
}

.sec1Btn {
    margin: 34px auto 0;
    width: 426px;
    text-align: center;
}

.sec1-video {
    margin: 38px auto 0;
    max-width: 830px;
    height: 477px;
    border: 12px solid #fff;
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 30px;
}

.world-map {
    margin: 5% auto 0;
    text-align: center;
    max-width: 90%;
}

.world-map img{
    width: 100%;
}
.section2 {
    height: 1094px;
	background: url(../images/about_sec2.jpg) no-repeat top center;
}

.sec2Left {
    width: 50.5%;
    margin-top: 97px;
}

.sec2Titles {
    margin-top: 0;
    float: none;
}

.sec2Title{
	color: #fff;
}

.sec2Texts {
    float: none;
    margin-top: 34px;
    width: auto;
    padding-left: 0;
    color: #fff;
}

.sec2Sep {
    background: #142b45;
}

.section3 {
    min-height: auto;
    /* background: #fff url(../images/about/about_sec3_new.png) no-repeat center bottom; */
    background: #fff;
    /*background: none;*/
    padding-bottom: 7%;
    height: auto;
}

.sec3Titles {
    margin: 154px auto 0;
    /* margin-right: 0; */
    color: #13232e;
    text-align: center;
}

.sec3Title {
    width: auto;
}

.sec3Sep {
    background: #142b45;
    margin: 26px auto 0;
}

.structure-ceo {
    font-size: 30px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(20, 43, 69);
    width: 378px;
    height: 152px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 58px auto 0;
}

.structure-horz-line{
	width: 2px;
	height: 46px;
	background: url("../images/about/structure_hline.png") no-repeat center center;
	margin: 18px auto 0;
}

.structure-departments{
	display: flex;
	
}

.department-manager {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	background-color: rgb(0, 176, 226);
	width: 308px;
	height: 124px;
}

.structure-departments {
    max-width: 85%;
    margin: 15px auto 0;
    display: flex;
    justify-content: space-around;
}

.department-branch {
	width: 80%;
    font-size: 20px;
    color: #142b45;
    display: flex;
    align-items: center;
    min-height: 75px;
    border-bottom: 2px dotted #142b45;
}


ul.sec3Ul {
    margin-right: -24px;
    font-size: 16px;
    color: #13232e;
    margin-top: 81px;
    letter-spacing: 0.5px;
}

ul.sec3Ul li {
    padding-right: 24px;
    background: url(../images/about_sec3ul.png) no-repeat right 7px;
    margin-bottom: 14px;
}

.sec3Box {
    width: 600px;
    height: 238px;
    font-size: 16px;
    font-weight: 700;
    background: #00b0e2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
    margin-right: -50px;
    padding: 0 81px;
    line-height: 2.2;
}


body.white-theme .sec3Box {
    background: #efefef;
}
body.dark-theme .sec3Box {
    background: #333;
}


@media (max-width: 1920px){
	.department-manager {
		font-size: 18px;
		width: 95%;
		padding: 0 4%;
	}
	
	.department-branch {
		width: 86%;
		font-size: 17px;
	}
	
	.structure-department {
		width: 19%;
	}
}

@media (max-width: 1600px){
	
	.structure-departments {
    	max-width: 96%;
	}
	
	.section2 {
		background-position: 63% top;
	}
	
	.sec2Left {
    	width: 46%;
	}
	
}


@media (max-width: 1340px){
	
	ul.sec3Ul {
    	margin-right: 0;
	}
	
	h1, .h1-main-title {
		margin: 12% auto 0;
		width: auto;
		line-height: 1.1;
		letter-spacing: 0.0px;
		font-size: 59px;
	}
	
	.structure-departments {
		max-width: 99%;
	}
	
	.department-manager {
		font-size: 16px;
		width: 100%;
		padding: 0 4%;
	}
	
	.department-branch {
		width: 83%;
		font-size: 15px;
	}
}



@media (max-width: 1060px) {
	.section1 {
		height: auto;
		padding-bottom: 14%;
		background: #001a3f url(../images/about_sec1.jpg) no-repeat center 100px;
		background-size: cover;
	}
	
	h1, .h1-main-title {
		margin: 2% auto 0;
	}
	.sec1-btns {
    	display: block;
	}
	
	
	.sec1Texts {
		width: 94%;
		margin: 1% auto 0;
	}
	
	.sec1Btn {
		margin: 1% auto 0;
	}
	
	.section2 {
		height: auto;
		background: #142b45 url(../images/about_sec2_1060.jpg) no-repeat right 14%;
		background-size: 50%;
		padding-bottom: 10%;
	}
	
	.sec2Left {
		width: auto;
		margin-top: 20%;
		float: none;
	}
	
	.sec2Titles {
		margin-right: 53%;
		float: none;
	}
	.sec2Title {
		/* width: 190px; */
	}
	.sec2Sep {
		background: #00b0e2;
	}
	
	.sec2Texts {
		margin-top: 10%;
		/* margin-right: 10%; */
		text-align: center;
	}
	
	.sec2Texts ul{
		text-align: right;
		margin: auto;
		width: 90%;
	}
	
	.section3 {
		height: auto;
		min-height: auto;
		/*background: #fff url(../images/about_sec3_1060.jpg) no-repeat left 14%;*/
		background-size: 90%;
		/* padding-bottom: 10%; */
	}
	
	.sec3Titles {
    	margin-top: 10%;
 }
	
	ul.sec3Ul {
		margin-top: 20%;
	}
	
	.sec3Box {
		width: auto;
		margin-right: 0;
	}
}


@media (max-width: 960px) {
	
	.sec1-video {
		margin: 5% auto 0;
		height: 55.1vw;
		border: 2vw solid #fff;
	}
	.sec3Titles {
		margin-top: 10%;
	}
	.structure-departments {
		max-width: 80%;
		display: block;
	}
	
	.structure-department {
		width: auto;
		margin-top: 6%;
	}
	
	.structure-department:first-of-type{ margin-top: 0;}
	
	.department-manager {
		font-size: 18px;
		width: 100%;
		padding: 0 4%;
		height: 72px;
	}
	
	.department-manager br{ display: none;}
	
	.department-branch {
		width: auto;
		font-size: 17px;
		min-height: 52px;
	}
}


@media (max-width: 740px) {
	
	.section1 {
		height: auto;
		padding-bottom: 100px;
		/* background: #142b45 url(../images/about_sec1_740.jpg) no-repeat top center; */
		background-size: cover;
	}
	
	h1, .h1-main-title {
		font-size: 7.5vw;
	}
	
	.sec1Texts {
		width: 95%;
	}
}



@media (max-width: 680px) {
	.structure-ceo {
		font-size: 24px;
		width: 308px;
		height: 114px;
		margin: 38px auto 0;
	}
	
	.sec3Box {
		padding: 0 8%;
	}
	
	.sec3Titles {
		margin-top: 15%;
	}
	.sec1Texts {
		width: 95%;
		font-size: 16px;
	}
}


@media (max-width: 480px) {
	.section1 {
		padding-bottom: 31%;
		background-position: center bottom;
		background-size: 263%;
		background-color: #061637;
	}
	
	h1 {
		text-align: center;
		font-size: 9.4vw;
		margin-top: 7%;
	}
	
	.sec1-video {
		margin: 8% auto 0;
		height: 52.1vw;
		border: 2vw solid #fff;
	}
	
	.sec1Texts {
		width: 98%;
		margin: 2% auto 0;
	}
	
	.sec1Btn {
		margin: 34px 0 0;
		width: 100%;
		text-align: center;
	}
	
	.sec1Btn {
		margin: 3% auto 0;
		height: 13vw;
	}
	
	.sec1Btn span {
		font-size: inherit;
	}
	
	.modal {
		width: 100vw;
		height: 55.8vw;
	}
	
	.section2 {
		background: #142b45 url(../images/about_sec2_1060.jpg) no-repeat right 0%;
		background-size: contain;
		padding-bottom: 25%;
	}
	
	.sec2Left {
    	margin-top: 91%;
 }
	
	.sec2Texts {
		margin-top: 10%;
		padding-top: 0;
		font-size: 16px;
		text-align: right;
	}
	
	.section3 {
		background-size: 90%;
		padding-bottom: 25%;
	}
	
	.sec3Titles {
		margin-top: 18%;
	}
	
	.sec2Titles {
		margin-right: 0;
		float: none;
		width: auto;
	}
	
	.sec2Title {
		width: auto;
	}
	
	.structure-departments {
		max-width: 88%;
	}
	
	.department-manager {
    	font-size: 17px;padding: 0 2%;
	}
	
	.structure-department {
		margin-top: 15%;
	}
	
	.department-branch {
		width: auto;
		font-size: 16px;
		min-height: 46px;
		padding-right: 2%;
	}
	
}


@media (max-width: 380px) {
	.sec1Texts {
		width: auto;
	}
	
	.sec2Texts {
		font-size: 16px;
	}
	
	.sec2Left {
		margin-top: 91%;
	}
	.sec3Titles {
		margin-top: 20%;
	}
	.sec3Title {
		width: auto;
	}
	.sec3Sep {
		margin-top: 13px;
	}
	ul.sec3Ul {
		margin-top: 25%;
	}

}





















