.sec-main-visual { position:relative; height: 100vh; padding:var(--top-height) var(--top-padding) 50px; }

#main-slide { position:relative; height:100%; animation:fadeinzoom 2s 1s 1; }

@keyframes fadeinzoom {
    0%	{ opacity:0; transform:scale(0.8); }
    100%	{ opacity:1; transform:scale(1.0); }
}

#main-slide video { object-fit:cover; width:100%; height:100%; }
#main-slide .youtude { position:relative; padding-bottom:56.25%; overflow:hidden; }
#main-slide iframe { position:absolute; left:0; top:0; width:100%; height:100%; }

#main-slide .swiper { overflow:hidden; height:100%; border-radius:30px; }
#main-slide .swiper-slide { overflow:hidden; }

#main-slide .swiper-slide .img { position:absolute; left:0; top:0; width:100%; height:100%; background: none center/cover no-repeat; transform: scale(1); transition-duration: 700ms; }
#main-slide .swiper-slide .img:before { content: ""; display: block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3); }

#main-slide .swiper-slide-active .img { transform: scale(1.1); }

#main-slide .swiper-slide .c { height:100%; padding:0; border:1px solid transparent;/*IE Bug:: border 부분을 넣어야함*/ }

#main-slide .content { position:absolute; left: 10px; right: 10px; top: 73%; transform: translateY(-50%); color:white; text-align: center; display:none; z-index:9; }
#main-slide .swiper-slide-active .content { display:block; }
#main-slide .content .subhead { animation-delay: 400ms; margin-bottom:0px;  font-size:2.7rem; }
#main-slide .content .head { line-height: 130%; animation-delay: 400ms; display:inline-block; font-size:2.7rem; font-weight: 800; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) }
#main-slide .content .desc { margin-top:0.8rem; font-weight:400; animation-delay: 600ms; font-size:1.25rem; }


#main-slide .ctrl { position:absolute; right:100px; bottom:40px; display:flex; align-items:center; z-index:9; }

#main-slide .pg { display:flex; width:auto; }

#main-slide .pg .circle { position:relative; display:flex; width:32px; height:32px; cursor:pointer; }
#main-slide .pg .circle:before,
#main-slide .pg .circle:after { content:""; position:absolute; }
#main-slide .pg .circle:before { width:8px; height:8px; left:calc(50% - 4px); top:calc(50% - 4px); background:#fff; border-radius:99px; z-index:9; }

#main-slide .pg .circle.on:after { left:0; top:0; right:0; bottom:0; border-radius:99px; border:2px solid rgba(0,0,0,.2); }

#main-slide .pg .circle > span { position:relative; overflow:hidden; width:50%; height:100%; display:none; }
#main-slide .pg .circle.on > span { display:block; }

#main-slide .pg .circle .circle-fill1 { border-radius:99px 0 0 99px; }
#main-slide .pg .circle .circle-fill2 { border-radius:0 99px 99px 0; }

#main-slide .pg .circle .rotate { position:absolute; left:0; top:0; right:0; bottom:0; transform: rotate(-180deg); z-index:2; }

#main-slide .pg .circle .circle-fill1 .rotate { border-radius:99px 0 0 99px; border:2px solid #fff; border-right:0; transform-origin: 100% 50%; }
#main-slide .pg .circle .circle-fill2 .rotate { border-radius:0 99px 99px 0; border:2px solid #fff; border-left:0; transform-origin: 0 50%; }

#main-slide .pg .circle.on .rotate { animation: rotate-loading 1.25s linear forwards 1; }
#main-slide .pg .circle.on .circle-fill1 .rotate { animation-delay:1.25s; }

@keyframes rotate-loading {
    0%  { transform: rotate(-180deg); }
    100% { transform: rotate(0deg); }
}


#main-slide .playstop { color:#fff; width:40px; text-align:center; cursor:pointer; line-height:1; }
#main-slide .playstop .fa-play,
#main-slide .playstop.on .fa-pause { display:none; }
#main-slide .playstop.on .fa-play { display:block; }

#main-slide .nav { position:relative; width:30px; height:30px; cursor:pointer; }
#main-slide .nav:before,
#main-slide .nav:after { content:""; position:absolute; width:3px; height:12px; border-radius:99px; background:#fff; left:calc(50% - 1.5px); }

#main-slide .nav:before { bottom:12.5px; }
#main-slide .nav:after { top:12.5px; }

#main-slide .nav.prev:before,
#main-slide .nav.next:after { transform:rotate(45deg); }

#main-slide .nav.prev:after,
#main-slide .nav.next:before { transform:rotate(-45deg); }


@media (max-width: 1024px) {
    .sec-main-visual { height:calc(100vh - var(--top-height) - 200px); padding:0; margin-top:var(--top-height); }
    
    #main-slide { animation:none; }
    #main-slide .swiper { border-radius:0; }
    #main-slide .swiper-slide:before { content:""; animation:fadeinzoom 2s 1; position:absolute; left:20px; top:65px; right:20px; bottom:20px; border-radius:20px; border:2px solid rgba(255,255,255,.5); z-index:2; }
    
    #main-slide .content .head { font-size:2em; padding:0 1rem; }
    
    #main-slide .next { float:right; }
}

@media (max-width: 767px) {
    
    #main-slide .swiper-slide:before { top:60px; }
    
    #main-slide .content { top: 67%;padding:30px; }
    #main-slide .content .subhead { margin-bottom:15px; font-size:1.6em;}
    #main-slide .content .head { font-size:1.6em; padding:0 1rem; }
    #main-slide .content .desc { margin-top:10px; }
    
    #main-slide .ctrl { left:50%; transform:translateX(-50%); right: auto; }
    
    #main-slide .pg .circle { width:24px; height:24px; }
    #main-slide .pg .circle:before { width:6px; height:6px; left:calc(50% - 3px); top:calc(50% - 3px); }
    
    #main-slide .playstop { width:24px; }
    #main-slide .nav { width:24px; }
    
}