/* ================= Main 공통 ================= */
.main {color:#333}

/* ================= Bann ================= */
.Bann {position: relative;z-index: 1; display: flex; height: 100vh;}
.Bann .bgImg{position: absolute;width:100%;height: 100%; object-fit: cover; z-index: -1; top:0; left: 0; object-position: 70% 100%;pointer-events: none;}

.Bann .scroll-icon { position: absolute; bottom: 2em;left:50%;transform:translateX(-50%)  ;width: 2em; height: 2em; border-radius: 100%; border: 1px solid #fff; overflow: hidden;}
.Bann .scroll-icon i{color: #fff; animation: bannScroll 1.5s ease infinite;font-size:1.3em}
    
@keyframes bannScroll{
    0%{ transform: translateY(-15px); opacity: 0; }
    50%{ transform: translateY(0px); opacity: 1; }
    100%{ transform: translateY(15px); opacity: 0; }
}

@media (min-width:1441px) {
    .Bann .container{width:100%}    
}
@media (max-width:768px) {
    .Bann:after{position: absolute;;content:'';width: 100%;height: 100%;;left: 0; top: 0;;background:linear-gradient(to top, #000, transparent 50%);z-index: -1; opacity: 0.7;}
}

/* ================= Area ================= */
.Area{ position: relative;;min-height: 100vh; display: flex; align-items: center;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden; z-index: 1;}
.Area:before{content:'';background:url(/images/main/areaBG.jpg) no-repeat center center / cover ;position: fixed;content: '';width: 100%;height: 100vh;
    left: 0;top: 0;z-index: -1;pointer-events: none; }
.Area .miniLogo{width:10em}

/* ================= AboutUs ================= */
.AboutUs .box{display: flex; align-items: center; justify-content: center;padding:6em 2em; min-height:20em;color: #fff;position: relative;z-index: 1; overflow: hidden; background:#000;flex: 1 1 auto;}
.AboutUs .boxbg{position: absolute;z-index: -1; object-fit: cover ; width: 100%; height: 100%; transition: all 0.5s;}

.AboutUs .box:hover .boxbg{transform: scale(1.15); opacity: 0.6}

/* ================= Media ================= */
.Media {background: linear-gradient(to top, #212646 50% ,#fff 50%)}
.Media .titbox{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.Media .txtbox{min-height: 3em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.Media .emptybox{min-height: 20em; background:#f3f3f3; display: flex; justify-content: center; align-items: center;}

/* ===> Arrows-Btn */
.Media .sidebox .arr-btn{font-size:1.2em;position: relative; width: 2em;height: 2em; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.Media .sidebox .arr-btn:after{content: '';pointer-events: none;position: absolute;width: 100%;height: 100%;border:1px solid #fff; border-radius: 50%;}
.Media .sidebox .arr-btn:hover:after{background:rgba(255,255,255,0.1);transition: all 0.2s;}
.Media .sidebox .pagi{position: relative;bottom: auto; width: auto; margin:auto 2em}
.Media .sidebox .pagi .swiper-pagination-bullet{background: #fff;}
.Media .sidebox .arr-btn.swiper-button-lock{display: none;}


/* ===> 로하스메디 Quick */
.lohas {position:fixed; width:7.5rem; height:7.5rem; border-radius:50%; background-color:#82a8ee; z-index:99; bottom:3.5rem; right:3.5rem;     box-shadow: 0 0 7px rgb(0 0 0 / 30%); padding:1rem}
.lohas img{display:block; max-width:100%}