

/* review */
.review{
    padding: 18rem 0 6rem;
}
.review .background{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 75%;
}
.review .top_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.review .title b{
    color: var(--sub1);
}
.review .title h2{
}
.review .review_slide{
    position: relative;
    margin-top: 6rem;
    width: 140%;
    padding: 3rem;
}
.review .review_slide .swiper-slide{
    position: relative;
    height: auto;
    padding: 5rem 5rem 6rem; 
    background-color: #fff;
    box-shadow: .9rem 1.2rem 2.4rem 1.2rem rgba(0, 0, 0, .07);
    border-radius: 2rem;
    max-width: 680px;
}
.review .review_slide .swiper-slide .profile_box{
    display: flex;
    align-items: center;
}
.review .review_slide .swiper-slide .profile_box h5{
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.004em;
    color: #555;
}
.review .review_slide .swiper-slide .profile_box p{
    display: inline-block;
    padding-left: 2rem;
    margin-left: 2rem;
    border-left: .5px solid #a9a9a9;
    font-weight: 300;
    font-size: clamp(12px, 1.8rem, 18px);
    color: #a9a9a9;
}
.review .review_slide .swiper-slide h3{
    font-weight: 600;
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: #333;
}
.review .review_slide .swiper-slide .p_box{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.review .review_slide .swiper-slide .p_box p{
    font-size: clamp(14px, 1.8rem, 18px);
    line-height: 1.5;
    letter-spacing: 0;
    color: #555;
}
.review .swiper-scrollbar {
    position: relative;
    margin-top: 6rem;
    width: 100%;
    background: rgba(62, 62, 62, .2); 
    border-radius: 8px;
    height: 8px;
}
.review .swiper-scrollbar-drag {
    background: #555; /* 이동하는 막대 색 */
    border-radius: 8px;
    height: 100%;
    transition: .3s;
}
.review button.next{
    position: absolute;
    left: -7%;
    top: 60%;
    z-index: 2;
}
.review button.next img{
    width: 100%;
    object-fit: contain;
}



/* intro */

/* introduce */
.introduce{
    padding: 6rem 0 0;
}
.introduce .top_box{
     width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    justify-content: space-evenly;
}
.missionbox img{
    width: 360px;
}
.missionbox img.misiion_m{
    display: none;
}


.introduce .profile{
    position: relative;
    margin-top: 10rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 5%;
}
.introduce .profile::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, #FFFFFF, #ECEFF7);
    filter: blur(4px);
}
.introduce .profile img{
    margin-left: -7%;
    width: 640px;
    max-width: 60%;
    object-fit: contain;
}
.introduce .profile .text_box{
    padding: 10rem 0;
}
.introduce .profile .text_box h2{
    margin: 1.2rem 0 3.6rem;
}
.introduce .profile .text_box ul:first-child{
    margin-top: 0;
}
.introduce .profile .text_box ul{
    margin-top: 1.6rem;
}
.introduce .profile .text_box ul li{
    position: relative;
    font-weight: 400;
    font-size: clamp(14px, 1.8rem, 18px);
    line-height: 1.5;
    padding-left: 1.2rem;
    color: #333;
}
.introduce .profile .text_box ul li::before{
    content: '';
    position: absolute;
    left: 0;
    top: .6em;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #191919;

}


/* --- Our Difference (Responsive) --- */
.difference {
    background: #222222;
    color: #e8edf3;
    padding: 60px 16px;
    /* background-image: url(/img/ips.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diff-inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.diff-kicker {
  font-size: 14px;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: .5rem;
}
.diff-title {
  font-weight: 800;
  line-height: 1.25;
  font-size: 28px;
  margin: 0 0 32px;
}

/* grid */
.diff-grid {
display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 83%;
    margin: 0 auto;
    justify-items: center;
}
@media (max-width: 900px){
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .diff-grid { grid-template-columns: 1fr; }
}

/* card */
.diff-card {
  background: #1f5eff;
  color: #ffffff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 260px;
}
.diff-card .icon img{
    width: 35px;

}
.diff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* icon */
.icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.icon svg {
  width: 42px; height: 42px;
  color: #fff;
}

/* texts */
.card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 6px 0 8px;
}
.card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #f3f6ff;
  opacity: .9;
  margin: 0;
}












/* layout */
.core-wrap{
    width: 100%;
    color:#e8edf3;
        background-image: url(/img/ips.jpg);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;background-size: cover;
}
.core-inner{max-width:1400px;margin:0 auto;padding:72px 16px}
.core-head .kicker{font-size:13px;letter-spacing:.08em;opacity:.7;margin:0 0 6px}
.core-head .titles{font-size:32px;line-height:1.25;margin:0 0 24px;}
.titles{
    font-size:32px;line-height:1.25;margin:0 0 24px;
}
.core-body{display:grid;grid-template-columns:420px 1fr;gap:48px;align-items:start}
@media (max-width: 980px){
  .core-body{grid-template-columns:1fr;gap:28px}
}

/* tabs (2x2 tiles) */
.core-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;border:0;cursor:pointer;border-radius:6px;
  background:#4b4f57;color:#ffffff;padding:0;/* square tile */
  aspect-ratio:1/1; /* 유지 */
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.tab .ico{font-size:28px;line-height:1}
.tab strong{font-size:14px;font-weight:600}
.tab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.tab.is-active{background:#1f5eff}

/* panels */
.core-panels{min-height:260px}
.panel h3{font-size:20px;margin:0 0 10px;color:#ffffff;font-weight:800}
.panel p{margin:0 0 14px;color:#cfd7e5;line-height:1.7}
.bullets{display:flex;gap:18px;padding:0;margin:10px 0 0;list-style:none}
.bullets li{font-size:14px;position:relative;padding-left:24px}
.bullets li:before{
  content:"";position:absolute;left:0;top:50%;width:16px;height:16px;border-radius:50%;
  background:#1f5eff;transform:translateY(-50%);
    background-image:url("/img/ch.png"); /* 투명 배경의 흰 체크 */
  background-repeat:no-repeat;
  background-position:center;
  background-size:9px 6px;
}

/* dark glass feel (선택) */
/* .core-wrap{background:
  linear-gradient(rgba(15,17,20,.92),rgba(15,17,20,.92)),
  url('/img/bg-placeholder.jpg') center/cover no-repeat;
} */

/* 기본값: 전부 숨김 */
.core-panels .panel { display: none; }
/* 활성 패널만 보이기 */
.core-panels .panel.is-active { display: block; }

/* 혹시 리셋이 hidden을 깨면 강제 */
[hidden] { display: none !important; }

/* mobile fine-tune */
@media (max-width:560px){
  .tab strong{font-size:13px}
  .panel h3{font-size:18px}
}






/* differentiation */
section.differentiation{
            padding: 30rem 0;
}
.differentiation{
    background: linear-gradient(to bottom, #FFFFFF, #F3F6F9);
    overflow: visible;
    height: calc(var(--vh) * 440);
}
.differentiation .wrap{
    height: 100%;
}
.differentiation .sticky{
    position: sticky;
    top: 2rem;
    height: calc(var(--vh) * 100 - 12rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.differentiation .diff-kicker,
.differentiation .diff-title{
    text-align: center;
}
.differentiation .fold_cards{
    position: relative;
    margin: 8rem auto 0;
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.differentiation .fold_cards .card{
    width: 100%;
    height: 75%;
    flex-shrink: 0;
    background: #fff;
    border-radius: 3.6rem;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .08);
    padding: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    transform-origin: top;
    transform: perspective(1800px);
    transition: all 1.7s;
}
.differentiation .fold_cards .card:nth-child(1) {
    background-image: url(/img/Frame01.png);
      background-repeat:no-repeat;
  background-position:center;
  height: 100%;
}
.differentiation .fold_cards .card:nth-child(2) {
    background-image: url(/img/Frame02.png);
      background-repeat:no-repeat;
  background-position:center;
  height: 100%;
}
.differentiation .fold_cards .card:nth-child(3) {
    background-image: url(/img/Frame03.png);
      background-repeat:no-repeat;
  height: 100%;
  background-position:center;
}

.differentiation .fold_cards .card p{
    font-size: 2.1rem;
    margin-top: 1.8rem;
    font-weight: 300;
    color: #D9D9D9;
    text-shadow: .4rem .4rem 3.5rem rgba(0, 0, 0, 0.1);
}
.differentiation .fold_cards .card p span{
    font-weight: 500;
    color: #fff;
}


/* ====== Layout & Base ====== */
.stats-sec{
  background:#0f1114; color:#e8edf3;
  background-image: radial-gradient(1200px 400px at 70% 90%, rgba(13,18,27,.4), transparent);
}
.stats-inner{
    max-width:1400px;margin:0 auto;padding:0px 16px;display:grid;grid-template-columns:520px 1fr;gap:48px}
@media (max-width:980px){ .stats-inner{grid-template-columns:1fr;gap:28px} }

.kicker{font-size:14px;opacity:.7;margin:0 0 10px}
/* .title{font-size:34px;line-height:1.25;margin:0 0 18px;font-weight:800;color:#fff} */
.desc{color:#cfd7e5;line-height:1.8;margin:0 0 16px}
.src{color:#9aa7ba;font-size:13px;margin:8px 0 0}

.introduce .top_box .title.l{
    width: 50%;
}






/* qna */
.qna{
    padding: 6rem 0;
}
.qna .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rem;
}
.qna .back_img_top{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    /* background: url(/img/qna_back_top.png) no-repeat; */
    background-size: cover;
    background-position: center top;
    z-index: -1;
}
.qna .back_img_bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    /* background: url(/img/qna_back_bottom.png) no-repeat; */
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
}
.qna article{
    width: 100%;
    max-width: 1400px;
    display: flex;
       justify-content: space-between;
    flex-wrap: wrap;
}
.qna article .reser{
    flex-direction: row-reverse !important;
}
.qna article div b{
    font-size: 7.4rem;
    font-weight: 400;
    color: var(--sub1);
    display: block;
    margin-bottom: 2.4rem;
}
.qna article .a_box{
}
.qna article .a_box .p_box p{
    color: #222;
}
.qna article .a_box .p_box p:first-child{
    font-weight: 700;
    padding-bottom: 1.2rem;
}

.q_box{
    width: 40%;
}
.a_box{
    width: 60%;
    padding-left: 8rem;
}

.map_part{
    display: flex;
}
.map_part>div{
    width:50%;
}
/* 배경(실루엣 이미지는 경로 교체) */
.diag-sec{
  background:#0f1114;
  color:#e8edf3;
  background-image:
    linear-gradient(180deg, rgba(15,17,20,.0) 0%, rgba(15,17,20,.35) 70%, rgba(15,17,20,.55) 100%),
    url("/img/gge.jpg"); /* <- 너 이미지 경로로 바꿔 */
  background-size:cover; background-position:center;
  height: 800px;
}
.diag-inner{
    height: 100%;
}
section.diag-sec{
    padding: 0;
}
/* 그리드 */
.diag-panels{
    height: 100%;
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  min-height:420px;
}
@media (max-width:1024px){
  .diag-panels{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .diag-panels{grid-template-columns:1fr}
}

/* 패널 카드 */
.panel{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:40px 24px;
  /* 세로 구분선 */
  border-left:1px solid rgba(255,255,255,.08);
}
.panel:first-child{border-left:0}
.panel::after{
  /* 어두운 베일 (비활성 상태) */
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.30);
  transition:background .25s ease;
}
.panel.is-active::after{
  /* 활성 파란 오버레이 */
  background:#2D62DC4D;
}

/* 내용 레이어 */
.panel-content{position:relative; z-index:1; max-width:320px}
.panel .num{
  display:block; font-size:14px; letter-spacing:.08em; margin-bottom:10px;
  color:#2D62DC; font-weight:700;
}

.desc{
  font-size:14px; line-height:1.85; color:#d1dbeb; margin:0 auto 20px;
}

/* 하얀 동그라미 + 파란 화살표 버튼 (활성 패널에만 표시) */
.more{
  width:36px; height:36px; border-radius:50%;
 display:inline-grid; place-items:center;
  margin:8px auto 0; position:relative; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  background-image:url("/img/aar.png"); /* 투명 배경의 흰 체크 */
  background-repeat:no-repeat;
  background-position:center;
}
.more::before{
  content:""; width:10px; height:10px; border:2px solid #1f5eff; border-left:0; border-top:0;
  transform:rotate(-45deg);
}
.panel.is-active .more{opacity:1; pointer-events:auto}
.panel.is-active .more:hover{transform:translateY(-2px)}


/* visit */
.visit .wrap{
    max-width: 1400px;
}
.visit #map{
    margin-top: 8rem;
    width: 100%;
    height: 50rem;
    border-radius: 1.6rem;
}
.visit .address{
    margin-top: 2.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.visit .address div{
    margin-right: auto;
    font-weight: 700;
    font-size: 2.4rem;
    color: #222;
}
.visit .address div img{
    width: 2.9rem;
    object-fit: contain;
    margin-right: 1.2rem;
}
.visit .transportation{
    margin-top: 8rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.visit .transportation > div{
    width: 100%;
    padding: 6rem;
    border-radius: 2.4rem;
    border: 1px solid #1E81CE;
    background: rgba(238, 245, 251, .12);
    display: flex;
}
.visit .transportation > div:last-child{
    background: rgba(238, 245, 251, .6);
}
.visit .transportation > div img{
    width: 8.4rem;
    object-fit: contain;
    padding-right: 6.4rem;
    padding-left: .4rem;
    box-sizing: content-box;
    border-right: 1px solid #3f64c381;
    margin-right: 6rem;
}
.visit .transportation > div .text_box{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.visit .transportation > div .text_box h3{
    font-weight: 700;
    color: #222;
}
.visit .transportation > div .text_box h4{
    font-weight: 300;
    color: #555;
}


.got{
    margin-top: 60px;
}
.got img{width: 100%;}


/* 영역 */
.hero-slick{position:relative;
display: none !important;}
.hero-slick .slide{
  height:520px; background-size:cover; background-position:center;
  display:grid; place-items:center; color:#fff; text-align:center;
}
.hero-slick .cap h2{font-size:40px; margin:0 0 8px; font-weight:800}
.hero-slick .cap p{opacity:.9; margin:0}

/* 화살표 */
.hero-slick .slick-prev, .hero-slick .slick-next{
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.35); z-index:5;
}
.hero-slick .slick-prev:before, .hero-slick .slick-next:before{display:none}
.hero-slick .slick-prev, .hero-slick .slick-next{display:grid; place-items:center}
.hero-slick .slick-prev::after, .hero-slick .slick-next::after{
  content:""; width:12px; height:12px; border:2px solid #fff; border-left:0; border-top:0;
}
.hero-slick .slick-prev::after{transform:rotate(135deg)}
.hero-slick .slick-next::after{transform:rotate(-45deg)}

/* 도트 바 형태 */
.hero-slick .slick-dots{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:8px; width:min(560px, 80%); margin:0;
}
.hero-slick .slick-dots li{flex:1 1 0; height:4px; margin:0}
.hero-slick .slick-dots li button{
  width:100%; height:100%; padding:0; border-radius:3px;
  background:rgba(255,255,255,.35); text-indent:-9999px;
}
.hero-slick .slick-dots li.slick-active button{background:#1f5eff}

/* 반응형 */
@media (max-width:900px){
  .hero-slick .slide{height:420px}
  .hero-slick .cap h2{font-size:28px}
}








/* 호버 시 살짝 강조 (데스크탑만) */
@media (hover:hover){
  .panel:not(.is-active):hover::after{background:#2D62DC4D}
}


@media (min-width: 1920px) {

    
}
@media (max-width: 1440px) {

    .review{
        padding-top: 16rem;
    }
    .review button.next{
        left: -5%;
        width: 5.4rem;
    }


}
@media (max-width: 1024px) {
    main h2{
        font-size: 4.8rem;
    }
    .solution iframe{
        margin-top: 6rem;
    }
    .introduce .top_box{
    flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: center;
        gap: 2.4rem;
        display: flex;
    }
    .introduce .profile{
        margin-top: 2.8rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 6rem;
    }
    .introduce .profile::before{
        display: none;
    }
    .introduce .profile img{
        position: relative;
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        padding-top: 5%;
        background-color: #ECEFF7;
        border-radius: 6px;
    }
    .introduce .profile .text_box{
        padding: 0;
    }
    .problem{
        margin: 0;
    }
    .disease img{
        width: 85%;
    }
    .differentiation .fold_cards .card{
        padding: 3.6rem;
    }

    .differentiation .fold_cards .card p{
        font-size: clamp(13.8px, 1.8rem, 18px);
    }
    .review .review_slide{
        width: 120%;
    }
    .review .review_slide .swiper-slide{
        max-width: 550px;
    }


    .view .view_slide .swiper-slide{
        max-width: 82%;
    }
    .view .swiper-pagination{
        margin-top: 2rem;
    }
    .view .swiper-pagination-fraction {
        font-size: 2.2rem;
    }
    .view  .swiper-pagination-current { 
        font-size: 3.6rem;
    }
    .view  .swiper-pagination-total {
        font-size: 2.2rem;
    }


}

@media (max-width: 768px) {

    .review{
        padding-top: 14rem;
    }
    .review .top_box{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 2.4rem;
    }
    .review .review_slide{
        width: 100%;
        overflow: visible;
        padding: 0;
    }
    .review .review_slide .swiper-slide{
        max-width: none;
    }
    .review .review_slide .swiper-slide .p_box p br{
        display: none;
    }
    .review button.next{
        display: none;
    }
  
    .missionbox img.misiion_pc{
    display: none;
    }
    .missionbox img.misiion_m{
        display: block;
    }
    .review .review_slide .swiper-slide{
        padding: 1.2rem;
    }


    .diff-grid{
        width: 100%;
    }
.differentiation .fold_cards{
    width: 100%;
}
    .differentiation .fold_cards .card:nth-child(1),
    .differentiation .fold_cards .card:nth-child(2),
    .differentiation .fold_cards .card:nth-child(3){
        height: 50%;
    }
    section.differentiation{
        padding-bottom: 10rem;
    }


      .review{
        padding-top: 14rem;
    }
    .review .top_box{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 2.4rem;
    }
    .review .review_slide{
        width: 100%;
        overflow: visible;
    }
    .review .review_slide .swiper-slide{
        max-width: none;
    }
    .review .review_slide .swiper-slide .p_box p br{
        display: none;
    }
    .review button.next{
        display: none;
    }
    .process .card .t_name button{
        font-size: 1.8rem;
        padding: 2.4rem .6rem;
    }
    .process .card .t_name button span{
        display: none;
    }
    .process .card .card_contents{
        height: 560px;
    }
    .process .card .card_contents article{
        flex-direction: column-reverse;
        height: 100%;
    }
    .process .card .card_contents article .l_box{
        width: 100%;
        height: auto;
        max-width: none;
        padding: 5rem 4rem;
    }
    .process .card .card_contents article .l_box p:first-of-type{
        margin-top: 4rem;
    }
    .process .card .card_contents article img{
        width: 100%;
        height: 30rem;
        max-width: none;
    }
    .qna .back_img_top{
        background-size: contain;
    }
    .qna .back_img_bottom{
        background-size: contain;
    }
    .qna article div b {
        font-size: 6rem;
    }
    .problem {
        padding-bottom: 18rem;
    }
    .view .view_slide button{
        width: 5.6rem;
    }

    .q_box{
        width: 100%;
    }
    .a_box{
        width: 100%;
        padding-left: 0;
    }
    .visit .address{
        flex-wrap: wrap;
        row-gap: 1.6rem;
    }
    .visit .address div{
        width: 100%;
    }
    .visit .transportation > div{
        row-gap: 4rem;
        padding: 4.8rem;
    }
    .visit .transportation > div img{
        padding: 0;
        border: 0;
    }
    .p_box h3{
        font-size: 1.8rem;
    }
    .qna {
        padding: 23rem 0;
    }
    .differentiation .sticky{
        display: none;
    }
    .hero-slick{
        display: block !important;
    }
    .differentiation{
        height: auto;
    }
    .hero-slick .slick-dots,
        .brand-slick .slick-dots { display:none !important; }



    }
@media (max-width: 480px) {
      .visit .transportation > div{
        row-gap: 3rem;
        padding: 3.6rem;
    }
    .visit .transportation > div h4 br{
        display: none;
    }
    footer .f_top .logo{
        height: auto;
    }
}


