:root {
    --main: #3275B4;
    --sub: #0A3864;
    --sub2: #82ACD9;

    --mainHover: #19568f;
    --subHover: #052c50;
    --sub2Hover: #6498cf;
    --hover: #f6f6f6;

    --border: #EEEEEE;
    --gray: #666666;
    --black: #1E2128;
    --background: #fafafb;
    --background2: #F2F8FE;
    --brown: #C85B32;
    --green: #258A00;

    --fontXXL: 3.25rem;
    --fontXL: 2rem;
    --fontL: 1.5rem;
    --fontM: 1.125rem;
    --fontS: 1rem;
    --fontXS: 0.875rem;
}

@font-face {
  font-family: "Pretendard";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/PretendardVariable.otf");
  src: url("../fonts/PretendardVariable.eot?#iefix") format("embedded-opentype"), 
       url("../fonts/PretendardVariable.woff2") format("woff2"),
       url("../fonts/PretendardVariable.woff") format("woff"),
       url("../fonts/PretendardVariable.ttf") format("truetype");
  font-display: swap;
}

* {margin: 0; padding: 0; box-sizing: border-box; font-family: "Pretendard", sans-serif; color: var(--black);}

body {font-size: var(--fontM);}

li, a {text-decoration: none; list-style: none;}

img {-webkit-user-drag: none;}


/************************************************************/


.pd40 {padding: 2.5rem;}
.pdT40 {padding-top: 2.5rem !important;}
.pdB40 {padding-bottom: 2.5rem !important;}
.pdL40 {padding-left: 2.5rem !important;}
.pdR40 {padding-right: 2.5rem !important;}

.pd60 {padding: 3.75rem;}
.pdT60 {padding-top: 3.75rem !important;}
.pdB60 {padding-bottom: 3.75rem !important;}
.pdL60 {padding-left: 3.75rem !important;}
.pdR60 {padding-right: 3.75rem !important;}


.mg10 {margin: 0.625rem;}
.mgT10 {margin-top: 0.625rem !important;}
.mgB10 {margin-bottom: 0.625rem !important;}
.mgL10 {margin-left: 0.625rem !important;}
.mgR10 {margin-right: 0.625rem !important;}

.mg20 {margin: 1.25rem;}
.mgT20 {margin-top: 1.25rem !important;}
.mgB20 {margin-bottom: 1.25rem !important;}
.mgL20 {margin-left: 1.25rem !important;}
.mgR20 {margin-right: 1.25rem !important;}

.mg40 {margin: 2.5rem;}
.mgT40 {margin-top: 2.5rem !important;}
.mgB40 {margin-bottom: 2.5rem !important;}
.mgL40 {margin-left: 2.5rem !important;}
.mgR40 {margin-right: 2.5rem !important;}

.mg60 {margin: 3.75rem;}
.mgT60 {margin-top: 3.75rem !important;}
.mgB60 {margin-bottom: 3.75rem !important;}
.mgL60 {margin-left: 3.75rem !important;}
.mgR60 {margin-right: 3.75rem !important;}

.fontMain {color: var(--main);}
.fontBrown {color: var(--brown);}
.fontGreen {color: var(--green);}
.fontGray {color: var(--gray);}

.fontW400 {font-weight: 400 !important;}
.fontW500 {font-weight: 500 !important;}
.fontW600 {font-weight: 600 !important;}
.fontW700 {font-weight: 700 !important;}
.fontW900 {font-weight: 900 !important;}

.fontS {font-size: var(--fontS);}
.fontM {font-size: var(--fontM);}

.txtCenter {text-align: center;}
.spaceNoWrap {white-space: noWrap;}


.flex {display: flex;}
.spaceBtw {justify-content: space-between;}
.justifyCenter {justify-content: center;}
.alignCenter {align-items: center}
.shrink {flex-shrink: 0;}

.flex10 {gap: 0.625rem;}
.flex60 {gap: 0.625rem 3.75rem;}

.radius40 {border-radius: 2.5rem; overflow: hidden;}
.radius40>img {display: block;}

.radius16 {border-radius: 1rem; overflow: hidden;}
.radius16>img {display: block;}

.wrap {
    max-width: 1480px;
    padding: 0 20px;
    margin: 0 auto;
    position: inherit;
}

.btn {
    display: inline-block;
    padding: 0.625rem;
    line-height: 1.875rem;
    min-width: 6.25rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 0;
    font-size: var(--fontM);
    cursor: pointer;
}

.btnMain {background-color: var(--main); color: #fff;}
.btnMain:hover {background-color: var(--mainHover);}

.btnSub {background-color: var(--sub2); color: #fff;}
.btnSub:hover {background-color: var(--sub2Hover);}

.btnGray {background-color: #eee;}
.btnGray:hover {background-color: #e3e3e3;}

.btnBrown {background-color: var(--brown);}
.btnBrown:hover {background-color: #bb3f12;}

.btnWhite {
    background-color: #fff;
    border: 1px solid var(--border);
}

.btnInsta { background: url(../images/insta.png) no-repeat 50% 50%; }

.btnIcon {
    display: inline-block;
    width: 3.125rem;
    height: 3.125rem;
    text-indent: -9999px;
    background-size: 2rem;
    border-radius: 0.5rem;
}

.btnIcon:hover {background-color: var(--hover);}

.btnNav {
    background-color: transparent;
    position: relative;
    border: 0;
    flex-shrink: 0;
    display: none;
}

.btnNav::before {
    content: '';
    width: 1.25rem;
    height: 0.875rem;
    border: solid var(--black);
    border-width: 2px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btnNav::after {
    content: '';
    width: 1.25rem;
    height: 2px;
    background-color: var(--black);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.borderBoxWrap {
    border-radius: 2.5rem;
    padding: 2.5rem;
    border: 1px solid var(--border);
    margin: 0 auto;
    max-width: 30rem;
}

.borderBoxWrap h1 {
    margin: 1.25rem 0 2.5rem;
    text-align: center;
}

.borderBoxWrap h4 {text-align: center; margin-bottom: 2.5rem;}

/******************************* form *****************************/


.form>div {margin-bottom: 1.25rem;}
.form>div:nth-last-child(1) {margin-bottom: 0;}

.form>div p {line-height: 1.25rem; margin-bottom: 0.625rem;}

.form>div input[type=text],
.form>div input[type=password]  {
    border: 1px solid var(--border);
    line-height: 1.875rem;
    padding: 0.625rem 0.625rem;
    width: 100%;
    font-size: var(--font);
    border-radius: 0.5rem;
}

.form>div .phoneCertWrap {position: relative; flex-grow: 1;}

.form>div input[type=text].phoneCert {padding-right: 4rem;}

.form>div .phoneCertNum {
    font-size: var(--fontXS);
    color: #f00;
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
}

.btnSubmit {width: 100%; margin-top: 2.5rem;}

input[type=checkbox] {display: none;}

input[type=checkbox] + label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

input[type=checkbox] + label p {margin: 0;}

input[type=checkbox] + label>span {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background-color: #ddd;
    margin-right: 0.625rem;
    border-radius: 2px;
    position: relative;
}

input[type=checkbox]:checked + label>span {background-color: var(--main);}

input[type=checkbox]:checked + label>span::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.formAgree {font-size: var(--fontS);}

.formAgree>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
}

.formAgree>div p {padding: 0.375rem 0;}

.formAgree>div .btnWhite {
    padding: 0 0.5rem;
    font-size: var(--fontS);
    min-width: auto;
    white-space: noWrap;
}

.form>div input[type=text].inValid,
.form>div input[type=password].inValid {border-color: #f00;}

.form>div input[type=text].isValid,
.form>div input[type=password].isValid {border-color: var(--green);}

span.required {
    display: block;
    font-size: var(--fontXS);
    color: #f00;
    padding: 0.5rem;
}

/******************************* header *****************************/

h1 img {height: 3.125rem; display: block;}

header {
    height: 5rem;
    border-bottom: 1px solid var(--border);
}

header>.wrap {display: flex; align-items: center; justify-content: space-between;}

header>.wrap>div {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

header nav ul>li>a {
    display: inline-block;
    padding: 0.625rem;
    line-height: 1.875rem;
    min-width: 6.25rem;
    text-align: center;
    border-radius: 0.5rem;
}

header nav ul.depth1 {display: flex; gap: 0 0.5rem;}

header nav ul.depth1>li {
    position: relative;
    padding: 0.9375rem 0;
}

header nav ul.depth1>li>a:hover {background-color: var(--border);}

header nav ul.depth2 {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--sub2);
    border-radius: 0.5rem;
    display: none;
    z-index: 1;
}

header nav ul.depth2>li>a {color: #fff;}

header nav ul.depth2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(45deg) translateX(-50%);
    border-width: 1rem 1rem 0 0;
    border-color: var(--sub2) transparent transparent transparent;
    border-style: solid;
}

header nav ul.depth1>li:hover ul.depth2 {display: flex;}


/******************************* main *****************************/

section {margin-bottom: 7.5rem;}

section.bgGray {background-color: var(--background);}
section.bgGray:not(:has(div.wrap)) { border-radius: 2.5rem;}

section.bgBlue {background-color: var(--background2);}
section.bgBlue:not(:has(div.wrap)) { border-radius: 2.5rem;}

section h2 {font-size: var(--fontXXL); line-height: 5rem; font-weight: 900;}

section h3 {font-size: var(--fontXL); line-height: 3rem; margin-bottom: 2.5rem;}

section h4 {font-size: var(--fontL); line-height: 2rem;}

section h5 {font-size: var(--fontM); line-height: 2rem;}

.bannerSub {
    border-radius: 2.5rem;
    padding: 3.75rem;
}


/******************************* footer *****************************/


footer {padding-bottom: 2.5rem;}

footer .footerTop {
    overflow: hidden;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

footer .footerTop>div:nth-child(1) {float: left;}
footer .footerTop>div:nth-child(2) {float: right; text-align: right;}

footer .footerTop p {
    font-size: var(--fontXS);
    line-height: 1.5rem;
}

footer .footerTop>div:nth-child(1) p {margin-bottom: 0.625rem;}

footer .footerTop>div:nth-child(2) a:hover {background-color: var(--hover);}

footer .footerTop>div:nth-child(2) p {color: var(--gray);}

footer .footerTop + p {
    font-size: var(--fontXS);
    line-height: 1.5rem;
    color: var(--gray);
}


/******************************* footer *****************************/


.popupWrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
}

.popupWrap.popupShow {display: block;}

.popupWrap>.popupBox {
    background-color: #fff;
    padding: 2.5rem 2.5rem 1.25rem;
    border-radius: 2.5rem;
    min-width: 400px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.popupWrap>.popupBox h4 {
    font-size: var(--fontL);
    text-align: center;
    margin-bottom: 2.5rem;
    line-height: 2rem;
}

.btnPopupClose {
    display: block;
    background-color: transparent;
    line-height: 1.25rem;
    font-size: var(--fontS);
    color: var(--gray);
    margin: 0.625rem auto 0;
    cursor: pointer;
}

.btnPopupClose:hover {
    color: var(--main);
    text-decoration: underline;
}


/******************************* paging *****************************/

.pageBox {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}


.pageBox>button {
  width: 3.125rem;
  height: 3.125rem;
  line-height: 3.125rem;
  color: #999;
  border-radius: 0.5rem;
  border: 0;
  background: none;
  margin: 0 0.3125rem;
  cursor: pointer;
  font-size: var(--fontS);
}

button.nowPage {
    color: var(--main);
    font-weight: 500;
}

.btnPage.pageNormal {background: url(../images/icon_next.png) no-repeat 50% 50%;}
.btnPage.pageMax {background: url(../images/icon_nextmax.png) no-repeat 50% 50%;}

.btnPage.btnPagePrev,
.btnPage.btnPagePrevMax {transform: rotate(180deg);}
.btnPage:hover {background-color: #f3f3f3;}

.btnPage.isDisabled {opacity: 0.3; cursor: default;}

@media screen and (max-width: 1399px) {
    
}

@media screen and (max-width: 1023px) {
    :root {
        --fontXXL: 3rem;
        --fontXL: 1.75rem;
        --fontL: 1.25rem;
        --fontM: 1rem;
        --fontS: 0.875rem;
        --fontXS: 0.8125rem;
    }

    section h2 {line-height: 4rem;}

    section h3 {line-height: 2.5rem;}

    section h4 {line-height: 1.75rem;}

    section h5 {line-height: 1.375rem;}

    h1 img {height: 2.5rem;}

    header nav ul>li>a {
        padding: 0.625rem 0;
        min-width: 5rem;
    }

    header nav ul.depth1 {gap: 0;}

    .btn {min-width: 5rem;}

    header nav ul>li:has(ul.depth2)>a {pointer-events: none;}

    section.pd60 {padding: 2.5rem 1.875rem 1.875rem;}

    section h3 {margin-bottom: 1.875rem;}
}

@media screen and (max-width: 767px) {
    h1 img {
        height: 2rem;
    }

    :root {
        --fontXXL: 2rem;
        --fontXL: 1.25rem;
        --fontL: 1.125rem;
        --fontM: 1rem;
        --fontS: 0.875rem;
        --fontXS: 0.8125rem;
    }

    header {padding: 0.9375rem 0;}

    header>.wrap>div {flex-direction: row-reverse;}

    .btnNav {display: block;}

    header nav {
        width: 100%;
        position: fixed;
        top: 5rem;
        right: 0;
        z-index: 2;
        background-color: #fff;
        display: none;
    }

    header nav.isActive {display: block;}

    header nav ul.depth1 {width: 100%;}

    header nav ul.depth1>li {
        padding: 0;
        width: 25%;
    }

    header nav ul>li>a {width: 100%; text-align: center;}

    section {margin-bottom: 5rem;}

    section h2 {line-height: 3rem;}

    section h3 {line-height: 1.875rem; margin-bottom: 1.25rem;}

    section h4 {line-height: 1.5rem;}

    section h5 {line-height: 1.25rem;}

    main:has(.eventInfo) h3 {text-align: center;}

    .btnSign {display: none;}

    footer .footerTop {
        display: flex;
        flex-direction: column;
        padding-bottom: 1.25rem;
    }

    footer .footerTop h1 {margin-bottom: 1.25rem;}

    footer .footerTop>div:nth-child(1) p {float: left;}

    footer .btnInsta {float: right;}

    footer .footerTop>div:nth-child(2) {text-align: left;}

    footer .footerTop>div:nth-child(2)>div {
        background: #f6f6f6;
        border-radius: 0.5rem;
        margin-bottom: 0.625rem;
    }

    footer .footerTop>div:nth-child(2)>div>.btn {font-size: var(--fontS);}
}

@media screen and (max-width: 499px) {
    
    :root {
        --fontXXL: 1.75rem;
    }

    section h2 {line-height: 2.25rem;}

    .borderBoxWrap {padding: 1.875rem;}
}