.main-background { padding-top: 80px; }
.title-hr span { display: inline-block; position: relative; padding-bottom: 20px;}
.title-hr span:before { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: url(../images/icons/hr.png) no-repeat; content: ''; width: 300px; height: 30px; background-position: center; background-size: contain;}

/*Banner*/
.banner { background: #003349; letter-spacing: 5px; position: relative; padding-top: 40px;}
.banner__inner { display: flex; align-items: center;}
.banner__left { width:  40%;}
.banner__right { width: 60%; text-align: center;}
.banner .sub-title { color: #7ec45a; margin-bottom: 40px; }
.banner .title { font-weight: 600; font-size: 45px; margin-bottom: 30px;}
.banner__right .logo-cdt img { width: 250px; height: 88px; object-fit: contain; }

/*Introduce*/
.introduce__inner { display: flex; flex-wrap: wrap; align-items: center;}
.introduce__left { width: 50%; }
.introduce__left h3 { margin-bottom: 30px; color: #ffc200; }
.introduce__right { width: 50%; padding-left: 30px;}
.introduce__inner .link { display: block; position: relative; border-radius: 30px; overflow: hidden;}
.introduce__inner .link .icon-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,.5); border-radius: 50%; padding: 10px; transition: all .3s; width: 80px; }
.introduce__inner__right .link:hover .icon-play{ background-color: rgba(255,255,255,.3) }

/*.whyus*/
.why-us { background: #003349; color: #fff; overflow: hidden; position: relative; padding: 0 60px 60px 60px;}
.why-us:before, .why-us:after { top: 10%; bottom: 30px; left: 30px; width: 3px; background: linear-gradient(to bottom, #ffc200 0%, #8f6537 60%); position: absolute; content: '';}
.why-us:after { left: unset; right: 30px;}
.why-us .wrap-img img { width: 100%; }
.why-us .heading { margin-top: -50px;}
.why-us .heading .title { font-size: 45px;}
.why-us__list { display: flex; flex-wrap: wrap; list-style: none; margin: -20px; padding-left: unset;}
.why-us__list-item { width: 25%; padding: 20px;}
.why-us__list-item .icon { margin-bottom: 20px; }
.why-us__list-item .icon img { height: 50px; object-fit: contain; object-position: center; }
.why-us__list-item .title { color: #ffc200; font-size: 21px; margin-bottom: 20px; font-weight: 500; text-align: center;}
.why-us__list-item .sub-title { font-size: 16px; color: #ffc200; margin-bottom: 10px;}
.why-us__list-item .des { text-align: justify; }

/*Overview*/
.section-overview { position: relative; overflow: hidden;}
.section-overview>* {position: relative; z-index: 1; }
.section-overview .content-img {display: flex; flex-wrap: wrap;}
.section-overview .wrap-content { width: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.section-overview .title { color: #1A304C; }
.section-overview .content .des { padding: 0 30px; }
.section-overview .wrap-img { width: 40%; }
.section-overview .wrap-img .inner { margin-right: calc((-100vw + 1185px)/2); position: relative; height: 100%; }
.section-overview .wrap-img img { width: 100%; height: 100%; max-height: 1000px;}
.section-overview table { margin-bottom: 0; }

/*Table*/
.section-overview table td, 
.section-overview table, .section-overview table th{border: 1px solid #aaa; padding: 10px;}
.section-overview table td { border-bottom: none; }
.section-overview table tr td:first-child { border-right: none; font-weight: 700;}


.section-overview .top { text-align: center;}
.section-overview .img-top { width: 55%; position: relative;}
.section-overview .img-top:before { content: ''; background: url(../images/bg/bg-line.svg) no-repeat; top: 0; right: 0; bottom: 0; width: 80px; position: absolute; transform: translateX(70%);}
.section-overview .content-top { width: 45%; color: #A26F3C; }
.section-overview .content-top .inner { max-width: 80%; margin: auto; text-align: center; }

/*Location*/
.location { overflow: hidden; background: #003349; color: #fff;}
.location__inner { display: flex; }
.location__left { width: 35% }
.location__right { width: 65%; padding-left: 30px; }

.about-story{width: 1200px; height: 650px; background: url(../images/examples/about-story-bg.jpg) no-repeat; background-size: 100% 100%; margin: 0 auto; position: relative; }
.about-story-content{width: 400px; margin: 0 auto; text-align: center; padding: 0 20px; position: absolute; left: 50%; top: 65%; transform: translate(-50%,-50%); }
.logo-ttg img{width: 30%; margin-bottom: 25px; margin-left: auto; margin-right: auto; }
.about-story-content-text{font-size: 14px; padding-top: 60px; }

/*CSBH*/

.csbh { position: relative; overflow: hidden;}
.csbh__list { padding-left: unset; margin: -15px; display: flex; flex-wrap: wrap; list-style: none; }
.csbh__list-item { width: 33.33%; padding: 15px; }
.csbh .inner .content { display: flex;  padding-left: 30px;}
.csbh .inner .content .block-1 { width: 70%; }
.csbh ul { padding-left: 20px; }
.csbh .inner .content .block-2 { padding-left: 20px; position: relative; width: 33.33%;}
.csbh .download .file img { width: 60px; }
.csbh .link-download { background: #e31f2b; display: inline-block; border-radius: 5px; color: #fff; font-size: 20px; text-transform: uppercase; padding: 8px 40px; margin-top: 15px; font-weight: 600;}
.csbh .link-download:hover { color: rgba(255,255,255,0.8); }
.csbh .tdtt { width: 70%; margin: auto;}
.csbh .tdtt .wrap-img { position: relative; margin-bottom: 30px; position: relative; height: 0; padding-top: 45%;}
.csbh .tdtt .wrap-img .img { filter: blur(4px); position: absolute; height: 100%; width: 100%; left: 0; top: 0;}
.csbh .tdtt .wrap-img .logo { width: 120px; height: 120px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; border: 1px solid #ffc200; border-radius: 50%; background: #003349; display: flex; align-items: center; justify-content: center;}
.csbh .bottom { display: flex; flex-wrap: wrap; margin-top: 50px; }
.csbh .bottom .call { font-size: 40px; font-weight: 900; margin-top: 30px; text-align: center;}
.csbh .bottom .call i { animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; padding-right: 10px;}
.csbh .wpcf7-response-output { bottom: -65px; }


.plan-master { background: #003349; position: relative; overflow: hidden; color: #fff;}
.plan-master__inner { position: relative; z-index: 2; margin-bottom: 40px;}
.plan-master__left { width: 35%; }
.plan-master__left ul { list-style: none; font-size: 14px; padding-left: 5.21vw;}
.plan-master__left ul li { margin-bottom: 15px; color: #fff;}
.plan-master__left ul li:first-child { font-size: 22px; color: #ffc200; }
.plan-master__left ul li span:first-child { width: 25px; height: 25px; background: #ffc200; display: inline-block; font-weight: 500; line-height: 25px; text-align: center; color:#fff; border-radius: 50%; font-size: 12px; }
.plan-master__right .wrap-img { margin-top: 50px; }
.plan-master__right { width: 65%; }
.plan-master__inner .info { max-width: 900px; margin: auto; }
.plan-master .img-bot img { width: 100%; }

.flat-overview { overflow: hidden; }
.flat-overview .list { padding-left: unset; display: flex; flex-wrap: wrap; list-style: none; padding-top: 40px; margin: -10px;}
.flat-overview .list .item { width: 50%; padding: 10px; }
.flat-overview .wrap-img { display: flex; flex-wrap: wrap; margin: -20px; }
.flat-overview .wrap-img>div { width: 50%; padding: 20px; }

.flat-nm__inner { display: flex; flex-wrap: wrap; }
.flat-nm__left { width: 50%; padding: 30px 0; }
.flat-nm__right { width: 50%; }
.flat-nm__right img { height: 100%; }

.cdt__list { display: flex; flex-wrap: wrap; margin: -30px -5px; list-style: none; padding-left: unset; justify-content: center;}
.cdt__list-item { width: 50%; padding: 30px 25px;}
.cdt__list-item .name { color: #fec300; font-size: 23px; margin-top: 25px; text-align: center;}
.cdt__list-item .inner { position: relative; display: flex; flex-direction: column; height: 100%;}
.cdt__list-item .wrap-img { position: relative; height: 0; padding-top: 50%;}
.cdt__list-item .wrap-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top-left-radius: 20px; border-bottom-right-radius: 20px; z-index: 2;}
.cdt__list-item:hover .wrap-img:before { webkit-animation: shine .75s; animation: shine .75s;}

.cdt__list-item .wrap-img:before,
.cdt__list-item .wrap-img:after {content: ''; width: 100%; height: 100%; content: ""; position: absolute; background-repeat: no-repeat; background-size: auto 220px; }
.cdt__list-item .wrap-img:after {bottom: -12px; left: -12px; background-image: url(../images/icons/pattern-left.png); background-position: bottom left; }
.cdt__list-item .wrap-img:before {top: -12px; right: -12px; background-image: url(../images/icons/pattern-right.png); background-position: top right; }

.subdivision { background: #003349; color: #fff; overflow: hidden;}
.subdivision__list { display: flex; flex-wrap: wrap; list-style: none; margin: -20px; padding-left: unset;}
.subdivision__list-item { width: 50%; padding: 20px; }
.subdivision__list-item .wrap-img { position: relative; height: 0; padding-top: 60%; border-radius: 20px; overflow: hidden; }
.subdivision__list-item .wrap-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: all ease .4s; }
.subdivision__list-item:hover .wrap-img img { transform: scale(1.1); }
.subdivision__list-item .wrap-info .title { font-size: 20px; margin-bottom: 10px; }
.subdivision__list-item .wrap-info { padding-top: 20px; text-align: center; }

.library { position: relative; background: #003349; padding-bottom: 50px; padding-top: 80px; overflow: hidden; }
.library__inner { position: relative; z-index: 5; }
.library .title { margin-bottom: 50px;}
.library__list { padding-left: unset; margin: 0 -80%; position: relative;}
.library:before, .library:after {top: 200px; bottom: 30px; left: 14%; width: 5px; background: linear-gradient(to bottom, #ddaa71 0%, #8f6537 60%); position: absolute; content: ''; } .library:after { left: unset; right: 14%; }
.slick-list { padding-bottom: 50px; }
.library__list-item { padding:  0 40px; }
.library__list-item .wrap-img { position: relative; height: 0; padding-top: 51.5%; }
.library__list-item .wrap-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.library__list-item a { display: block; position: relative; }
.library__list-item a .wrap-info { position: absolute; bottom: 0px; left: 30px; padding: 10px 20px; background: linear-gradient(to left, #ddaa71 0%, #8f6537 100%); color: #fff; font-size: 18px; text-align: center; padding: 20px; display: flex; align-items: center; justify-content: center; transform: translateY(50%); font-weight: 500;}
.library .des { margin-bottom: 80px; color: #fff; }
.library  .slick-dots li button:before { content: none; }
.library .slick-dots { bottom: 0; }
.library  .slick-dots li button { width: 8px; height: 8px; background: #fff; }
.library  .slick-dots li.slick-active button { background: #ddaa71 ; }

.nm ul li { margin-bottom: 10px; }
.nm ul li:last-child { margin-bottom: 0; }
.nm ul { padding-left: unset; margin-bottom: unset; list-style: none; }
.nm .block { display: flex; align-items: center; margin-bottom: 20px;}
.nm .block.change { flex-direction: row-reverse; }
.nm .block.change .block__right { padding-left: unset; padding-right: 30px; text-align: right;}
.nm .block__left { width: 50%; }
.nm .block__right { width: 50%; padding-left: 30px;}
.nm .block .wrap-img { padding-top: 66.67%; height: 0; position: relative; border-radius: 10px; overflow: hidden; }
.nm .block .wrap-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.development-unit { position: relative; background: #e1ad64; padding: 30px;}
.development-unit .des { max-width: 900px; margin: auto; text-align: center; padding-bottom: 20px; }
.development-unit__inner { display: flex; flex-wrap: wrap; }
.development-unit__left { width: 36%; }
.development-unit__right { width: 64%; }
.development-unit img { width: 100%; }
.development-unit .wrap-img { height: 100%; }
.development-unit__left img { height: 100%; }
.development-unit__inner { background: #fff; position: relative; z-index: 10; }
.development-unit__inner .container { padding: 40px 0; }
.development-unit:before {content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #003349; }
.development-unit .wrapper-img {margin-bottom: 60px; display: flex; justify-content: space-around; }
.development-unit .wrapper-img div {display: flex; flex-direction: column; justify-content: center; align-items: center; }
.development-unit .wrapper-img div img {width: 100%; height: 120px; object-fit: contain;}
.development-unit .wrapper-img div h3 {margin-bottom: 20px; font-weight: 300; text-align: center; font-size: 20px;}
.development-unit .wrapper-btn {display: flex; flex-direction: column; align-items: center; }
.development-unit .wrapper-btn a.tel {color: #e1ad64; border-top: 1px solid #e1ad64; border-bottom: 1px solid #e1ad64; width: 220px; text-align: center; font-size: 32px; padding: 10px 0 5px; transform: all 1s ease; font-weight: bold;}
.development-unit .wrapper-btn button {margin-bottom: 20px; transition: all 0.5s ease; width: 190px; background-size: 200% auto; box-shadow: 0 0 20px #eee; background-image: linear-gradient(to right,#e1ad64 0%, #003349 51%, #e1ad64 100%); cursor: pointer; }
.development-unit .wrapper-btn button:hover {background-position: right center; /* change the direction of the change here */ color: #fff; }
.development-unit .wrapper-btn button a {color: #fff; font-weight: 500; font-size: 18px; padding: 15px 10px; display: block; letter-spacing: 1px; }

.view-project { overflow: hidden; }
.view-project ul { display: flex; flex-wrap: wrap; margin: -10px; list-style: none; padding-left: unset;}
.view-project ul li { width: 50%; padding: 10px; }

/*Table*/
table td, table, table th{border: 1px solid #aaa; padding: 10px; color: #000; }
table td { border-bottom: none; }
table tr td:first-child { border-right: none; font-weight: 700;}