@import url("common.css");



/* mainVisual */
.mainVisual {position:relative; z-index:2; overflow:hidden; border-radius:0 0 var(--borderR100) var(--borderR100); background:var(--white); isolation:isolate;}
.mainVisualSwiper {position:relative; height:var(--vh); min-height:100vh; overflow:hidden; border-radius:0 0 var(--borderR100) var(--borderR100); background:var(--bk000);}
.mainVisualSwiper .swiper-slide {height:auto;}
.mainVisualSlide {position:relative; height:100%; overflow:hidden; border-radius:0 0 var(--borderR100) var(--borderR100); background:var(--bk000);}
.mainVisualBg {display:block; position:absolute; inset:0; width:100%; height:100%; overflow:hidden;}
.mainVisualBg img {width:100%; height:100%; object-fit:cover; transform:scale(1.15); transition:transform 6.5s ease-out;}
.swiper-slide-active .mainVisualBg img {transform:scale(1);}
.mainVisualBg::before {content:''; position:absolute; inset:0; background:var(--bk000); opacity:0.5; z-index:1;}
.mainVisualBg::after {content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.3) 75%, rgb(0,0,0) 100%); opacity:0.4; z-index:2;}

.mainVisualTxt {position:absolute; left:50%; top:50%; z-index:3; display:flex; flex-direction:column; align-items:center; gap:25px; text-align:center; transform:translate(-50%, -50%);}
.mainVisualTit {color:var(--white); opacity:0; transform:translateY(30px); transition:all 1s ease;}
.mainVisualDesc {color:var(--basic_w); opacity:0; transform:translateY(30px); transition:all 1s ease;}

.swiper-slide-active .mainVisualTit {opacity:1; transform:translateY(0); transition-delay:0.4s;}
.swiper-slide-active .mainVisualDesc {opacity:1; transform:translateY(0); transition-delay:0.7s;}

.mainVisualCtrl {position:absolute; left:50%; bottom:60px; z-index:10; display:flex; align-items:center; max-width:1530px; box-sizing:border-box; transform:translateX(-50%);}
.mainVisualScroll {position: relative; display: block; width: 26px; height: 36px; box-sizing: border-box; border:2px solid rgba(255,255,255,0.5); border-radius:30px; overflow: hidden; animation: scrollDown1 2s ease-in-out infinite;}
.mainVisualScroll::before {content:''; position:absolute; left:50%; top:60%; width:4px; height:4px; border-radius:50%; background:var(--white); margin-left:-2px; margin-top:-2px; animation: scrollDown2 2s ease-in-out infinite;}

@keyframes scrollDown1 {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

@keyframes scrollDown2 {
    0% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(30px);
    }
}


.mainVisualPaging {flex-shrink:0; padding: 0 0 0 20px;}
.mainVisualFraction {position:static; display:flex; align-items:center; gap:8px; width:auto;}
.mainVisualFraction .mainVisualCurrent {font-family:var(--eng); font-size:16px; font-weight:800; line-height:156%; color:var(--white); text-transform:uppercase;}
.mainVisualFraction .mainVisualTotal {font-family:var(--eng); font-size:14px; font-weight:400; line-height:167%; color:var(--white); opacity:0.5;}
.mainVisualProgress {position:relative; flex:1; height:1px; background:rgba(255,255,255,0.15); margin: 0 50px;}
.mainVisualProgressBar {position:absolute; left:0; top:0; width:0; height:100%; background:var(--white); transition:width 0.1s linear;}
.mainVisualNav {display:flex; align-items:center; gap:4px; flex-shrink:0;}
.mainVisualPrev {position:relative; width:62px; height:62px; border:1px solid rgba(255,255,255,0.15); border-radius:50px; background:transparent; cursor:pointer; transition:all 0.3s;}
.mainVisualNext {position:relative; width:62px; height:62px; border:1px solid rgba(255,255,255,0.15); border-radius:50px; background:transparent; cursor:pointer; transition:all 0.3s;}
.mainVisualPrev:hover, .mainVisualNext:hover {background:var(--white); border-color:var(--white);}
.mainVisualPrev::before {content:'arrow_back'; position:absolute; left:50%; top:50%; font-family:var(--icon); font-size:26px; line-height:1; color:var(--white); transform:translate(-50%, -50%); transition:all 0.3s;}
.mainVisualNext::before {content:'arrow_forward'; position:absolute; left:50%; top:50%; font-family:var(--icon); font-size:26px; line-height:1; color:var(--white); transform:translate(-50%, -50%); transition:all 0.3s;}
.mainVisualPrev:hover::before, .mainVisualNext:hover::before {color:var(--black);}


#main{position:relative;}
#main .main-bg{position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background:url('/img/main-bg-obj.png') no-repeat center top 58%/100% auto; pointer-events:none;}

/* mainSec */
.mainSecHead {position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:50px;}
.mainSecTitWrap {display:flex; flex-direction:column; gap:10px;}
.mainSecLabel {font-family:var(--eng); font-weight:600; font-size:0.889rem; line-height:175%; letter-spacing:0; text-transform:uppercase; color:var(--main);}
.mainSecTit {color:var(--black);}
.mainSecTitWrap--center {align-items:center; text-align:center;}
.mainSecNav {display:flex; align-items:center; gap:4px; flex-shrink:0;}
.mainSecPrev ,
.mainSecNext {position:relative; width:62px; height:62px; padding: 0; border:1px solid var(--border); border-radius:var(--borderR50); background:transparent; cursor:pointer; transition:all 0.3s;}
.mainSecPrev:hover, .mainSecNext:hover {background:var(--main); border-color:var(--main);}
.mainSecPrev::before ,
.mainSecNext::before {position:absolute; left:50%; top:50%; font-family:var(--icon); width: 26px; height: 26px; line-height: 26px; font-size:26px; text-align: center; font-weight: 400; color:var(--black); transform:translate(-50%, -50%); transition:all 0.3s;}
.mainSecPrev::before{content:'arrow_back';}
.mainSecNext::before{content:'arrow_forward';}
.mainSecPrev:hover::before, .mainSecNext:hover::before {color:var(--white);}




/* mainAbout */
.mainAbout {}
.mainAboutIn {display:flex; align-items:center; justify-content:space-between;}
.mainAboutIn .mainAboutTxt,
.mainAboutIn .mainAboutImg{box-sizing: border-box; width: 50%;}
.mainAboutTxt {display:flex; flex-direction:column; padding:0 50px 0 0;}
.mainAboutTxt .mainSecTitWrap {margin-bottom:30px;}
.mainAboutDesc {color:var(--basic); margin-bottom:60px;}

.mainAboutImg {position:relative; display:flex; align-items:flex-start; gap:10px; flex-shrink:0;}
.mainAboutImgObj {position:absolute; left:35.16%; top:78%; z-index:0; width:40.52%; aspect-ratio:310/151; pointer-events:none;}
.mainAboutImgObj img{display: block; width: 100%; height: 100%; object-fit: contain;}
.mainAboutImg > .mainAboutImgRow.mainAboutImgRow1{flex:2; min-width:0; position:relative; z-index:1; display: flex; flex-direction: column; gap:10px; align-items: flex-end;}
.mainAboutImg > .mainAboutImgRow.mainAboutImgRow2 {flex:1.1; flex-shrink:0; padding-top:60px; position:relative; z-index:1;}
.mainAboutImgItem {border-radius:var(--borderR30); background:var(--bk000); overflow:hidden;}
.mainAboutImgItem img {width:100%; height:100%; object-fit:cover;}
.mainAboutImg > .mainAboutImgRow.mainAboutImgRow1 .mainAboutImgItem{aspect-ratio: 495/510;}
.mainAboutImg > .mainAboutImgRow.mainAboutImgRow2 .mainAboutImgItem{aspect-ratio: 260/510;}

.mainAboutCeo {display:flex; align-items:center; gap:7px; color:var(--black); white-space:nowrap;}
.mainAboutCeo strong {font-weight:600;}




:root { --svc-inactive-w: 765px; --svc-active-w: 1530px; --svc-gap: 95px; --svc-txt-padding: 90px; }
.mainServices {overflow:hidden;}
.mainServices .mainSecHead {margin-bottom:60px;}
.mainServicesSwiper {overflow: visible; width: 90% !important;}
.mainServicesSwiper .swiper-wrapper {align-items:center;}
.mainServicesSwiper .swiper-slide {height: auto !important;}
.mainServicesSwiper .swiper-slide.swiper-slide-prev .mainServicesSlide{opacity: 0.5;}
.mainServicesSwiper .swiper-slide-active {opacity:1; }
.mainServicesSwiper .swiper-slide-active .mainServicesSlide{opacity:1; }
.mainServicesSlide {display:flex; align-items:center; width:100%; height:100%; box-sizing:border-box; transition: opacity .3s linear; gap:0 90px;}
.mainServicesImg {width: calc(var(--svc-inactive-w) * 1px); aspect-ratio: 765/510; flex-shrink:0; border-radius:var(--borderR30); background:var(--bk000); overflow:hidden;}
.mainServicesImg img {width:100%; height:100%; object-fit:cover;}
.mainServicesTxt {display:none; /* width: calc(100% - calc(var(--svc-inactive-w) * 1px));  */flex-direction:column; /* padding-left:calc(var(--svc-txt-padding) * 1px);; */ box-sizing:border-box;  flex:1;}
.mainServicesSwiper .swiper-slide-active .mainServicesTxt{display: flex;}
.mainServicesName {color:var(--black); font-weight:400;}
.mainServicesSub {color:var(--black); margin-top:10px; font-weight:400;}
.mainServicesDesc {color:var(--basic); margin-top:10px; margin-bottom:60px;}
.mainServices .mainControl{display: none;}

.mainServicesSwiper .swiper-slide { overflow: hidden !important; }

.mainServicesSlide { display: flex; align-items: center; width: max-content; height: 100%; box-sizing: border-box; transition: opacity .3s linear; gap: 0 90px; }

.mainServicesTxt { display: flex; flex-direction: column; box-sizing: border-box; width: 675px; flex-shrink: 0; opacity: 0; transition: opacity 0.5s ease 0.2s; }

.mainServicesSwiper .swiper-slide-active .mainServicesTxt { opacity: 1; }

@media (max-width: 1680px) {
    .mainServicesSwiper .swiper-slide { overflow: visible !important; }
    .mainServicesSlide { width: 100%; }
    .mainServicesTxt { width: auto; flex: 1; flex-shrink: 1; }
}

/* mainDiagnostics */
.mainDiagnostics {padding:0 100px; box-sizing:border-box;}
.mainDiagnosticsIn {position:relative; display:flex; flex-direction:column; align-items:center; border-radius:var(--borderR100); background:var(--bk000); overflow:hidden;}
.mainDiagnosticsBg {position:absolute; left:50%; top:0; z-index:0; width: 100%; height: 100%; overflow:hidden; transform:translateX(-50%); pointer-events:none;}
.mainDiagnosticsBg img {position:absolute; left:0; top:0; width: 100%; height: 100%; object-fit:cover;}
.mainDiagnosticsIn .basic_in {position:relative; z-index:1; display:flex; flex-direction:column; gap:60px;}
.mainDiagnostics .mainSecLabel {color:rgba(255,255,255,.6);}
.mainDiagnostics .mainSecTit {color:var(--white);}
.mainDiagnosticsHead {display:flex; flex-direction:column; align-items:center; gap:30px; width:100%; text-align:center;}
.mainDiagnosticsDesc {color:var(--basic_w);}
.mainDiagnosticsFeatures {display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; margin-top:-10px;}
.mainDiagnosticsFeatures li {display:flex; align-items:center; gap:8px;}
.mainDiagnosticsFeatures li img {flex-shrink:0; width:42px; height:42px; box-sizing:border-box; border-radius:var(--borderR50); background:rgba(255,255,255,0.15); border-left:1px solid rgba(255,255,255,0.2); border-right:1px solid rgba(255,255,255,0.2); object-fit:contain;}
.mainDiagnosticsFeatures li span {font-weight:600; color:var(--white);}
.mainDiagnosticsList {display:flex; flex-wrap: wrap; gap:30px; width:100%;}
.mainDiagnosticsItem {width: calc((100% - 90px)/4);}
.mainDiagnosticsItem a {position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:360px; height:100%; padding:40px; border:1px solid rgba(255,255,255,0.3); border-radius:var(--borderR15); box-sizing:border-box; background:transparent; transition:background .4s ease, border-color .4s ease;}
.mainDiagnosticsItem a .icon{display: block; width: auto; height: 70px;}
.mainDiagnosticsItem a .icon svg{width: auto; height: 100%;}
.mainDiagnosticsItem a .icon svg path, .mainDiagnosticsItem a .icon svg circle, .mainDiagnosticsItem a .icon svg rect {fill:var(--white); stroke:var(--white); transition:fill .4s ease, stroke .4s ease;}
.mainDiagnosticsName {font-weight:700; color:var(--white); margin-top:auto; transition:color .4s ease;}
.mainDiagnosticsItemDesc {color:var(--basic_w); margin-top:10px; transition:color .4s ease;}
.mainDiagnosticsArrow {position:absolute; top:40px; right:35px; width:42px; height:42px; border-radius:50%; background:var(--main); opacity:0; transition:opacity .4s ease;}
.mainDiagnosticsArrow::before {content:'\e5cc'; position:absolute; left:50%; top:50%; font-family:var(--icon); font-size:22px; line-height:1; color:var(--white); transform:translate(-50%, -50%);}
.mainDiagnosticsItem a:hover {background:var(--white); border-color:var(--white);}
.mainDiagnosticsItem a:hover .mainDiagnosticsName {color:var(--black);}
.mainDiagnosticsItem a:hover .mainDiagnosticsItemDesc {color:var(--basic);}
.mainDiagnosticsItem a:hover .icon svg path, .mainDiagnosticsItem a:hover .icon svg circle, .mainDiagnosticsItem a:hover .icon svg rect {fill:var(--main); stroke:var(--main);}
.mainDiagnosticsItem a:hover .mainDiagnosticsArrow {opacity:1;}


/* mainCommunity */
.mainCommunity {overflow:hidden;}
.mainCommunitySwiper {box-sizing:border-box; overflow:visible;}
.mainCommunityItem a {display:flex; flex-direction:column; gap:20px; width:100%;}
.mainCommunityThumb {position:relative; aspect-ratio: 490/306; border-radius:var(--borderR15); background:var(--grayBg); overflow:hidden;}
.mainCommunityThumb img {width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.mainCommunityTxt {display:flex; flex-direction:column; gap:10px; width:100%;}
.mainCommunitySubject {font-weight:600; color:var(--black); line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; transition:color .4s ease;}
.mainCommunityExcerpt {color:var(--basic); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.mainCommunityDate {display:flex; align-items:center; gap:6px; padding-top:15px; font-family:var(--eng); font-size:0.889rem; line-height:175%; color:var(--light); transition:color .4s ease;}
.mainCommunityDate::before {content:'\ebcc'; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--borderR5); background:var(--grayBg); font-family:var(--icon); font-size:18px; line-height:1; color:var(--light); flex-shrink:0; transition:background .4s ease, color .4s ease;}
.mainCommunity .mainControl{display: none;}
.mainCommunityItem a:hover .mainCommunityThumb img {transform:scale(1.05);}
.mainCommunityItem a:hover .mainCommunitySubject {color:var(--main);}
.mainCommunityItem a:hover .mainCommunityDate {color:var(--black);}
.mainCommunityItem a:hover .mainCommunityDate::before {background:var(--main); color:var(--white);}


.pagination-progress {display:none; position:relative; flex:1; min-width:0; height:1px !important; background:rgba(51,49,47,0.1);  overflow:hidden;}
.pagination-progress .swiper-pagination-progressbar-fill {background:var(--black);}



.mainControl{align-items: center; justify-content: space-between; gap:20px; margin: 30px auto 0;}

/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){




/* mainDiagnostics */
.mainDiagnostics {padding:0;}

/* mainServices */
:root {
    --svc-inactive-w: 50%;
    --svc-active-w: 100;
    --svc-gap: 95;
    --svc-txt-padding: 50;
}

.mainServicesImg{width: var(--svc-inactive-w);}

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* mainDiagnostics */
.mainDiagnosticsList {gap:20px;}
.mainDiagnosticsItem {width: calc((100% - 60px)/4);}
.mainDiagnosticsItem a {padding:30px 25px;}
.mainDiagnosticsArrow {top:30px; right:25px;}


/* mainServices */
.mainServices .mainSecHead {margin-bottom:50px;}
.mainServicesDesc {margin-bottom:40px;}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* mainVisual */
.mainVisual {border-radius:0 0 var(--borderR80) var(--borderR80);}
.mainVisualSlide {border-radius:0 0 var(--borderR80) var(--borderR80);}
.mainVisualSwiper {border-radius:0 0 var(--borderR80) var(--borderR80);}
.mainVisualTxt {gap:15px;}

.mainVisualCtrl {bottom:40px;}


/* mainSec */
.mainSecHead {gap:30px; margin-bottom:40px;}
.mainSecPrev ,
.mainSecNext {width:50px; height:50px;}
.mainSecPrev::before ,
.mainSecNext::before {width: 22px; height: 22px; line-height: 22px; font-size:22px; }

/* mainAbout */
.mainAbout {}
.mainAboutTxt {padding:0 30px 0 0;}
.mainAboutTxt .mainSecTitWrap {margin-bottom:20px;}
.mainAboutDesc {margin-bottom:40px;}

.mainAboutImg > .mainAboutImgRow.mainAboutImgRow2 {padding-top:40px;}
.mainAboutImgItem{border-radius: var(--borderR20);}


/* mainServices */
.mainServices .mainSecHead {margin-bottom:40px;}
.mainServicesSlide {flex-wrap: wrap;}
.mainServicesImg {width: 100%; border-radius: var(--borderR20);}
.mainServicesTxt {width: 100%; padding: 30px 0 0; display: flex;}
.mainServicesSub {margin-top:6px;}
.mainServicesDesc {margin-top:6px; margin-bottom:30px;}



/* mainDiagnostics */
.mainDiagnosticsIn {border-radius:var(--borderR80);}
.mainDiagnosticsIn .basic_in{gap:40px;}
.mainDiagnosticsHead {gap:20px;}
.mainDiagnosticsFeatures {gap:30px; margin-top:-5px;}
.mainDiagnosticsList {gap:10px; flex-wrap: wrap;}
.mainDiagnosticsItem {width: calc((100% - 10px)/2);}
.mainDiagnosticsItem a {min-height:230px; padding:20px;}
.mainDiagnosticsItem a .icon{height: 60px;}
.mainDiagnosticsItemDesc {margin-top:5px;}
.mainDiagnosticsArrow {top:20px; right:20px; width:35px; height:35px;}
.mainDiagnosticsArrow::before {font-size:20px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* mainVisual */
.mainVisual {border-radius:0 0 var(--borderR40) var(--borderR40);}
.mainVisualSlide {border-radius:0 0 var(--borderR40) var(--borderR40);}
.mainVisualSwiper {border-radius:0 0 var(--borderR40) var(--borderR40);}
.mainVisualTxt {gap:10px;}
.mainVisualTit br{display: none;}
.mainVisualDesc br{display: none;}

.mainVisualCtrl {bottom:20px; gap:16px 0; flex-wrap: wrap; justify-content: center;}
.mainVisualScroll-area {width: 100%; display: flex; justify-content: center;}

.mainVisualPaging {padding: 0;}
.mainVisualFraction {gap:4px; width: 50px;}
.mainVisualFraction .mainVisualCurrent {font-size:13px;}
.mainVisualFraction .mainVisualTotal {font-size:12px;}
.mainVisualProgress {margin: 0 20px; width: calc(100% - 180px);}
.mainVisualNav {gap:2px; width: 90px;}
.mainVisualPrev {width:44px; height:44px;}
.mainVisualNext {width:44px; height:44px;}
.mainVisualPrev::before {font-size:20px;}
.mainVisualNext::before {font-size:20px;}


/* mainSec */
.mainSecHead {gap:20px; margin-bottom:30px;}
.mainSecTitWrap {gap:5px;}
.mainSecNav {gap:2px;}
.mainSecPrev ,
.mainSecNext {width:44px; height:44px;}
.mainSecPrev::before ,
.mainSecNext::before {width: 20px; height: 20px; line-height: 20px; font-size:20px; }
#main .main-bg {background:transparent;}


/* mainAbout */
.mainAbout {}
.mainAboutIn {flex-wrap: wrap;}
.mainAboutIn .mainAboutTxt,
.mainAboutIn .mainAboutImg{width: 100%;}
.mainAboutTxt {padding:0 0 40px;}
.mainAboutTxt .mainSecTitWrap {margin-bottom:15px;}
.mainAboutDesc {margin-bottom:30px;}

.mainAboutImg {gap:5px;}
.mainAboutImgObj {top:80%;}
.mainAboutImg > .mainAboutImgRow.mainAboutImgRow1{gap:8px;;}
.mainAboutImg > .mainAboutImgRow.mainAboutImgRow2 {padding-top:20px;}
.mainAboutImgItem{border-radius: var(--borderR15);}
.mainAboutCeo {gap:4px;}



/* mainServices */
.mainServices .mainSecTit br{display: none;}
.mainServices .mainSecHead {margin-bottom:30px;}
.mainServices .mainSecHead .mainSecNav {display: none;}
.mainServicesImg {border-radius: var(--borderR15);}
.mainServicesTxt {padding: 20px 0 0;}
.mainServicesDesc {margin-bottom:20px;}
.mainServices .mainControl{display: flex;}

.mainServices .pagination-progress {
    display:block;
    position: relative;
    flex-grow: 1; /* 버튼을 제외한 남은 공간을 모두 차지 */
    height: 1px;
    overflow: hidden;
}

/* 프로그레스 바 채워지는 효과 (JS가 --progress 변수를 제어) */
.mainServices .pagination-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--black); /* 채워지는 색상 (검정색 예시) */
    transition: width 0.4s ease-in-out; /* 부드럽게 채워지는 애니메이션 */
}


/* mainDiagnostics */
.mainDiagnosticsIn {border-radius:var(--borderR40);}
.mainDiagnosticsIn .basic_in{gap:30px;}
.mainDiagnosticsHead {gap:15px;}
.mainDiagnosticsFeatures {gap:30px; margin-top:0; flex-wrap: nowrap; max-width:300px; margin: 0 auto;}
.mainDiagnosticsFeatures li {gap:6px; flex-direction: column; flex:1;}
.mainDiagnosticsFeatures li img {width:38px; height:38px;}
.mainDiagnosticsFeatures li span{line-height: 150%;}
.mainDiagnosticsList {gap:5px;}
.mainDiagnosticsItem {width: 100%;}
.mainDiagnosticsItem a {min-height:auto; padding:20px 20px 20px 90px; position: relative; border-radius:var(--borderR8);}
.mainDiagnosticsItem a .icon{height: 50px; position: absolute; left: 20px; top:20px;}
.mainDiagnosticsArrow {display: none;}



/* mainCommunity */
.mainCommunityItem a {gap:15px;}
.mainCommunityThumb {border-radius:var(--borderR8);}
.mainCommunityTxt {gap:5px;}
.mainCommunityDate::before {width:26px; height:26px; font-size:16px;}
.mainSecHead .mainSecNav {display: none;}
.mainCommunity .mainControl{display: flex;}
.mainCommunity .pagination-progress {display:block;}


}