@charset "utf-8";

#mainVisual{position:relative;height:850px}
#mainVisual .slider{height:850px}

/* 텍스트 */
#mainVisual .txt_area{position:absolute;top:40%;left:50%;z-index:101;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:100%;max-width:1280px;padding-left:55px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.7);font-family:'notokr-regular'}
#mainVisual .txt_area .stit{opacity:0;margin-left:-20px;font-size:41px;line-height:1.3;white-space:pre-line;color:#fff;font-family:'notokr-light'}
#mainVisual .txt_area .btit{opacity:0;margin-left:20px;padding:25px 0 50px;white-space:pre-line}
#mainVisual .txt_area .stit span{font-size:70px;font-family:"notokr-bold"}


/* 슬라이더 */
#mainVisual .slider li{height:100%;background:center no-repeat;background-size:cover}
#mainVisual .slider li:nth-child(1){background-image:url(./main_img01.jpg)}
#mainVisual .slider li:nth-child(2){background-image:url(./main_img02.jpg)}
#mainVisual .slider li:nth-child(3){background-image:url(./main_img03.jpg)}


/* 컨트롤러 */
#mainVisual .bar{overflow:hidden;position:absolute;left:0;bottom:0;z-index:101;width:100%;height: 100px;background-color:rgba(0, 0, 0, 0.2)}
#mainVisual .bar .inner{position: relative;width:100%;max-width:1200px;margin:0 auto;}
#mainVisual .main_controls{display:inline-block;position: relative;width: 242px;height:100px;line-height:100px;color:#fff}
#mainVisual .main_controls .counter{display:inline-block;margin-left: 45px;font-size:14px;font-weight:700;font-family:'Play'}
#mainVisual .main_controls .counter .current{padding-right: 118px}
#mainVisual .main_controls .counter .total{color: #787878}
#mainVisual .main_controls a{font-size:0;padding: 12px;}
#mainVisual .main_controls .prev{position:absolute;left:0;top: 0;}
#mainVisual .main_controls .next{position:absolute;right:0;top: 0;}
#mainVisual .main_controls a:before{content:"\f104";font-size: 14px;color:#fff;font-family:'fontawesome';}
#mainVisual .main_controls a.bx-next:before{content:"\f105"}
#mainVisual .main_pager{position: absolute;left:76px;top:50px;font-size:0}
#mainVisual .bx-pager{overflow:hidden;position:relative;width:90px;height:2px;background-color:rgba(255, 255, 255, 0.38)}
#mainVisual .bx-pager .bx-pager-link{display:block;position:absolute;left:0px;width:0;height:2px;background-color:var(--primary)}
#mainVisual .bx-pager .bx-pager-link.active{-webkit-animation:fiil 4s ease-out 0s;animation:fiil 4s ease-out 0s}
@-webkit-keyframes fiil{	0%{width:0}100%{width:100%}}
@keyframes fiil{0%{width:0}100%{width:100%}}

#mainVisual .bx-controls-auto{position:absolute;left:50%;bottom: 64px;margin-left:-356px;z-index:999}
#mainVisual .bx-controls-auto-item{position:absolute;left:0;top:0px}
#mainVisual .bx-controls-auto-item a{display:none;padding:10px;font-size:0;color:#fff}
#mainVisual .bx-controls-auto-item a.active{display:none}
#mainVisual .bx-controls-auto-item a:before{content:url('./start.png');font-size:10px;color:#fff;font-family:'fontawesome'}
#mainVisual .bx-controls-auto-item a.bx-stop:before{content:url('./stop.png')} 

/* 반응형 [s] */
@media (max-width:1280px){
#mainVisual .txt_area{padding-left:135px}
#mainVisual .bx-controls-auto{left:260px;margin-left:0}
}
@media (max-width:1024px){
#mainVisual{height:740px}
#mainVisual .slider{height:740px}
#mainVisual .txt_area .stit{font-size:35px}
}
@media (max-width:768px){
#mainVisual{height:600px}
#mainVisual .slider{height:600px}
#mainVisual .txt_area{top:50%;transform:translate(-50%,-50%);padding:0 30px;font-size:15px}
#mainVisual .txt_area .stit{font-size:30px;word-break:keep-all}
#mainVisual .txt_area .btit{max-width:530px;white-space:normal;word-break:keep-all}
#mainVisual .bar{height:70px}
#mainVisual .main_controls{height:70px;line-height:70px}
#mainVisual .main_pager{top:35px}
#mainVisual .bx-controls-auto{bottom:50px}
}
@media (max-width:480px){
#mainVisual{height:500px}
#mainVisual .slider{height:500px}
#mainVisual .txt_area{padding:0 15px;font-size:14px}
#mainVisual .txt_area .stit{font-size:25px}
#mainVisual .txt_area .btit{padding-bottom:0}
#mainVisual .bar{height:55px}
#mainVisual .main_controls{height:55px;line-height:55px}
#mainVisual .main_pager{top:27px}
#mainVisual .bx-controls-auto{bottom:42px}
}
@media (max-width:380px){
#mainVisual{height:460px}
#mainVisual .slider{height:460px}
#mainVisual .txt_area .stit{font-size:23px}
}
/* 반응형 [e] */