﻿@font-face {
    font-family: 'Godo';
    font-style: normal;
    font-weight: 400;
    src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'),
        url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}
@font-face {
    font-family: 'Godo';
    font-style: normal;
    font-weight: 700;
    src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'),
        url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff');
}

body {
    margin: 0;
    font-family: 'Godo', sans-serif;
    line-height: 1.7;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

a {
    text-decoration: none;
    color: #003333;
}

.non_select {
    width: 100%;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    pointer-events: none;
}

.container p,
.container div,
.container a {
    position: absolute;
}

.tab-menu {
    width: 100%;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 3.813rem;
}

.tab-menu > .btn-area {
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    line-height: 500px;
    height: 5.513rem;
    overflow: hidden;
}

.tab-menu > .btn-area:nth-child(1) {
    background: url('../../Images/event/tab-01b.jpg') no-repeat center / cover;
}
.tab-menu > .btn-area:nth-child(1).active {
    background: url('../../Images/event/tab-01a.jpg') no-repeat center / cover;
}
.tab-menu > .btn-area:nth-child(2) {
    background: url('../../Images/event/tab-02b.jpg') no-repeat center / cover;
}
.tab-menu > .btn-area:nth-child(2).active {
    background: url('../../Images/event/tab-02a.jpg') no-repeat center / cover;
}

.area {
    display: none;
}

.area.on {
    display: block;
}

.small {
    font-size: 1.25rem;
}

.bold {
    font-weight: 700;
}

.red {
    color: #ff0000;
}

.btn {
    font-size: 1rem;
    font-family: 'NotoSansKR';
    position: absolute;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 6.688rem;
    height: 1.75rem;
    line-height: 100;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
}

.btn.last {
    width: 16.125rem;
    height: 3.25rem;
}

.btn_st01 {
    font-size: 1.25rem;
    font-family: 'NotoSansKR';
    display: block;
    position: absolute;
    background: #ff6a13;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 18.75rem;
    height: 3.125rem;
    line-height: 3.125rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 350px;
    top: 1192px;
}

.btn.on {
    display: block;
}

.btn > img {
    vertical-align: baseline;
    margin-left: 3px;
    width: 1.25rem;
}

.ts-20 {
    font-size: 1.25rem;
    font-family: 'NotoSansKR';
    color: #fff;
    font-weight: 600;
    text-align: center;
    position: absolute;
    left: 115px;
    top: 677px;
    line-height: 1.5;
    /*letter-spacing: -0.05rem;*/
}

.ts-18 {
    font-size: 1.125rem;
    font-family: 'NotoSansKR';
    color: #363535;
    font-weight: 500;
    /*text-align: center;*/
    position: absolute;
    left: 115px;
    top: 677px;
    line-height: 1.5;
    /*letter-spacing: -0.05rem;*/
}

.ts-16 {
    font-size: 1rem;
    font-family: 'NotoSansKR';
    color: #003333;
    font-weight: 500;
    /*text-align: center;*/
    position: absolute;
    left: 115px;
    top: 677px;
    line-height: 1.5;
    /*letter-spacing: -0.05rem;*/
}

.t-wh {
    color: #fff;
}

.ts-14 {
    font-size: 0.875rem;
    font-family: 'NotoSansKR';
    color: #ff5000;
    font-weight: 500;
    /*text-align: center;*/
    position: absolute;
    left: 183px;
    top: 1680px;
    line-height: 1.5;
    /*letter-spacing: -0.05rem;*/
}

.no1 {
    top: 1040px;
    left: 806px;
}

.no2 {
    top: 1251px;
    left: 806px;
}

.no3 {
    top: 1472px;
    left: 806px;
}

.no4 {
    top: 1683px;
    left: 806px;
}

.no5 {
    top: 1905px;
    left: 806px;
}

.no6 {
    top: 2117px;
    left: 806px;
}

.no7 {
    top: 2200px;
    left: 371px;
}

.no4.last {
    top: 1550px;
    left: 371px;
}

[class*='-l1'] {
    left: 80px;
}

[class*='-r2'] {
    left: 730px;
}

.a1 {
    left: 110px;
    top: 1128px;
}
.a2 {
    left: 110px;
    top: 1177px;
}
.a3 {
    left: 110px;
    top: 1226px;
}
.a4 {
    left: 110px;
    top: 1275px;
}
.a5 {
    left: 110px;
    top: 1324px;
}
.a6 {
    left: 110px;
    top: 1373px;
}
.a7 {
    left: 110px;
    top: 1422px;
}
.a8 {
    left: 110px;
    top: 1471px;
}
.a9 {
    left: 110px;
    top: 1520px;
}
.a10 {
    left: 110px;
    top: 1569px;
}

.b1 {
    left: 330px;
    top: 1128px;
}
.b1.second-val {
    left: 630px;
    /* top: 1081px; */
}
.b2 {
    left: 510px;
    top: 1177px;
}
.b3 {
    left: 360px;
    top: 1226px;
}
.b3.second-val {
    left: 620px;
    /* top: 1179px; */
}
.b4 {
    left: 360px;
    top: 1275px;
}
.b4.second-val {
    left: 590px;
    /* top: 1228px; */
}
.b5 {
    left: 460px;
    top: 1324px;
}
.b6 {
    left: 470px;
    top: 1373px;
}
.b7 {
    left: 320px;
    top: 1422px;
}
.b8 {
    left: 320px;
    top: 1471px;
}
.b9 {
    left: 320px;
    top: 1520px;
}
.b10 {
    left: 460px;
    top: 1487px;
    padding: 0.125rem 0.5rem;
    background: #ff6a13;
    border-radius: 0.25rem;
    color: #fff;
}

.link-box {
    position: absolute;
    width: 53.688rem;
}

.box01 {
    left: 70px;
    top: 1690px;
}

.box02 {
    left: 70px;
    top: 1925px;
}

.box03 {
    left: 70px;
    top: 2155px;
}

.btn01 {
    left: 140px;
    top: 1583px;
}

.btn02 {
    left: 358px;
    top: 1475px;
}

.btn03 {
    left: 345px;
    top: 2252px;
}

/*Message Box*/
#msgbox {
    visibility: hidden;
    background-color: #333333eb;
    color: #fff;
    text-align: center;
    border-radius: 0.5rem;
    padding: 1rem;
    position: fixed;
    z-index: 1;
    left: 363px;
    top: 1124px;
    font-size: 0.875rem;
}

#msgbox.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.eventBox,
.box,
.eventBox *,
.box *,
.tab-menu {
    position: relative !important;
}

.Box.headbox {
    width: auto;
    position: absolute; /* 위치 속성 추가 */
    top: 24rem;
    left: 4.375rem;
}

.Box.headbox * {
    position: relative;
}

.tit img {
    height: 3.125rem;
    margin-right: 0.5rem;
}

.tit {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0072ce;
    display: flex;
    align-items: center;
}

.desc {
    font-size: 1.125rem;
    margin-top: 0.5rem;
}

.eventBox {
    padding-left: 4.375rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.box {
    margin-bottom: 2.5rem;
}

.desc.iconBox {
    display: flex;
    flex-wrap: wrap;
}

.iconBox > div {
    position: relative;
    width: 100%;
    min-height: 1px;
    flex: 0 0 28%;
    max-width: 28%;
    text-align: center;
    font-size: 1rem;
    margin: 0 0.5rem 2rem;
}

.iconBox img {
    height: 8.75rem;
}

.num {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    margin: 0 0 2px;
}

span.orange {
    color: #ff6a13;
}
span.bl {
    color: #000;
}

ul.orange > li {
    color: #ff6a13;
}

ol > li {
    margin: 0 0 0.5rem;
}
ul > li {
    list-style: none;
}
ul > li::before {
    content: '';
    display: block;
    position: absolute;
    width: 0.625rem;
    height: 0.125rem;
    background: #3a3a3a;
    left: -1rem;
    top: 0.875rem;
}
ul.orange > li::before {
    content: '';
    display: block;
    position: absolute;
    width: 0.625rem;
    height: 0.125rem;
    background: #ff6a13;
    left: -1rem;
    top: 0.875rem;
}

.btnBox {
    left: 4.125rem;
    cursor: pointer;
}

.btnBox img {
    max-height: 1.4375rem;
    max-width: 100%;
    height: 3.125rem;
    margin-right: 0.5rem;
}

.eventBox > .box:nth-child(2) {
    margin-bottom: 0;
}

ul,
ol {
    padding-left: 2.5rem !important;
}

.box a {
    text-decoration: underline;
}

.info-overlay {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 99999;
    -webkit-transition: opacity ease-out 0.2s;
    transition: opacity ease-out 0.2s;
}

.info-btn {
    color: #ffffff;
    font-size: 4vw;
    padding: 3.5% 0;
    background: #ff5000;
    bottom: 0;
    text-align: center;
    width: 100%;
    z-index: 1001;
}
/* 768px 이하에서 적용될 반응형 */
@media (max-width: 768px) {
    .tab-menu {
        max-width: 1000px; /* max-width를 100%로 설정 */
    }

    .tab-menu > .btn-area {
        height: 3.813rem;
    }

    .Box.headbox {
        top: 18rem;
    }
}
