@charset "utf-8";

/* 비주얼 */
.visual-wrap{position: relative; overflow: hidden;}
.visual-wrap .txt-wrap{position: absolute; top: 52%; z-index: 3; width: 100%;}
.visual-wrap .txt-inner{max-width: 1540px; width: 100%;margin: auto; }
.visual-wrap .txt-box {position: absolute; left: 0px; top: 34%; z-index: 3; width: 100%;}
.visual-wrap .txt-box p{font-size: 60px; font-family: mb; color: #fff; line-height: 70px;}
.visual-wrap .txt-box span{font-size: 26px; font-family: tr; color: #fff; margin-top: 20px; display: inline-block;}
.visual-wrap .visual-box img {position: relative; left: 50%; display: block; max-height: 940px; height: 100%; transform: translate(-50%,0); max-width: none;}

/* 마우스 스크롤 */
.scroll-wrap{position: absolute; bottom: 60px; left: 0; z-index: 1; width: 100%;}
.scroll-box{max-width: 1540px; margin: 0 auto; display: flex; align-items: center;}
.scroll-box .mouse { width: 40px; height: 55px; border: 1px solid rgba(255,255,255,0.3); border-radius: 60px; position: relative;}
.scroll-box .mouse::before { content: ''; width: 4px; height:4px; position: absolute;top: 10px;  left: 50%; transform: translateX(-50%); background: #fff; border-radius: 50%; opacity: 1; animation: wheel 2s infinite;-webkit-animation: wheel 2s infinite;}
.scroll-box p{font-size: 14px; font-family: tsb; color: #fff; opacity: 0.5; margin-left:20px;}

@keyframes wheel {
    to { opacity: 0; top: 40px; }
}
@-webkit-keyframes wheel {
    to { opacity: 0; top: 40px; }
}

/* control */
.visual-wrap .control-wrap{display: flex; align-items: center; margin-top: 40px;}
.visual-wrap .control{display: flex; align-items: center; }
.visual-wrap .swiper-pagination-bullet{background: none; border: 1px solid #fff; width: 10px; height: 10px; margin-right: 10px;}
.visual-wrap .swiper-pagination-bullet-active{background: #fff; width: 15px; height: 15px;}
.visual-wrap .control-btn{margin-left: 10px;}
.control-btn button{width: 10px; height: 10px; text-indent: -9999px;}
.visual-wrap .control-btn .stop { display: none;background: url('../images/stop-ic.png') no-repeat center;}
.visual-wrap .control-btn .stop.on{display: block;}
.visual-wrap .control-btn .play { background: url('../images/play-ic.png') no-repeat center;}
.visual-wrap .control-btn .play {display: none;}
.visual-wrap .control-btn .play.on {display: block;}
 
@media screen and (min-width:2000px){
    .visual-wrap .visual-box img {width: 100%;}
} 

@media screen and (max-width:1600px){
    .visual-wrap .txt-inner , .scroll-box{padding: 0 30px;}
} 

@media screen and (max-width:1400px){
    .visual-wrap .visual-box img{height: 700px; object-fit: cover; width: 100%;}
    .visual-wrap .txt-box p{font-size: 50px; line-height: 60px;}
    .visual-wrap .txt-box span{font-size: 21px;}
} 

@media screen and (max-width:1200px){
    .visual-wrap .txt-box p{font-size: 40px; line-height: 60px;}
    .visual-wrap .txt-box span{font-size: 18px;}
} 

@media screen and (max-width:768px){
  	.visual-wrap .txt-wrap {top: 57%;}
    .visual-wrap .txt-inner , .scroll-box{padding: 0 20px;}
    .visual-wrap .visual-box img{height: 550px; object-fit: cover; width: 100%;}
    .visual-wrap .control-wrap{margin-top: 20px;}
    .visual-wrap .txt-box p{font-size: 26px; line-height: 40px; font-family: tsb;}
    .visual-wrap .txt-box span{font-size: 15px; line-height: 1.2; width: 330px;}
    .scroll-wrap{display: none;}
}