.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height:1.4 !important;}
.d-none {display: none!important;}
h2 {color:#000;}
.textcomp {font-weight:normal;color: #575757; }
.mx-auto {margin-left:auto !important; margin-right:auto !important;}
.margin-b-0 {margin-bottom:0 !important;}

#Banner_top { width: 100%; height: 512px;transition: background 0.2s linear; background-repeat: no-repeat;  background-color: #000; background-position: 50% 0;}
#section1 { display: flex;}
#main_subject { width: 100%; height: 510px; display: flex; position: relative; z-index: 1; align-content: center; justify-content: center;}
#logo {max-width: 320px;}
#main_subject h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue"; margin: 0; color: #000; line-height: 1.2 !important;}
#section2 {background-image: url(/images/cooling_solution/section_bg1_L.webp); background-repeat: no-repeat; background-position: top center; background-size: auto 100%; background-color:#000; height: auto;}
#section2 .cardbox { padding: 35px 5px 5px; margin-bottom:0; margin-top: -35px; border: 0; }
#section2 h2 { font-size:24px; font-weight:500; color: #fff; margin-bottom:15px;}
#section2 h3 { font-size:18px; font-weight:500; color: #fff; margin-bottom:0;}
#section2 p { color: #fff; text-align:center;}
#section2 p.small { font-size:12px !important;}
.photo { width: 120px; height:120px; padding:10px; z-index: 1; position: relative;}

.card > .card-link{ color: #333; }
.card > .card-link:hover{  text-decoration: none; }
.card > .card-link .card-img img{ border-radius: 6px 6px 0 0; }
.card .card-img{ position: relative; padding: 0; display: table; }
.card .card-img .card-caption { position: absolute; right: 0; bottom: 16px; left: 0;}
.card .card-body{ display: flex; flex-direction: column; width: 100%; padding: 15px 20px; }
.card .card-header{ border-radius: 6px 6px 0 0; padding: 8px; }
.card .card-footer{ border-radius: 0 0 6px 6px; padding: 8px; }
.card .card-left{ position: relative; float: left; padding: 0 0 8px 0; }
.card .card-right{ position: relative; float: left; padding: 8px 0 0 0; }
.card .card-body h1:first-child,
.card .card-body h2:first-child,
.card .card-body h3:first-child, 
.card .card-body h4:first-child,
.card .card-body .h1,
.card .card-body .h2,
.card .card-body .h3, 
.card .card-body .h4{ margin-top: 0; }
.card .card-body .heading{ display: block;  }
.card .card-body .heading:last-child{ margin-bottom: 0; }

.card-default{ border-color: #ddd; background-color: #fff; margin: 5px;}
.card-default > .card-header, .card-default > .card-footer{ color: #333; background-color: #ddd; }
.card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-default > .card-left{ padding-right: 4px; }
.card-default > .card-right{ padding-left: 4px; }
.card-default .card-caption { color: #fff; text-align: center; text-transform: uppercase; }

.card .list-icon li {border-color:#d5d5d5;}
.card .card-bottom { position: absolute; bottom: 5px; width: 90%;}
#section5 .card {border-color:#d7d7d7;}
[class*="card-columns-"] .card-body { padding: 0.3rem 1.5rem 30px;}
[class*="card-columns-"] img {border-top-left-radius:8px; border-top-right-radius:8px;}
[class*="card-columns-"] p.card-text {color:#000; padding-bottom:20px; font-size:16px;}
[class*="card-columns-"] h3 {padding-top:15px;}
[class*="card-columns-"] .card-bottom a {float:right;}

.card-columns-3 { column-count: 3; padding-bottom: 40px; gap: 0; }
#section3 { padding-bottom:30px;}
#section3 h2 { font-size:24px; font-weight:500; margin-bottom:15px;}
#section3 .card {flex-direction: row;}
#section3  .card-body { padding: 40px 0 40px 0;}
#section3  .card-body img {max-width:100px; margin:30px auto 5px;}
#section3 .gap img {height:100%; max-width:95px;}
#section3 h3 {color:#000; margin-bottom:0;}
#section3 h3 {line-height:1.2 !important; margin-bottom: 10px;}
#section4 { background-color: #ededed; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; padding-bottom: 40px;}
#section4 h2 { font-size:24px; font-weight:500; margin-bottom:15px;}

#section5 {background-color: #f5f7fb;}
#section5 .card{ background-color: #fff; border: 1px solid transparent; border-radius: 3px; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px;}
#section5 .card-body p {text-align:center; line-height:1.3;}
#section5 .card-body h3 { color:#000; font-weight:500; line-height:1.2;}
#section6 {border-top: 1px solid #ddd;}
#section6 span { display: inline-block; background-color: #2fa3d3; color: #fff; font-size: 13px; line-height: 26px; font-weight: bold; text-align: center; width: 24px; height: 24px; border-radius: 50%;}
#section6 .block3 span { position: absolute;  margin-top: -10px;}
#section7 {display:flex; align-items: center; background-repeat:no-repeat; background-position: center center; border-top: 1px solid #c3c3c3;}
#more_info { display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
#more_info p {color: #000;}
#section8 {display:flex; align-items: center; background-image: url(/images/cooling_solution/green_earth.webp); background-color: #6e9143; background-repeat:no-repeat; border-top: 1px solid #6e9143;}
#section8 p {color:#000;}
#section8 .btn-default {border-color:#000;}

@keyframes shake {
    from,to { transform: translate3d(0,0,0);}
    10%,30%,50%,70%,90% {transform: translate3d(-10px,0,0);}
    20%,40%,60%,80% {transform: translate3d(10px,0,0);}
}

.shake {animation-name: shake;}


/* Video Block
================================================== */
.video-block {background-color: #f5f5f5; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;}
.video-icon {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 11;}
.video-icon:after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    opacity: 1;
    display: block;
    z-index: 3;
    content: '';
    background: url(/images/AIDMS/btn_player.png) no-repeat;
    background-size: 100% 300%;
    border-radius: 50%;
    transition: opacity .3s cubic-bezier(0.165, 0.840, 0.440, 1.000), transform .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);  
}
.video-icon:hover:after, .video-icon:focus:after {opacity: 1;-webkit-transform: scale(1.1, 1.1) rotate(0.001deg);-ms-transform: scale(1.1, 1.1) rotate(0.001deg);transform: scale(1.1, 1.1) rotate(0.001deg);background-position: 0 50%;}
.nav-tabs > li > a.active:hover, .nav-tabs > li > a:hover, .nav-tabs > li > a {border: 0;background: none;}
.post-thumb.hover {filter: brightness(50%);}
.video-block .post-overaly-style:before {
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .85)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%)
}
.video-tab .thumbnail {background-color:#f5f5f5;}
.video-tab .thumbnail .caption {margin: auto 20px; display: flex; flex-direction: column; justify-content: space-evenly;}
.post-thumb > a, .video-block .post-overaly-style .post-thumb {display: block;width: 100%;background-size: auto 100%;background-position: top center;background-repeat: no-repeat;}
.post-thumb {max-width: 100%; position: relative;overflow: hidden; border: 1px solid #c1c1c1; border-radius: 8px;}
.bg-pos-center {background-position: center !important;}
.bg-cover {background-size: cover !important;background-repeat: no-repeat;}

@media (min-width: 1200px) {
    #HtmlTag[lang="en-US"] #container_wrap .h2, #HtmlTag[lang="en-US"] #container_wrap h2 {font-size:28px;}
    #section6 .block1>img {margin-left:-20px;}
    #section6 .block3 p { font-size: 14px;}
}

@media (max-width: 1199px) {
    #main_subject {margin-left: 30px;}
}

@media (max-width: 1199px) and (min-width: 768px) {
    #section6 .block3 p { font-size: 13px;}
}

@media (min-width: 992px) {
    .textcomp {font-size:19px; padding: 20px 0 0;}
    #main_subject h1 {font-size:48px;}
    #section3 h3 {font-size: 20px;}
    #section4 ul {margin-right:15px; padding-top:15px;}
    #section4 li {font-size:17px; line-height:1.2; margin-bottom:8px;}
    #section5 .card-columns-4 { column-count: 4; padding-bottom: 40px; }
    #section6 #blockWrap {display: flex; padding: 40px 0 30px;}
    #section6 .panel {margin-bottom: 35px;}
    #section6 .panel-body {padding: 0 20px 8px;}
    #section6 .panel-body h3 {margin-top: 18px; margin-bottom: 5px; font-size: 15px; color: #000;}
    #section6 .panel-body p {text-indent: 30px;}
    #section6 .block1 {width: 280px;}
    #section6 .block2 {display: flex; flex-direction: column; justify-content: center; width: calc(100% - 280px);}
    #section6 .block3 {display: flex; column-count: 5; gap: 15px; margin-left: 15px; margin-right: 15px;}
    #section6 .col5_lists { width: calc(25% - 45px); display: flex; flex-direction: column; align-items: center; text-align: center;}
    #section6 .block3 img {max-width:110px; }
    #section6 .block3 h3 {font-size:15px; line-height:1.2; color:#000;}
    #section7 {padding-top:30px; padding-bottom:30px;}
}

@media (max-width: 991px) and (min-width: 785px) {

}

@media (max-width: 991px) and (min-width: 768px) {
    .textcomp {font-size:17px; padding: 10px 0 0;}
    #main_subject h1 {font-size:28px;}
    #section3 h3 {font-size: 18px;}
    #section4 ul {margin-right:10px;}
    #section4 li {font-size:15px; line-height:1.2; margin-bottom:5px;} 
    #section6 #blockWrap {display: flex; padding: 40px 0 30px; flex-direction: column; align-items: center;}
    #section6 .panel {margin-bottom: 35px;}
    #section6 .panel-body {padding: 0 20px 8px;}
    #section6 .panel-body h3 {margin-top: 18px; margin-bottom: 5px; font-size: 15px; color: #000;}
    #section6 .panel-body p {text-indent: 30px; font-size: 13px; }
    #section6 .block1 {width: 210px;}
    #section6 .block2 {display: flex; flex-direction: column; justify-content: center; width: calc(100%);}
    #section6 .block3 {display: flex; column-count: 5; gap: 15px; margin-left: 15px; margin-right: 15px;}
    #section6 .col5_lists { width: calc(25% - 45px); display: flex; flex-direction: column; align-items: center; text-align: center;}
    #section6 .block3 img {max-width:110px; }
    #section6 .block3 h3 {font-size:14px; line-height:1.2; color:#000;}
    #section6 .block3 p {font-size:12px;}
}

@media (max-width: 991px) {
    #section5 .card-columns-4 { column-count: 2; gap: 15px; margin-left: 15px; margin-right: 15px; }
    #section5 .card {margin-bottom: 15px;}
}

@media (min-width: 785px) {
    #Banner_top { background-image: url(/images/cooling_solution/bg_TopBanner_L.webp);}
    #section7 { background-image: url(/images/cooling_solution/product-bg_L.webp); background-color: #e9e9ea; height: 450px;} 
    #more_info {height: 450px;}
    #more_info a:hover img {animation: shake 1s; -moz-animation: shake 1s; -webkit-animation: shake 1s; -o-animation: shake 1s;}
    #more_info img { margin-bottom: -1px;}
    #more_info p { font-size: 28px; padding-top: 100px;}
}

@media (max-width: 784px) {
    #Banner_top {height: 100vw; background-size: contain; background-image: url(/images/cooling_solution/bg_TopBanner_M.webp);}
    #section7 { height: 58.5vw; background-size: cover; background-image: url(/images/cooling_solution/product-bg_M.webp);}
    #more_info {height: 58.5vw;}
    #more_info img { height: 35vw; max-height: 229px;}
    #more_info p { font-size: 18px; font-weight: 500; padding-top: 10vw; }
}

@media (min-width: 768px) {
    #section1 { flex-direction: row; justify-content: center; align-items: center; }
    #main_subject h1 {padding-top: 20px;}
    #logo { margin-left: -2px;}
    #main_subject {width: calc(50% - 20px); flex-direction: column;}
    #main_pic {width: calc(50%); max-width: 520px; padding: 50px 0;}
    #section2 p { font-size:17px; margin-bottom:40px;}
    #section5 .card-body h3 {font-size:16px;} 
    #section6 span.mr {margin-right:8px;}
    #section8 { height: 300px;  background-size: auto 584px; background-position: 15% 50%;}
    #section8 p { font-size:16px; margin-bottom:20px;}
    #section8 .btn {padding: 10px 16px 9px; font-size: 17px; line-height: 1.3333333;}
    #section8 .btn .mr {margin-right:8px;}
}

@media (max-width: 767px) {
    #HtmlTag[lang="en-US"] #container_wrap .h2, #HtmlTag[lang="en-US"] #container_wrap h2 {font-size:18px;}
    #section1 {flex-direction: column;}
    #main_subject h1 {font-size:32px; margin-bottom: 15px;}
    #main_subject { width: auto; height: auto; padding: 50px 0 0; margin: 0 30px;flex-direction: column;}
    #main_pic {width: 80vw; margin:0 auto 40px;}
    #section2 .row { margin-right: 0; margin-left: 0;}
    #section2 {background-size: cover;}
    #section2 p { font-size:15px; margin:0 20px 30px;}
    #section3 .row { margin-right: 0; margin-left: 0;}
    #section3 h3 {font-size: 18px;}
    #section3 h3 {font-size: 16px;}
    #section3 .step {overflow-x:scroll;}
    #section3 .step .container { width: calc(150vw - 15px);}
    #section3 .card-body {padding: 40px 0 40px 40px;}
    #section4 .row.padding-t-30 { padding-top:0;}
    #section4 ul {padding-bottom: 20px; margin-left: -15px; margin-right: 15px;}
    #section5 .card-body h3 {font-size:15px;}
    #section6 #blockWrap {display: flex; padding: 40px 0 30px; flex-direction: column; align-items: center;}
    #section6 .panel {margin: 30px 15px 7vw;}
    #section6 .panel-body {padding: 0 20px 8px;}
    #section6 .panel-body h3 {margin-top: 18px; margin-bottom: 5px; font-size: 15px; color: #000;}
    #section6 .panel-body p { font-size: 13px; }
    #section6 .block1 {width: 210px;}
    #section6 .block2 {display: flex; flex-direction: column; justify-content: center; width: calc(100%);}
    #section6 .block3 {display: flex; flex-direction: column; gap: 7vw; margin-left: 15px; margin-right: 15px;}
    #section6 .col5_lists { width: 100%; display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; border-radius: 4px; padding: 0 5% 10px;}
    #section6 .block3 img {max-width:15vw; margin-top: -15px; }
    #section6 .block3 h3 {font-size:14px; line-height:1.2; color:#000; margin-top: 8px; margin-bottom: 0;}
    #section6 .block3 p {font-size:12px; line-height:1.2 !important;}
    #section6 span { position: absolute; left: calc(50% - 12px); margin-top: -30px;}
    #section6 .block3 span { margin-top: -3.2vw !important;}
    #section8 { height: 350px; background-size: auto 100%; background-position: 10% 50%; padding-bottom: 40px;}
    #section8 h2 { line-height:1.2;}
    #section8 p { font-size:13px; margin-bottom:15px; line-height:1.2 !important;}
    #section8 .btn .mr {margin-right:5px;}
    .container-fluid {padding: 0;}
    .container-fluid > .container {padding: 0; width:calc(100vw - 30px)} 
    .textcomp {font-size:15px;}  
    section .row {margin-left:0; margin-right:0;}    
}

@media (max-width: 638px)  and (min-width: 461px) {
    #section5 .card-columns-4 .card .card-body  h3 { line-height: 1.2 !important;}
    #section5 .card-columns-4 .card .card-body  {height: 145px;}
}

@media (max-width: 580px) {
    #Banner_top {height: 87.8vw;}
    #logo {max-width: 50vw;}
    #section2 .photo { width: 100px; height: 100px; }
    #section2 .cardbox { padding: 25px 20px 0;}
    #section3 .step .container { width: calc(200vw - 15px);}
    #section5 .card-columns-4 { gap: 10px; margin-left: 10px; margin-right: 10px;}
    #section5 .card {margin-bottom: 15px;}
    #section6 .block3 span { margin-top: -4.7vw !important;}
    .padding-b-40 { padding-bottom: 10px;}
}

@media (max-width: 460px) {
    #HtmlTag[lang="en-US"] #container_wrap .h2, #HtmlTag[lang="en-US"] #container_wrap h2 {font-size: 17px !important; line-height: 1.3 !important;}
    #main_subject {width: calc(100% - 60px)}
    #main_subject h1 {font-size:26px;}
    #main_subject p {font-size:13px !important;}
    #section2 {padding-bottom:30px;}
    #section2 .photo { width: 85px; height: 85px; padding: 5px;}
    #section2 .match-height.padding-b-40 {padding-bottom: 10px;}
    #section2 h3 {font-size: 14px; padding-bottom: 2px;}    
    #section2 p { font-size:12px; line-height: 1.2 !important; margin-bottom:20px;}
    #section3 .step .container { width: calc(280vw - 15px);}
    #section3 .card-body img { max-width: 90px; margin: 20px auto 0;}
    #section3 .gap img {max-width: 100%;}
    #section3 h3 {font-size: 15px; padding-top: 0;}
    #section4 li {font-size:12px; line-height:1.2; margin-bottom:5px;}
    #section4 .post-thumb {max-width: calc(100% - 30px); height: calc(60vw - 30px) !important; margin: 0 15px;}
    #section5 .card-columns-4 { column-count: 1; }
    #section5 .card-columns-4 img {padding: 7px 7px 0;}
    #section5 .card-columns-4 h3 { font-size: 14px; line-height:1.2 !important; margin-bottom: 5px; padding-top: 10px;}
    #section5 .card-columns-4 .list-icon { margin-bottom: 0;}
    #section5 .card {width: 80%; margin:0 auto 15px;}
    #section5 .card-body {padding:3px 20px 10px;}
    #section5 .card-body p {line-height:1.2 !important;}
    #section6 .block1 { width: 40vw; }
    #section6 .block3 {gap: 9vw;}
    #section6 .block3 span { margin-top: -6vw !important;}
    #section6 .block3 img {max-width: 20vw;}
    #section6 .panel {margin: 30px 15px 9vw;}
    #section6 .panel-body p {line-height:1.2 !important;}
    #section8 {padding-bottom:10px !important; height: 320px;}
    #section8 .btn {padding: 6px 12px 5px; font-size:12px;}
    #HtmlTag[lang="en-US"] #section8 h2 {padding-top:0; line-height: 1.2 !important;}
    .textcomp { font-size: 14px;}
}