@charset "utf-8";

/********** header **********/
header{left:0; top:0; transition: ease-in-out 0.3s;}
header.active{background:#fefefe;}
header.active a{color:#26272b}

.menuHover{left:0; top:calc(100% + 20px); height:0; opacity:0; pointer-events:none; transition:opacity 0.3s ease-in-out; overflow:hidden}
header:hover .menuHover {pointer-events: auto; opacity: 1;}
.mobileBtn{cursor: pointer;}
.mobileBtn > div{background:#222;transition: ease-in-out 0.3s;}
.mobileBtn > div:nth-child(1){top:0;left:0;}
.mobileBtn > div:nth-child(2){top:7px;left:0;}
.mobileBtn > div:nth-child(3){top:14px;left:0;}

.mobileBtn.active > div, header.active .mobileBtn > div{background:#222}
.mobileBtn.active > div:nth-child(1){top:50%; transform:translate(-50%, -50%) rotate(45deg)}
.mobileBtn.active > div:nth-child(2){left:500px}
.mobileBtn.active > div:nth-child(3){top:50%; transform:translate(-50%, -50%) rotate(-45deg)}
/********** //header **********/

/********** footer **********/

/********** //footer **********/

/********** index **********/
/** mainBanner **/
.mainBannerCnt p{text-shadow: 0 0 8px rgba(0,0,0,0.25);}

.mainSliderBg{left:0;top:0; transition: opacity 0.5s ease, background-size 3s ease-in-out; opacity:0}
.mainSlider1{background:url('/img/source/mainBannerImg1.jpg')center center no-repeat;}
.mainSlider2{background:url('/img/source/mainBannerImg2.jpg')center center no-repeat; }

.mainScroll{left:50%; bottom:0; transform:translateX(-50%)}

/** mainIntro **/
.mainIntroBorder{border-bottom:2px solid #91949f; width:fit-content}

/** mainProduct **/
.mainProductP{left:24px; bottom:32px}
.mainProduct{background:url('/img/source/mainProductBg.jpg')center center; background-size:cover}
/********** //index **********/

/********** subBanner, lineBanner **********/
.lineBanner{border-bottom:1px solid #d9dade}
.subBanner1{background:url('/img/source/companyBannerImg.jpg')center center no-repeat;}
.subBanner2{background:url('/img/source/productBannerImg.jpg')center center no-repeat;}
.subBanner3{background:url('/img/source/esgBannerImg.jpg')center center no-repeat;}
.subBanner4{background:url('/img/source/contactBannerImg.jpg')center center no-repeat;}
.subBanner5{background:url('/img/source/communityBannerImg.jpg')center center no-repeat;}
.subBanner{background-size:cover}
.lineAccordienMenu{border-right:1px solid #d9dade}
.lineAccordienContent{max-height: 0;overflow: hidden;transition: max-height 0.3s ease;}
.lineAccordienMenu > img{transition: ease-in-out 0.3s; transform:rotate(0deg)}
.lineAccordienMenu.active > img{transform:rotate(180deg)}
/********** //subBanner, lineBanner **********/


/********** company **********/
.message .lang { display: none; }
.message .lang.active { display: block; }
.langBtn > a{background:#fefefe; transition: ease-in-out 0.3s; border:1px solid #fefefe}
.langBtn > a.active{background:#F7F8F8; border:1px solid #EEEEF0}
/********** //company **********/

/********** location **********/
.locationLine {border-bottom:1px solid #D9DADE;}
/********** //location **********/

/********** slogan **********/

/********** //slogan **********/

/********** history **********/
.historyImgP{left:50%; top:50%; transform:translate(-50%, -50%)}

.historyTit{font-size:80px}
.historyBar .circleBall{background:#D9D9D9; transition: ease-in-out 0.3s;}
.historyCnt:hover .circleBall{background:#FB1605}
.barLine{background:#D9D9D9}
.historyCntBox.lang {display:none;}
.historyCntBox.lang.active {display:block;}
/********** //history **********/

/********** partner **********/
.partnerTbl{border-top:2px solid #222; border-bottom:2px solid #222}
.partnerTbl td{border-bottom:1px solid #d9dade}
/********** //partner **********/

/********** product **********/
.productBtn{border-bottom:1px solid #d9dade; width:33.3333333%}
.productBtnBox > .productBtn:nth-child(4), .productBtnBox > .productBtn:nth-child(5), .productBtnBox > .productBtn:nth-child(6), .productBtnBox > .productBtn:nth-child(7){
    width:25%
}
.productBtn.active{background:#2147A0; font-weight:600; color:#fefefe}
.productListCnt{left:50%; bottom:24px; transform: translateX(-50%);}

.productListItem{overflow:hidden; cursor: pointer;}
.productListItem .filterBg{background:transparent; transition:ease-in-out 0.3s; top:0; left:0}
.productListItem:hover .filterBg{background:rgba(33,71,160,0.8);}
.productListItem:hover p{color:#fefefe}
.hiddenP{height:0; overflow-y:hidden; transition:height ease-in-out 0.3s;}
.productListItem:hover .hiddenP{height:180px; border-top:1px solid #fefefe}

.productListItem.hidden {display:none}
#modalOverlay{left:0; top:0;background: rgba(38,39,43,0.5);}
#productModal{top: 50%; left: 50%;transform: translate(-50%, -50%);}
#productModal .closeBtn {top: -30px; right: 0px;cursor: pointer;}
.modalDetails span{font-size:20px; margin-bottom:16px; color:#5d606c}
.modalImage{overflow:hidden}
/********** //product **********/

/********** esg **********/
.esgBtn{border-bottom:1px solid #d9dade;}
.productBtnBox .esgBtn:nth-child(1), .productBtnBox .esgBtn:nth-child(2),.productBtnBox .esgBtn:nth-child(3){width:33.3333333%}
.esgBtn.active{background:#2147A0; font-weight:600; color:#fefefe}

.esgFilter2Cnt{border:1px solid #D9DADE}

.esgFilter3Cnt{border:1px solid #D9DADE}
.esgFilter.hidden{display:none}
/********** //esg **********/

/********** online **********/
.onlineViewTbl td, .onlineViewTbl th, .writeBtn{border:1px solid #eeeef0}
.onlineViewTbl th {border-left:0}
.onlineViewTbl td{border-right: 0;}

.onlineTbl thead {border-top:2px solid #222;}
.onlineTbl tbody tr {border-top:1px solid #91949F;}
.onlineTbl tbody:last-child {border-bottom: 2px solid #222;}
.onlineTbl .num{border-left:0}
.onlineTbl .num2{border-right:0}
/********** //online **********/

/********** writeOnline **********/
input[type="file"] {font: inherit;}  
input[type="file"]::file-selector-button {background-color: #EEEEF0;color: #91949F;padding: 12px 16px;border: none;border-radius: 2px;cursor: pointer;margin-right:12px;font-size: 20px;font-weight: 700;}
/********** //writeOnline **********/

/********** policy **********/

/********** //policy **********/