@charset "UTF-8";

body {overflow-x: hidden;}

/* cover */
.bg-event-wrap .cover-up, .bg-event-wrap .cover-down {position: absolute; width: 100%; height: 100%;}
.bg-event-wrap .cover-down {width: 71%; left: 49%; transform: skew(-30deg);}
.bg-event-wrap .cover-up::before, .bg-event-wrap .cover-up::after, .bg-event-wrap .cover-down::before, .bg-event-wrap .cover-down::after {content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transform: translateX(0); transition: transform 0.5s cubic-bezier(.75, 0, 0.1, 1);}
.bg-event-wrap .cover-up::before, .bg-event-wrap .cover-down::before {background: #fff; z-index: 99;}
.bg-event-wrap .cover-up::after {background: #C5135E; transition-delay: 0.5s; z-index: 98;}
.bg-event-wrap .cover-down::after {background: #1D2A75; transition-delay: 0.5s; z-index: 98;}
.bg-event-wrap .cover-up.on::before, .bg-event-wrap .cover-up.on::after, .bg-event-wrap .cover-down.on::before, .bg-event-wrap .cover-down.on::after {transform: translateX(100%);}


/*이미지 skew*/
.sub-top-wrap.pos {position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100%; z-index: 5;}
.bg-event-wrap {text-align: center; height: 100%; position: relative; z-index: 9;}
.bg-event-wrap:before {transition: all 1s; position: absolute; left: 0; content: ''; z-index: 8; width: 100%; height: 100%; background: rgba(0,0,0,.6); opacity: 0;}
.bg-event-wrap:after {transition: all 1s; content: ''; z-index: -1; position: absolute; right: 0; top: 0; width: 70%; height: 100%; background: url('/_user/intro/img/bg_04_off.jpg') no-repeat 60% 50%;}
.bg-event-wrap .skew-bg {transition: all 1s; transform: skewX(-30deg); position: relative; left: -20%; width: 70%; z-index: 10; height: 100%; overflow: hidden;}
.bg-event-wrap .skew-bg:before {content: ''; transition: all 1s; position: absolute; z-index: -1; width: 200%; height: 100%; left: 0; top: 0; background: #fff url('/_user/intro/img/bg_03_off.jpg') no-repeat 0 50%; transform: skew(30deg);}
.bg-event-wrap .skew-bg:after {content: ''; opacity: 0; position: absolute; transition: all 1s; left: 0; width: 200%; height: 100%; background: rgba(0,0,0,.6);}
.bg-event-wrap .skew-bg.on {width: 90%; box-shadow: 20px 0 50px rgba(0, 0, 0, 0.6);}
.bg-event-wrap .skew-bg.on:before {background-image: url('/_user/intro/img/bg_03_on.jpg'); left: 15%;}
.bg-event-wrap .skew-bg.off:after {opacity: 1; width: 100%; top: 0; height: 120%; box-shadow: -20px 0 50px rgba(0,0,0,.6) inset;}
.bg-event-wrap .skew-bg.off {width: 50%;}
.bg-event-wrap.off:before {opacity: 1;}
.bg-event-wrap.on:after {background-image: url('/_user/intro/img/bg_04_on.jpg'); width: 90%; background-position-x: 70%;}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
.box-wrap {position: absolute; left: 0; top: 0; z-index: 11; width: 100%; height: 100%; display: flex; justify-content: center; opacity: 0; animation: fadeIn 0.3s 1s forwards linear;}
.box-wrap .event-box {position: relative; width: 50%; text-align: center; color: #fff; transform: translateX(0); transition: all 1s;}
.box-inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.box-inner h3.box-tit {font-size: 50px; position: relative; word-break: keep-all; color: #fff;}
.event-box {transition: width 0.2s ease;}
.event-box h3.box-tit .bar {content: ''; position: absolute; z-index: -1; left: 0; bottom: 11px; width: 0; height: 30px; background: #C5135E; opacity: 0.8;}
.event-box .sky h3.box-tit .bar {background: #1D2A75;}
.box-inner>ul {height: 0; overflow: hidden; transition: all 0.3s;}
.event-box.on .box-inner>ul {margin-top: 20px;}
.event-box.no1.on .box-inner>ul {height: 410px !important;}
.event-box.no2.on .box-inner>ul {height: 200px !important;}
.box-inner>ul>li {width: 220px; height: 60px; border: 1px solid rgba(255,255,255,.5); margin-bottom: 10px;}
.box-inner>ul>li:last-child {margin-bottom: 0;}
.box-inner>ul>li>a {display: block; color: #fff; padding: 0 15px; line-height: 58px; font-size: 22px; position: relative;  overflow: hidden;}
/*.box-wrap .event-box.on {width: 70%;}*/
/*.box-wrap .event-box.off {width: 30%;}*/
.event-box.on h3.box-tit {font-size: 50px; position: relative; display: inline-block; word-break: keep-all;}
.event-box.on h3.box-tit .bar {transition: all 0.5s 0.8s; width: 100%;}
.event-box.off h3.box-tit {opacity: 0.5;}

.box-inner > a {display: flex; flex-direction: column; align-items: center;}
.top-tit {font-size: 30px; color: #fff; padding-bottom: 20px; width: max-content; display: flex; align-items: center; gap: 3px;}
.event-box.off .top-tit {opacity: 0.5;}
.top-tit .circle {width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 50%; background: #C5135E;}
.top-tit .circle.blue {color: #fff; background: #1D2A75;}

.box-inner a > em {display: none;}

@media screen and (max-width: 1140px) {
    .box-inner h3.box-tit, .event-box.on h3.box-tit {font-size: 45px;}
    .event-box h3.box-tit .bar {height: 22px;}
    .box-inner>ul>li {width: 210px; height: 55px;}
    .box-inner>ul>li>a {line-height: 53px; font-size: 20px;}
}
@media screen and (max-width: 1024px) {
    .bg-event-wrap:after {width: 50%; background-size: cover; background-position-x: 70%;}
    .bg-event-wrap.on:after {background-position-x: 80%;}
    .bg-event-wrap.on:after {width: 60%;}
    .bg-event-wrap .skew-bg {transform: skewX(0deg); left: 0; width: 50%;}
    .bg-event-wrap .skew-bg:before {transform: skew(0); width: 100%; height: 100%; background-position-x: 23%; background-size: cover;}
    .bg-event-wrap .skew-bg.on {width: 60%;}
    .bg-event-wrap .skew-bg.off {width: 40%;}
    .bg-event-wrap .skew-bg.on:before {left: 0; background-position-x: 15%;}
    .box-inner h3.box-tit, .event-box.on h3.box-tit {font-size: 39px;}
    .event-box h3.box-tit .bar {height: 20px; bottom: 9px;}
    .event-box.no1.on .box-inner>ul {height: 380px !important;}
    .event-box.no2.on .box-inner>ul {height: 185px !important;}
    .box-inner>ul>li {width: 195px;}
    .box-inner>ul>li>a {font-size: 18px;}
    .bg-event-wrap .cover-down {transform: skew(0);}
    .top-tit {font-size: 21px;}
}
@media screen and (max-width: 768px){
    .bg-event-wrap {height: 100%;}
    .box-inner h3.box-tit, .event-box.on h3.box-tit {font-size: 32px;}
    .event-box h3.box-tit .bar {height: 13px; bottom: 4px;}
    .event-box.no1.on .box-inner>ul {height: 290px !important;}
    .event-box.no2.on .box-inner>ul {height: 140px !important;}
    .box-inner>ul>li {width: 140px; height: 40px;}
    .box-inner>ul>li>a {font-size: 15px; line-height: 40px;}
    .box-wrap {display: flex;; flex-direction: column;}
    .box-wrap .event-box {width: 100% !important; height: 50%; transition: all 0.7s;}
    .box-wrap .event-box::before {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #111; opacity: 0.4;}
    .bg-event-wrap:after {width: 100%;}
    .bg-event-wrap .skew-bg {width: 100% !important;}
    .bg-event-wrap .skew-bg.on:before {height: 50%}
    .bg-event-wrap.on:after {width: 100% !important;}

    .box-inner > a {border: 1px solid rgba(255, 255, 255, 0.50); border-radius: 20px; padding: 30px 20px;}
    .box-inner > a > em {width: 95px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #fff; border-radius: 100px; background: rgba(255, 255, 255, 0.30); margin-top: 30px;}
}