@charset "UTF-8";
/* 공통 ------------------------------------------------------------- */
* { font-family: inherit; }
body { font-family: 'Pretendard'; font-size: 16px; word-break: keep-all; }
.myoungjo { font-family: 'YESMyoungjo-Regular'; }
.gmarket { font-family: 'GmarketSans'; }
.inner { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; }
.sub { padding: 6em 0; }
.yellow { color: #fff000; }
.green { color: #37f4ac; }
.pink { color: #ff4064; }
.blue { color: #0e4bb2; }
.white { color: #0e4bb2; }

/* 헤더 */
header { width: 100%; font-size: 1.25em; color: #fff; background-color: #0e4bb2; text-align: center; z-index: 999; border-bottom: 1px solid #2763c8; }
header .gnb ul { display: flex; border-left: 1px solid #2763c8; }
header .gnb li { width: 25%; border-right: 1px solid #2763c8; }
header .gnb li a { padding: 1.8em 0; display: block; }
header .gnb li span { display: block; }
header .gnb li:hover { background-color: #2763c8; }
header .gnb li:last-child { background-color: #fa1163; }
header .gnb li:last-child:hover { background-color: #e94e84; }
header.fix { position: fixed; left: 0; top: 0; }
header.fix li a { padding: 1em 0; }
header.fix li span { display: none; }

/* 푸터 */
footer { padding: 3% 0; text-align: center; background-color: #000; }
footer h4 { font-size: 1.25em; margin: 0.5em 0 1em; color: #fff; }
footer p { font-size: 1em; color: #888; }
footer h6 { font-size: 0.875em; margin-top: 0.5em; color: #555; }

.homepage { font-size: 1.5em; padding: 0.5em 1.25em; position: fixed; right: 0; bottom: 0; margin: 3%; background-color: #0e4bb2; color: #fff; border-radius: 5em; box-shadow: 3px 3px 15px rgba(0,0,0,0.3);}

/* 비주얼 */
.visual { font-size: 1.5em; background: url(../img/bg_visual.jpg) no-repeat center/cover; text-align: center; }
.visual .inner { padding: 1em 0; display: flex; align-items: center; flex-direction: column; }
.visual strong { display: block; }
.visual span { font-size: 1em; letter-spacing: 0.5em; font-weight: 300; color: #58a6cf; }
.visual h2 { margin-top: 5em; line-height: 1; }
.visual h2 * { background: linear-gradient(to right, #47E091, #0C46B3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.visual h2 small { font-size: 3.25em; }
.visual h2 strong { font-size: 4.5em; font-weight: 700; }
.visual .txt { font-size: 1em; margin: 1em 0 2em; }
.visual .txt strong { font-size: 2em; text-shadow: 2px 2px 2px rgba(0,0,0,0.3); }
.visual .txt small { font-size: 1em; color: #547981; }
.visual .txt p { font-size: 1.25em; padding: 0 0.5em; margin-top: 0.5em; font-weight: 600; position: relative; }
.visual .txt p::before, .visual .txt p::after { content:""; width: 0.08em; height: 80%; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); background-color: #0e4bb2; }
.visual .txt p::before { left: 0; }
.visual .txt p::after { right: 0; }
.visual .link { display: flex; color: #fff; justify-content: center; margin-bottom: 5em; }
.visual .link a { font-size: 1.25em; padding: 1em 2em; }
.visual .link a:nth-child(1) { background-color: #fa1163; }
.visual .link a:nth-child(2) { background-color: #3c3c3c; }

/* 메인 */
.main { line-height: 1; }
.main section { padding: 8em 0; overflow: hidden; }
.main .title { text-align: center; margin-bottom: 3em; }
.main .title small { font-size: 1.5em; font-weight: 300; letter-spacing: 0.25em; padding-left: 0.25em; text-transform: uppercase; display: block; margin-bottom: 1em; }
.main .title h2 { font-size: 4.5em; font-weight: 700;}
.main .title h5 { font-size: 2.5em; margin: 0.5em 0; }
.main .title h2 + img { width: 21em; margin-top: 2em; }
.main .title p { font-size: 1.5em; margin-top: 0.5em;}
.main .list { display: flex; flex-wrap: wrap; }
.main .list li { margin-right: 2%; margin-bottom: 2%; }
.main .list1 li { width: 49%; }
.main .list1 li:nth-child(2n) { margin-right: 0; }
.main .list2 li { width: 32%; }
.main .list2 li:nth-child(3n) { margin-right: 0; }
.main .list3 { justify-content: center; }
.main .list3 li { width: 23.5%; }
.main .list3 li:nth-child(-n+3) { margin-left: 1%; margin-right: 1%; }
.main .list3 li:last-child { margin-right: 0; }

/* 배경 */
#sec01 { background: url(../img/bg_sec01.jpg) no-repeat center/cover; }
#sec02 { color: #fff; background-color: #37f4ac; }
#sec04 { background: url(../img/bg_sec04.jpg) no-repeat center/cover; }
#sec05 { background: url(../img/bg_sec05.jpg) no-repeat center bottom/cover; color: #fff; }
#sec06 { background: url(../img/bg_sec06.jpg) no-repeat center bottom/cover; }
#sec07 { background: url(../img/bg_sec07.jpg) no-repeat center bottom/cover; color: #fff; }
#sec08 { background: url(../img/bg_sec08.jpg) no-repeat center bottom/cover; }
#sec09 { background: url(../img/bg_sec09.jpg) no-repeat center bottom/cover; }
#sec10 { background: url(../img/bg_sec10.jpg) no-repeat center bottom/cover; color: #fff; }
#sec11 { background: url(../img/bg_sec11.jpg) no-repeat center bottom/cover; color: #fff; }
#sec12 { background: url(../img/bg_sec12.jpg) no-repeat center bottom/cover; }
#sec14 { background: url(../img/bg_sec14.jpg) no-repeat center top/cover; }

/* 컬러
#sec05 .title .gmarket,
#sec10 .title .gmarket { color: #fff000; }
#sec06 .title .gmarket { color: #0e4bb2; }
#sec09 .title .gmarket { color: #ff4064; }
#sec07 .title .gmarket,
#sec11 .title .gmarket { color: #fff; }
#sec08 .title .gmarket,
#sec12 .title .gmarket { color: #0e4bb2; }
*/

/* sec01 */
#sec01 .inner { display: flex; position: relative; padding: 0 3%; }
#sec01 h2 { font-size: 5em; line-height: 1.3; flex-grow: 1; font-weight: 300; position: relative; }
#sec01 h2 div { display: flex; align-items: center; }
#sec01 h2 hr { flex-grow: 1; height: 1px; background-color: #000; border: 0; display: inline-block; }
#sec01 .txt { text-align: center; }
#sec01 .date { font-size: 7.25em; margin-bottom: 0.3em; font-weight: 700; }
#sec01 .date span { position: relative; }
#sec01 .date span::after { font-weight: 400; font-size: 0.2em; display: block; position: absolute; top: 90%; left: 50%; transform: translateX(-50%); letter-spacing: 1.675em; padding-left: 1.675em; }
#sec01 .date span:nth-child(1)::after { content:"SAT"; }
#sec01 .date span:nth-child(2)::after { content:"SUN"; }
#sec01 .time { font-size: 3.25em; font-weight: 700; }
#sec01 .addr { font-size: 2.25em; margin: 0.25em 0; font-weight: 700; }
#sec01 .hash { font-size: 2.25em; }
#sec01 .hash span { margin-right: 0.875em; }
#sec01 .hash span:last-child { margin-right: 0; }

/* sec02 */
#sec02 .title > img { width: 3.75em; }
#sec02 .img { text-align: center; }
#sec02 .img img { width: 90%; max-width: 32em; }

/* sec03 */
#sec03 .inner { max-width: 1200px; }
#sec03 .video { width: 100%; padding-top: 56%; position: relative; background-color: #ddd; }
#sec03 .video video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

/* sec04 */
#sec04 .list { line-height: 1.3; }
#sec04 .list li { border-radius: 1em; box-shadow: 5px 5px 20px rgba(0,0,0,0.3); background-color: #fff; overflow: hidden; }
#sec04 .list .txt { padding: 1.5em 1em; }
#sec04 .list p { font-size: 1.25em; margin-bottom: 0.5em; text-align: center; }
#sec04 .list small { font-size: 1em; padding-left: 1.5em; color: #666; display: block; }
#sec04 .list small i { margin-left: -1.5em; margin-right: 0.5em; }
#sec04 .list img { width: 100%; }

/* sec05 ~ sec12
.country .list .img { margin-bottom: 1em; box-shadow: 5px 5px 0 rgba(0,0,0,0.6);}
.country .list .img img { width: 100%; }
.country .list p { font-size: 1.875em; }
.country .ticket { width: 80%; max-width: 845px; display: flex; align-items: center; position: relative; margin: auto; margin-top: 3em; background-color: #fff; border-radius: 2em; }
.country .ticket .tit { font-size: 2em; width: 7.65em; padding: 1em 0; font-weight: 700; text-align: center; border-radius: 1em 0 0 1em; }
.country .ticket .tit h4 { margin: 0.5em 0; }
.country .ticket .txt { font-size: 1.875em; padding: 0 1em; border-radius: 0 1em 1em 0; flex-grow: 1; color: #000; }
.country .ticket .txt li { padding: 0.5em 0; }
.country .ticket .star, .country .ticket .img { position: absolute; }
.country .ticket .star { width: 4.125em; right: 105%; top: 15%; }
.country .ticket .img { width: 20em; left: 95%; bottom: -15%; }
.country .ticket1 .tit { background-color: #40cb96; color: rgba(0,0,0,0.6); }
.country .ticket1 .txt strong { color: #40cb96; }
.country .ticket1 .star { filter: invert(92%) sepia(15%) saturate(5594%) hue-rotate(1deg) brightness(108%) contrast(103%); }
.country .ticket2 .tit { background-color: #0e4bb2; color: rgba(255,255,255,0.6);}
.country .ticket2 .txt strong { color: #0e4bb2; }
.country .ticket2 .star { filter: invert(43%) sepia(73%) saturate(4037%) hue-rotate(325deg) brightness(101%) contrast(101%); }
.country .ticket3 .tit { background-color: #ff4064; color: rgba(255,255,255,0.6);}
.country .ticket3 .txt strong { color: #ff4064; }
.country .ticket3 .star { filter: invert(92%) sepia(15%) saturate(5594%) hue-rotate(1deg) brightness(108%) contrast(103%); }
*/
/* 20221226 수정 */
#sec05, #sec10 { --point: #fff000; }
#sec06 { --point: #0e4bb2; }
#sec09 { --point: #ff4064; }
#sec07, #sec11 { --point: #fff; }
#sec08, #sec12 { --point: #0e4bb2; }
.country .title .gmarket { color: var(--point); }
.country .con { display: flex; justify-content: space-between; align-items: center; }
.country .img { width: 45%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.country .img img { max-width: 1920px; height: 100%; }
.country .txt { width: 52%; }
.country .txt small { font-size: 0.75em; }
.country .txt > div { margin-top: 2em; }
.country .txt > div:nth-child(1) { margin-top: 0; }
.country .txt h4 { font-size: 2.25em; margin-bottom: 0.5em; font-weight: 700; }
.country .txt p { font-size: 1.125em; margin-bottom: 0.5em; line-height: 1.5; }
.country .txt p:last-child { margin-bottom: 0; }
.country .txt h5 { font-size: 1.375em; font-weight: 600; margin-bottom: 0.5em; }
.country .txt h3 { font-size: 2.875em; font-weight: 700; color: var(--point); }
.country .txt h3 small { font-size: 0.5em; vertical-align: middle; }
.country .txt a { font-size: 1.5em; margin-top: 0.5em; background-color: #000; color: #fff; font-weight: 700; padding: 0.5em 2em; display: inline-block; }
.country .txt .margin { display: inline-block; width: 1em; }



/* sec13 */
#sec13 .img { text-align: center; }
#sec13 .img img { width: 42.5em; }

/* sec14 */
#sec14 .title p { padding: 0.3em 1.25em; color: #fff; background-color: #333; display: inline-block; border-radius: 5em; }
#sec14 .bo_w { font-size: 1.125em; padding: 5% 2em; max-width: 800px; margin: auto; background-color: #fff; box-shadow: 5px 5px 20px rgba(0,0,0,0.2); }
#sec14 .bo_w input, #sec14 .bo_w select { border-color: #ddd; }
#sec14 .bo_w li { display: flex; align-items: center; }
#sec14 .bo_w li > span { width: 25%; }
#sec14 .bo_w li > div { flex-grow: 1; }
#sec14 .bo_w li > div input { padding: 0 0.5em; }
#sec14 .bo_w ul { max-width: 420px; margin: auto; }
#sec14 .bo_w .privacy_open { font-size: 0.75em; padding: 0.375em 1em; margin-left: 0.5em; font-weight: 400; background-color: #333; color: #fff; display: inline-block; border-radius: 5em; cursor: pointer; }
#sec14 .bo_w .btn_submit { font-size: 1.25em; width: 100%; line-height: 2.875; border: 1px solid #ff4064; background-color: #ff4064; color: #fff; border-radius: 0.5em; }

/* sec15 */
#sec15 .map { width: 100%; padding-top: 35%; position: relative; }
#sec15 .map iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#sec15 ul li { font-size: 1.25em; height: 4em; display: flex; align-items: center; border-bottom: 1px solid #ddd; }
#sec15 ul li > span { width: 7em; }
#sec15 ul li > div { flex-grow: 1; }




/* 효과 */
.effectB,.effectT,.effectL,.effectR {
    opacity: 0;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.effectB { transform: translateY(-80px); }
.effectT { transform: translateY(80px); }
.effectL { transform: translateX(-80px); }
.effectR { transform: translateX(80px); }

/* delay */
.visual h2,
.list1 li:nth-child(2n),
.list2 li:nth-last-child(3n+2),
.list3 li:nth-last-child(3n) { animation-delay: 0.3s; }
.visual .txt,
.list2 li:nth-last-child(3n+1),
.list3 li:nth-last-child(3n+2) { animation-delay: 0.6s; }
.visual .link,
#sec04 .list li:last-child { animation-delay: 0.9s; }
#sec02 img{margin-bottom:5px;}

.effectT.on,.effectB.on { animation-name: effectY; }
.effectL.on,.effectR.on { animation-name: effectX; }
@keyframes effectY {
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes effectX {
    to   { transform: translateX(0); opacity: 1; }
}



/* 반응형 */
@media screen and (max-width: 1480px){
    .inner { width: 96%; }
}
@media screen and (max-width: 1380px){
    body { font-size: 14px; }
    .inner { width: 94%; }
}
@media screen and (max-width: 1180px){
    .main .title h2 { font-size: 3.875em; }
    #sec01 .inner { font-size: 0.875em; padding: 0; }
    #sec01 .inner .txt { margin-left: 3%; }
    #sec04 .list p br { display: none; }
    #sec15 .map { padding-top: 50%; }
}
@media screen and (max-width: 1024px){
    .country .con { display: block; }
    .country .img, .country .txt { width: 100%; }
    .country .img img { height: auto; width: 100%;}
    .country .txt { margin-top: 2em; }
    .country .txt br { display: none; }
}
@media screen and (max-width: 769px){
    body { font-size: 12px; }
    header .inner { width: 100%; }
    #sec01 .inner { font-size: 1em; flex-direction: column; }
    #sec01 .inner > * { width: 100%; text-align: center; }
    #sec01 .inner h2 div { display: block; }
    #sec01 .inner h2 hr { display: none; }
    #sec01 .inner .txt { margin-left: 0; margin-top: 3%; }

    .main .list3 li { width: 32%; }
    .main .list3 li:nth-child(-n+3) { margin-left: 0; margin-right: 2%; }
    .main .list3 li:nth-child(3n) { margin-right: 0; }
    #sec04 .list li:last-child { animation-delay: 0s; }

    /*.country .ticket { display: block; }*/
    /*.country .ticket .tit { width: 100%; padding: 0.8em 0; border-radius: 1em 1em 0 0; }*/
    /*.country .ticket .tit h4 { margin: 0; }*/
    /*.country .ticket .tit h4 br { display: none; }*/
    /*.country .ticket .tit img { display: none; }*/
    /*.country .ticket .txt { padding: 0.5em 1em; }*/
    /*.country .ticket .star { width: 4em; margin-left: -2em; top: -15%; right: auto; left: 0; }*/
    /*.country .ticket .img { width: 14em; margin-right: -7em; left: auto; right: 0; }*/
}
@media screen and (max-width: 675px){
    .visual { font-size: 1.25em; }
    #sec01 h2 { font-size: 4em; }
    #sec01 .date { font-size: 6em; }
    #sec01 .time { font-size: 3em; }
    #sec01 .addr { font-size: 2em; }
    #sec01 .hash { font-size: 2em; }

    .main .title h2 { font-size: 3.25em; }
    /*.country .list p { font-size: 1.25em; }*/
    /*.country .ticket .tit { font-size: 1.5em; border-radius: 0.8em 0.8em 0 0; }*/
    /*.country .ticket .txt { font-size: 1.25em; border-radius: 0 0 0.8em 0.8em; }*/
    #sec15 .map { padding-top: 55%; }
}
@media screen and (max-width: 480px){
    #sec04 .list li { width: 48%; }
    .main .list3 li:nth-child(3n) { margin-right: 2%; }
    .main .list3 li:nth-child(2n) { margin-right: 0; }
    /*.country .ticket { width: 90%; }*/
    /*.country .ticket .img { width: 10em; margin-right: -5em; bottom: -50%;}*/
    #sec15 ul li { display: block; height: auto; }
    #sec15 ul li > * { width: 100%; line-height: 2; }
}
@media screen and (max-width: 380px){
    body { font-size: 10px; }
}
@media screen and (max-width: 320px){
    body { zoom: 0.85; }
}