/* banner css */
.hm-banner { float: left; width: 100%; overflow-x: hidden;}
.slider-container { float: left; width: 100%; position: relative; }
#slick-1 .slick-dots li { width: 8px; height: 8px; border-radius: 25px; background: rgba(255, 255, 255,0.5);}
#slick-1 .slick-dots li button { width: 8px; height: 8px;}
#slick-1 .slick-dots li.slick-active, #slick-1 .slick-dots li:hover {  background: #fff;}
#slick-1 .slick-dots li button, #slick-1 .slick-dots li button:before { color: transparent;  opacity: 0; }

/* progress bar */
.slider-progress { width: 100%; height: 6px;  position: absolute; bottom:-3px; left: 0; max-width: 1270px; margin: 0 auto;  right: 0; }
.slider-progress .progress { width: 0%; height: 3px; background: #fff; margin: 0;}

.hm-banner .slider-for-home.slick-slider .slick-slide .banner-img img { width: 100%; float: left; height: 100%; object-fit: cover;}
.hm-banner .slick-slider { height: 100%;}
.hm-banner .slick-list { height: 100%;}
.hm-banner .slider-for-home.slick-slider .slick-slide .banner-txt { position: absolute; top: 140px; width: 52%; left: calc((100% - 1170px + 1rem) / 2); z-index: 9;}
.hm-banner .slider-for-home.slick-slider .slick-slide .banner-txt h1 {width: 100%; float: left; color: #ffffff; font-size: 75px; line-height: 80px; font-family: 'Pretendard-Black'; margin-bottom: 20px;}
.hm-banner .slider-for-home.slick-slider .slick-slide .banner-txt p{width: 100%; float: left; color: #fff; font-size: 16px; line-height: 26px; font-family: 'Pretendard-Light'; margin-bottom: 30px;}
.hm-banner .slider-for-home.slick-slider .slick-slide .banner-txt a.saber-btn{background: url(../images/btn-bg.svg) no-repeat 0 0; background-size: cover; width: 229px; height: 62px; display: flex; align-items: center; justify-content: center; font-family: 'Pretendard-Bold'; font-size: 16px; line-height: 26px; color: #fff; transition:all .5s ease;}
.hm-banner .slider-for-home.slick-slider .slick-slide .banner-txt a.saber-btn:hover{background: url(../images/botton-02.svg) no-repeat 0 0; background-size: cover; color: #000;}

#slick-1 .slider-nav-ban { position: absolute; bottom: 60px; right: -100px; width: 48%; z-index: 99;}
/* #slick-1 .slider-nav-home.slick-slider { margin-top: 60px; display: flex; align-items: flex-end; flex-wrap: wrap; min-height: 230px; } */
#slick-1 .slider-nav-home .slick-slide  { margin-right: 12px; position: relative; float: left; overflow: hidden; border-radius: 12px; position: relative; transition: all 0.5s ease;}
.slider-nav-home-cnt{position: absolute; left: 0; bottom: 0; width: 100%;}
#slick-1 .slider-nav-home .slick-slide h4 {width: 100%; float: left;  font-family: 'Pretendard-Regular'; color: #fff; font-size: 18px; line-height: 23px; margin-bottom: 12px;}
#slick-1 .slider-nav-home .slick-slide a{color: #F17470;font-family: 'Pretendard-Regular'; font-size: 14px; line-height: 26px; text-decoration: underline;}
#slick-1 .slider-nav-home .slick-slide img { height: 260px; cursor: pointer; width: 100%; float: left; transition: all 0.4s ease; object-fit: cover; object-position: center; }
/* .deixta-slider .slider-container .slider-nav .slick-slide.slick-active.slick-current > div > div  img{transform: scale(1.1, 1.1); } */
#slick-1 .slider-nav-home  .slick-slide.slick-active.slick-current > div > div {border: 2px solid #fff;} 
#slick-1 .slider-nav-home  .slick-slide > div > div { overflow: hidden; float: left; position: relative; border: 1px solid rgba(255,255,255,0.45);border-radius: 12px;box-shadow: 0 10px 30px 0 rgba(0,0,0,0.47);}
#slick-1 .slider-nav-home  .slick-track {  display: flex; align-items: center;}
.slider-nav-home-cnt{position: absolute; left: 0; bottom: 0; padding: 20px;}
#slick-1 .slider-nav-home .slick-next.slick-arrow { right:0px;background: url(../images/ico-arrow-right-white.svg) no-repeat 0 0; width: 41px; height: 40px; position: absolute; right: auto; left:50px; bottom: -84px; top: auto; }
#slick-1 .slider-nav-home .slick-prev.slick-arrow { background: url(../images/ico-arrow-left-white.svg) no-repeat 0 0;   width: 41px; height: 40px; position: absolute; right: auto; left: 0; bottom: -84px; top: auto;}
#slick-1 .slider-nav-home .slick-prev.slick-arrow::before { display: none;}
#slick-1 .slider-nav-home .slick-next.slick-arrow::before { display: none;}
#slick-1 .slider-nav-home  .slick-slide.slick-active.slick-current img {height: 275px;}
#slick-1 .slider-nav-home  .slick-slide.slick-active.slick-current h4{font-family: 'Pretendard-Bold'; font-size: 20px; line-height: 25px;}
#slick-1 .slider-nav-home  .slick-slide.slick-active.slick-current a{font-family: 'Pretendard-ExtraBold';}

#slick-1 .pagingInfo { position: relative; margin-left: 26px; font-size: 42px; color: #ffffff; font-family: 'Montserrat-Regular'; line-height: 46px;}
#slick-1 .pagingInfo:before { position: absolute; display: block; content: "0"; left: -25px; font-size: 42px; color: #ffffff; font-family: 'Montserrat-Regular';}

#slick-1 .slider-for-home .slick-slide > div { float: left; width: 100%;}

#slick-1 .ban-slider-controls { float: left; width: auto; position: absolute; left: calc((100% - 1170px + 1rem) / 2); bottom: 60px; z-index: 9; display: flex; align-items: center; justify-content: right; margin-top: 0px; column-gap: 32px;}
#slick-1 .ban_arrows { display: flex; align-items: center;}
#slick-1 .ban_arrows .slick-next.slick-arrow { margin-left: 10px; right:0px;background: url(../images/arrow-right-w.svg) no-repeat 0 0; background-size: cover; width: 48px; height: 46px; position: relative; right: auto;  top: auto; transform: none;}
#slick-1 .ban_arrows .slick-prev.slick-arrow {  background: url(../images/arrow-left-w.svg) no-repeat 0 0; background-size: cover; width: 48px; height: 46px; position: relative; right: auto; top: auto; transform: none; left: auto;}
#slick-1 .ban_arrows .slick-prev.slick-arrow::before { display: none;}
#slick-1 .ban_arrows .slick-next.slick-arrow::before { display: none;}
#slick-1 .ban_arrows .slick-next.slick-arrow:hover {background: url(../images/arrow-right-r.svg) no-repeat 0 0; background-size: cover;}
#slick-1 .ban_arrows .slick-prev.slick-arrow:hover {background: url(../images/arrow-left-r.svg) no-repeat 0 0; background-size: cover;}
.ban_dot {
    display: block;
}

.slick-dots {
    display: flex !important;
    justify-content: center;
}

/* START TOOLTIP STYLES */
[tooltip] { position: relative;}
[tooltip] { position: relative;}
[tooltip]::before,[tooltip]::after { text-transform: none;  font-size: 0.9em;  line-height: 1;  user-select: none;  pointer-events: none;  position: absolute;  display: none;  opacity: 0;}
[tooltip]::before { content: ''; border: 5px solid transparent; z-index: 1001;}
[tooltip]::after {content: attr(tooltip); font-family: 'Montserrat-Regular'; text-align: center; min-width: 3em; max-width: 21em; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;padding: 12px 15px; border-radius: .3ch; background: #fff; color: #999999; z-index: 1000; /* absurdity 2 */ font-size: 16px; letter-spacing: -0.07px;}
[tooltip]:hover::before,[tooltip]:hover::after { display: block;}
[tooltip='']::before,[tooltip='']::after { display: none !important;}
[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before { bottom: 100%; border-bottom-width: 0; border-top-color: #fff;}
[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after { bottom: calc(100% + 6px);}
[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after { left: -68%; transform: translate(-50%, -.5em);}
[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before { right: 7px; top: -6px;}
[tooltip][flow^="down"]::before { top: 18px; border-top-width: 0; border-bottom-color: #bfbfbf;}
[tooltip][flow^="down"]::after { top: calc(100% + 5px);}
[tooltip][flow^="down"]::before,[tooltip][flow^="down"]::after { left: 50%; transform: translate(-50%, 0.5em);}
[tooltip][flow^="left"]::before { top: 50%; border-right-width: 0; border-left-color: #bfbfbf; left: calc(0em - 5px); transform: translate(-.5em, -50%);}
[tooltip][flow^="left"]::after { top: 50%; right: calc(100% + 5px); transform: translate(-.5em, -50%);}
[tooltip][flow^="right"]::before { top: 50%; border-left-width: 0; border-right-color: #bfbfbf; right: calc(0em - 5px); transform: translate(.5em, -50%);}
[tooltip][flow^="right"]::after { top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%);}

/* KEYFRAMES */
@keyframes tooltips-vert {
to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,[tooltip]:not([flow]):hover::after,[tooltip][flow^="up"]:hover::before,[tooltip][flow^="up"]:hover::after,[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after { animation: tooltips-vert 300ms ease-out forwards;}
[tooltip][flow^="left"]:hover::before,[tooltip][flow^="left"]:hover::after,[tooltip][flow^="right"]:hover::before,[tooltip][flow^="right"]:hover::after { animation: tooltips-horz 300ms ease-out forwards;}

/* START TOOLTIP STYLES */
.camera-ico .tooltip { border-radius: 5px; background: #ffffff; bottom: 100%; color: #fff;  display: block; right: 0; margin-bottom: 15px; opacity: 0; padding: 10px 18px; pointer-events: none; position: absolute; width:auto; min-width: 150px; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px);
transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out;  -ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out; transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); }

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.camera-ico .tooltip:before { bottom: -20px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%; }
	
/* CSS Triangles - see Trevor's post */
.camera-ico .tooltip:after {border-left: solid transparent 8px; border-right: solid transparent 8px; border-top: solid #ffffff 8px; bottom: -8px; content: " ";
height: 0; right: 10px; margin-left: -13px; position: absolute; width: 0; }
.camera-ico:hover .tooltip { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px);
transform: translateY(0px);}
.camera-ico .tooltip p { font-size: 15px; color: #000000; font-family: 'Montserrat-Regular'; line-height: 20px;}
.camera-ico .tooltip p span { display: block; font-size: 12px; display: block; font-family: 'Montserrat-Regular';}

.hm-banner .slick-slide {position: relative;}
.hm-banner .slick-slide::after {position: absolute;content: "";left: 0;top: 0;background: linear-gradient(180deg,rgba(0, 16, 27, 0.49) 0%, rgba(0, 16, 27, 0) 59%);width: 100%;height: 100%;}
#slick-1 .slider-nav-ban .slick-slide::after {display: none;}