@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100%;background-color:#768177}

/* 텍스트 */
#mainVisual .txt_area{position:absolute;top:50%;left:50%;z-index:1003;width:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;color:#fff}
#mainVisual .txt01{opacity:0;margin-left:20px;font-size:17px;letter-spacing:-.4px;font-family:'notokr-medium'}
#mainVisual .txt02{opacity:0;margin:30px 0 0 -20px;font-size:75px;font-weight:500;line-height:68px;font-family:'Cinzel'}

/* 패럴랙스 */
#mainVisual .door_area{position:absolute;left:50%;top:50%;z-index:2;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;width:330px;height:450px}
#mainVisual #door01{position:absolute;top:0;left:0;width:330px;height:450px;border-radius:160px 160px 0 0;background-color:rgba(128,139,128,.6)}
#mainVisual #door02{position:absolute;;top:-30px;left:30px;width:330px;height:450px;border-radius:160px 160px 0 0;border:1px solid rgba(255,255,255,.2)}

/* 이미지 */
#mainVisual .main{position: relative;width:100%;height:960px;}
#mainVisual .main li div{width:100%;height:100%;transform:skewX(3deg);transition: all .4s}
#mainVisual .main li div.bg01{background: url(./main_banner_01.jpg) no-repeat center / cover;}
#mainVisual .main li div.bg02{background: url(./main_banner_02.jpg) no-repeat center / cover;}
#mainVisual .main li div.bg03{background: url(./main_banner_03.jpg) no-repeat center / cover;}
#mainVisual .main li.on div{transform:skewX(0deg);transition: all .8s cubic-bezier(0.165, 0.840, 0.440, 1.000)}

/* pager */
#mainVisual .pager{position: absolute;z-index: 2; bottom:34%;left:50%;transform: translateX(-50%);}
#mainVisual .pager span{margin:0 10px;width:5px;height:5px;background-color: #fff;}
 

/* 반응형 [s] */
@media (hover:hover){
#mainVisual .pager_dot li:hover{cursor:pointer}
}
@media (max-width:1024px){
#mainVisual .main{height:540px}
#mainVisual .txt01{font-size:16px}
#mainVisual .txt02{margin:25px 0 0 0;font-size:42px;line-height:1.2}
#mainVisual .door_area{width:220px;height:340px}
#mainVisual #door01{width:100%;height:100%;border-radius:120px 120px 0 0}
#mainVisual #door02{width:100%;height:100%;border-radius:120px 120px 0 0}
#mainVisual .main li{filter:brightness(0.6)}
#mainVisual .pager{bottom:28%;}
#mainVisual .pager_dot{margin:0px;top:unset;bottom:7%}
}
@media (max-width:768px){
#mainVisual .main{height:440px}
#mainVisual .txt01{font-size:15px}
#mainVisual .txt02{margin-top:20px;font-size:34px}
#mainVisual .door_area{display:none}
#mainVisual .main li div{transform: none;}
#mainVisual .pager{bottom:8%;}
#mainVisual .pager span{width:8px;height:8px;}
}
@media (max-width:480px){
#mainVisual .main{height:360px}
#mainVisual .txt01{font-size:14px}
#mainVisual .txt02{margin-top:15px;font-size:28px}
}
@media (max-width:380px){
#mainVisual .main{height:315px}
#mainVisual .txt01{font-size:13px}
#mainVisual .txt02{margin-top:12px;font-size:24px}
}
/* 반응형 [e] */