/* ===============================================================
    * main
=============================================================== */
.main {width: 100%; height: 100vh; background: url(/img/index/01.jpg) no-repeat right / cover;}
.main-tit {position: relative; width: 100%; height: 100%; overflow: hidden;}
.main-tit h2 {
    width: 100%; height: 100%;
    text-align: right;
    position: absolute; left: 0; top: 0; font-size: 180px;
    background: url(/img/index/01.jpg) no-repeat center / cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    z-index: 1;
    padding: 130px 17% 0 0;
}
.main-tit h3 {
    text-align: right;
    width: 100%; height: 100%;
    position: absolute; left: 0; top: 0; font-size: 180px;
    text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
    padding: 130px 17% 0 0;
}
.main-reserve {
    position: absolute; 
    cursor: pointer;
    top: 350px; right: 18%;
    z-index: 100;
    width: 340px; height: 50px; line-height: 50px; 
    text-align: center; border: 1px solid rgba(255,255,255,.6);
    font-size: 16px; font-weight: 300; letter-spacing: 0.1em; color: #fff;
    transition: .3s;
}
.main-reserve span {vertical-align: middle; display: inline-block; width: 20px; height: 1px; background: #fff; margin: 0 10px;}
.main-reserve:hover {background: #fff; color: #222;}
.main-reserve:hover span {background: #222;}
@media (max-width: 820px){
    .main {background: url(/img/index/01-mo.jpg) no-repeat center / cover;}
    .main-tit h2 {
        text-align: center; font-size: 24.00vw;
        padding: 32.00vw 0 0;
    }
    .main-tit h3 {
        text-align: center; font-size: 24.00vw;
        padding: 32.00vw 0 0;
    }
    .main-reserve {
        top: 60vw; right: 50%; transform: translateX(50%);
        width: 53.60vw; height: 8.00vw; line-height: 8.00vw;
        font-size: 3.20vw; letter-spacing: 0.04em;
    }
    .main-reserve span {width: 2.67vw; margin: 0 2.67vw;}
}


/* ===============================================================
    * main-video
=============================================================== */
.main-video {position: relative; width: 100%;}
.video-wrap {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;}
.video-wrap iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.main-video .control {position: absolute; bottom: 210px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center;}
.main-video .control li {display: inline-block; padding: 0 5px;}
.main-video .control li a {display: block; font-size: 18px; color: #fff; width: 40px; height: 40px; line-height: 35px; border-radius: 50%; border: 2px solid #fff; text-align: center;}
.main-video .control li i {color: #fff;}
.main-video .control .play-pause a.hide{ display: none;}
.main-video .control .mute-onoff a.hide{ display: none;}
.main-video .scrolldown {position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); text-align: center;}
.main-video .scrolldown img {display: block; margin-bottom: 10px;}
.main-video .scrolldown span {font-size: 20px; font-weight: 300; letter-spacing: 0.01em; color: #fff;}
@media (max-width: 820px){
    .main-video .control {display: none;}
    .main-video .scrolldown {display: none;}

}

/* 영상비율맞춘버전 */
.mo-video {width: 100%;}
.mo-video__wrap {position: relative; width: 100%; height: 0; padding-bottom: 177.92%; overflow: hidden;}
.mo-video__wrap iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
/* height 100vh 버전 */
/* .mo-video {width: 100%; height: calc(100vh - 13.33vw);}
.mo-video__wrap {position: relative; width: 100%; height: 0; padding-bottom: 203.2%; overflow: hidden;}
.mo-video__wrap iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;} */