/*devo-theme-main-visual*/

#devo-theme-main-visual{position: relative;z-index: 99;overflow: hidden;width: 100%;height: 100vh;}
#devo-theme-main-visual .devo-slide-container {height:100vh;}
#devo-theme-main-visual .devo-slide-container > div{position: absolute;top: 0;left: 0;z-index:2;width: 100%;height: 100%;}
#devo-theme-main-visual .img{position: relative;overflow: hidden;}
#devo-theme-main-visual .img > img{transform: scale(1.05);transition: all 2s;}
#devo-theme-main-visual .img.on > img{transform: scale(1.0);}
#devo-theme-main-visual .devo-slide-container .img:before {content: "";display:block;background: rgba(0,0,0,0.4);position: absolute;top: 0;left: 0;z-index:1;width: 100%;height: 100%;}
#devo-theme-main-visual .devo-slide-container .video:before {content: "";display:block;background: rgba(0,0,0,0.1);position: absolute;top: 0;left: 0;z-index:1;width: 100%;height: 100%;}
#devo-theme-main-visual .devo-theme-main-visual-text-container{position:absolute;top:0;left:0;width:100%;height:100%;display: flex;flex-direction: column;align-items: center;place-content: center;color:#fff;}
#devo-theme-main-visual .devo-text01 {font-size: 70px;transition-delay: .2s;font-weight: 700; line-height:1.2;}
#devo-theme-main-visual .devo-text02 {font-size: 70px;font-weight: 700; transition-delay: .4s; line-height:1.2; }
#devo-theme-main-visual .devo-text03{transition-delay: .6s;font-size:var(--main-title03);color:rgba(255,255,255,0.9); font-weight:600; line-height:1.2; padding-bottom:10px; letter-spacing:0;}
#devo-theme-main-visual .devo-text04 span{font-size:var(--main-text01);color:rgba(255,255,255,0.8); font-weight:400; transition-delay: .8s; line-height: 1 !important; padding:0 40px;}
#devo-theme-main-visual .devo-theme-main-visual-text-container [class*="devo-text"]{color:#fff;text-align:center;transform: translateY(10px);opacity: 0;transition: all 1s;}
#devo-theme-main-visual .devo-theme-main-visual-text-container.on [class*="devo-text"]{transform: translateY(0);opacity: 1;}
#devo-theme-main-visual .devo-slide-btn-container [class*="devo-slide-btn"]{padding:0 20px;display:inline-block;text-align: center;border:2px solid transparent;min-width: 200px;line-height:55px;cursor:pointer;text-transform:uppercase;transition:all .3s;}
#devo-theme-main-visual .devo-slide-btn-container .devo-slide-btn01{background: #fff;border-color: #fff;color: #000;}
#devo-theme-main-visual .devo-slide-btn-container .devo-slide-btn01:hover{background: var(--main-color);border-color: var(--main-color);color: #fff;}
#devo-theme-main-visual .devo-slide-btn-container .devo-slide-btn02{border-color: #fff;color: #fff;background: transparent;}
#devo-theme-main-visual .devo-slide-btn-container .devo-slide-btn02:hover{background: var(--main-color);border-color: var(--main-color);}

#devo-theme-main-visual .devo-progress-container { position: relative;top: -1px;width: 100%;height: 1px;background: rgba(255, 255, 255, 0.2); margin:60px 0;}
#devo-theme-main-visual .devo-progress-bar { position: absolute; top: 0; left: 0; transform: translateX(-100%); width: 20%;height: 1px;background: #fff;animation: progress 6s linear 1;}


@keyframes progress {
    from {left: 0; transform: translateX(-100%);}
    to {left: 100%;transform: translateX(100%);}
}

#devo-theme-main-visual .swiper-slide.active .devo-btn01{opacity:1;transform:translateY(0);transition:all 0.6s 1.2s;}
#devo-theme-main-visual .devo-slide-btn-container .devo-btn01 {padding: 15px 0;display: inline-block;position: relative;width:100%;height:auto;line-height:initial;z-index: 1;overflow: hidden;border: 3px solid rgba(255,255,255,0.3);color: #fff;background-color: transparent;text-align: center;text-transform: uppercase;font-family:"NotoKr_B", sans-serif;transition:all .3s;}
#devo-theme-main-visual .devo-slide-btn-container .devo-btn01:before {content: '';width: 0;height: 500%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);background: #000;transition: .5s ease;display: block;z-index: -1;}
#devo-theme-main-visual .devo-slide-btn-container .devo-btn01:hover::before {width: 150%;}
#devo-theme-main-visual .devo-slide-btn-container .devo-btn01:hover{color: #fff;border: 3px solid #000;}



#devo-theme-main-visual .slick-dots{position:absolute;bottom:20%;left: 50%;transform: translateX(-50%);font-size: 0;cursor: pointer;transition: all .5s;}
#devo-theme-main-visual .slick-dots > li{margin: 0 4px;display:inline-block;width: 8px;height: 8px;background: rgba(255,255,255,0.5);border-radius: 100%;vertical-align: middle;}
#devo-theme-main-visual .slick-dots > li.slick-active{width:25px;height:8px;background: rgba(255,255,255,1);border-radius: 30px;}
#devo-theme-main-visual .slick-arrow {position: absolute; top: 48%; transform: translateY(-48%); z-index: 100; width: 69px; height: 49px; color: #fff; font-size: 0;}
#devo-theme-main-visual .slick-prev {left: 0; background: url('http://devocean.kr/theme/Devocean-01/img/devo-main-visual-arrow.svg') no-repeat center center; background-size: contain; opacity: 0.7; transition: opacity 0.3s ease;}
#devo-theme-main-visual .slick-next {right: 0; background: url('http://devocean.kr/theme/Devocean-01/img/devo-main-visual-arrow.svg') no-repeat center center; background-size: contain; transform: translateY(-50%) rotateY(180deg); opacity: 0.7; transition: opacity 0.3s ease;}
#devo-theme-main-visual .slick-prev:hover, #devo-theme-main-visual .slick-next:hover {opacity: 1; filter: brightness(1.2);}





#devo-theme-main-visual .devo-theme-main-visual-scroll {bottom: 0;color: rgba(255,255,255,0.8);}
#devo-theme-main-visual .scroll-line {position:relative;margin: 0 auto;overflow: hidden;width: 1px;height: 100px;background: rgba(255,255,255,0.3);}
#devo-theme-main-visual .scroll-line:before {content: '';position: absolute;top: 0;left: 50%;width: 2px;height: 0;background-color: rgba(255,255,255);transform: translateX(-50%);animation: scrollAnimation01 1.2s infinite;}
@keyframes scrollAnimation01 {
    0%{
        height: 0;
    }
    100%{
        height: 105%;
    }
}

#devo-theme-main-visual .scroll-line:after {content: '';position: absolute;top: 0;left: 50%;width: 2px;height: 0;background-color: rgba(255,255,255,0.3);transform: translateX(-50%);animation: scrollAnimation02 1.2s infinite .6s;}
@keyframes scrollAnimation02 {
    0%{
        height: 0;
    }
    100%{
        height: 105%;
    }
}

#devo-theme-main-visual .scroll{position:absolute;left:50%;bottom:40px;z-index:10;transform:translateX(-50%);width:90px;height:90px;display:flex;align-items:center;justify-content:center;text-align:center;color: #fff;}
#devo-theme-main-visual .scroll .devo-text{position:absolute;left:0;top:0;width:100%;height:100%;background:url(../../../img/devo-scroll-text.png) no-repeat;animation:scroll 10s infinite linear;}
@keyframes scroll{
    0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}
}







/*배너 이미지가 없을 경우------------------------------------------------------------------------------------------------------------------ */
#devo-theme-main-visual .devo-slider-container {height: 100%;}
#devo-theme-main-visual .devo-slider {height: 100%;}
#devo-theme-main-visual .devo-no-banner {height: 100%;background: #ddd;  align-items: center;place-content: center;}
#devo-theme-main-visual .devo-no-banner .devo-title{font-size:var(--main-title03);}

@media screen and (max-width:1440px) {
    #devo-theme-main-visual .devo-text01, #devo-theme-main-visual .devo-text02 {font-size: 40px;}
}


@media screen and (max-width:1280px){
	#devo-theme-main-visual { height: calc(100vh ); }
    #devo-theme-main-visual .devo-slide-container {height:calc(100vh );}
}


@media screen and (max-width:576px){
	#devo-theme-main-visual .devo-text01, #devo-theme-main-visual .devo-text02 {font-size: 40px;}
    #devo-theme-main-visual .devo-slide-btn-container [class*="devo-slide-btn"]{padding:12px 0;line-height:initial;min-width: 35vw;}
    #devo-theme-main-visual .slick-dots {position:absolute;left:50%;transform:translateX(-50%);display: flex !important;}
    #devo-theme-main-visual .slick-dots li {margin: 0 5px;}
    #devo-theme-main-visual .slick-dots li button {font-size: 0; background: rgba(255,255,255,0.4); border-radius: 50%; width:8px; height:8px;cursor: pointer;}
    #devo-theme-main-visual .slick-dots li.slick-active button {background: rgba(255,255,255,1); }
	#devo-theme-main-visual .devo-no-banner .devo-title{padding:40px 20px 20px 20px;}
	#devo-theme-main-visual .scroll  {display:none;}

	
}

@media screen and (max-width:320px){
	.devo-mt-40{margin-top:30px !important;}
}