/*공통 헤더 스타일*/
.header{ width: 100%; height: 360px; background-image: url(https://icqns2023registration.com/img/2023visual.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; color: #fff; position: relative; }
.header .h-wrap { width: 90%; font-size: 18px; text-align: center; font-weight: 300; position: relative; z-index: 99; }
.header .h-wrap dl{ font-size: 24px; }
.header .h-wrap dl dd{ font-size: 52px; font-weight: bold; margin-top: 10px; }
.header .h-wrap dl dd a{ color: #fff; }
.header .h-wrap ul{ display: flex; margin-top: 30px; justify-content: center; align-items: center; }
.header .h-wrap ul li:first-child{ margin-right: 30px; }
.header .h-wrap ul li span{ margin-right: 15px; font-weight: bold; }


/*사전등록(메인)*/
.c-wrap{ width: 90%; max-width: 1280px; margin: 0 auto; margin-top: 80px; margin-bottom: 100px; }
.c-wrap .pre-wrap{ width: 100%; background-color: #f6f6f6; padding: 40px; }
.c-wrap .pre-wrap > h2{ text-align: center; font-size: 24px; font-weight: bold; }
.c-wrap .pre-wrap > h2 br{ display: none; }
.date{ display: flex; margin-top: 35px; justify-content: center; align-items: center; margin-bottom: 30px; }
.date li{ font-size: 18px; color: #666; }
.date li span{ margin-right: 20px; font-size: 20px; font-weight: bold; color: #2b7a83; }
.date li:first-child{ margin-right: 40px; }

.regnote > span{ display: inline-block; background-color: #2b7a83; color: #fff; padding: 0.2em 1em; border-radius: 5px; }
.regnote .note{ margin-top: 20px; }
.regnote .note h1{ font-size: 18px; color: #2b7a83; }
.regnote .note .txt{ margin-top: 10px; }

.c-wrap .info-wrap{ background-color: #eee; padding: 25px 175px;}
.c-wrap .info-wrap > p{ color: #888; line-height: 1.5; text-indent: -12px; margin-left: 12px; }
.c-wrap .info-wrap > p + p { margin-top: 5px; }
.c-wrap .info-wrap > p span{ color: #2b7a83; border-bottom: 1px solid #2b7a83; font-weight: 700; }
.c-wrap .info-wrap .line{ width: 100%; height: 1px; background-color: #ccc; margin: 20px 0; }
.c-wrap .info-wrap .credit{ text-align: center; }
.c-wrap .info-wrap .credit p{ text-indent: -24px; line-height: 1.5; margin-left: 20px; }
.c-wrap .info-wrap .credit p span{ font-weight: 700; }
.c-wrap .info-wrap .credit button{ background-color: #2b7a83; color: #fff; padding: 15px 20px; font-size: 16px; margin-top: 20px; }
.c-wrap .info-wrap .credit button img{ margin-left: 10px; }

.c-wrap .btns-wrap{ display: flex; justify-content: center; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.c-wrap .btns-wrap li{ background-color: #2b7a83; border-radius: 35px; padding: 20px; box-sizing: border-box; cursor: pointer; transition-duration: 0.4s; position: relative; margin-bottom: 20px; }
.c-wrap .btns-wrap li + li{ margin-left: 30px; }
.c-wrap .btns-wrap li a{ color: #fff; font-weight: 700; padding: 20px; box-sizing: border-box; position: relative; z-index: 5; }
.c-wrap .btns-wrap li:last-child a{ color: #2b7a83; font-weight: 700; }
.c-wrap .btns-wrap li img{ margin-left: 20px; }
.c-wrap .btns-wrap li .a_arr{ display: inline-block; }
.c-wrap .btns-wrap li::before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; border: 3px solid #2b7a83; background-color: rgba(255,255,255,0); border-radius: 35px; display: none;}
.c-wrap .btns-wrap li:last-child{ background-color: #fff; }
.c-wrap .btns-wrap li:last-child::before{ display: block; }
.c-wrap .btns-wrap li .a_arr{ display: none; }

.c-wrap .pay-wrap{ margin-top: 100px; display: flex;  }
.c-wrap .pay-wrap .tit{ width: 20%; font-size: 24px; font-weight: 700; }
.c-wrap .pay-wrap .wrap{ width: 80%; } 
.c-wrap .pay-wrap .guide{ width: 100%; margin-bottom: 30px; }
.c-wrap .pay-wrap .guide h2{ color: #2b7a83; font-weight: 700; margin-bottom: 10px; }
.c-wrap .pay-wrap .guide ul li{ font-size: 18px; line-height: 1.5; color: #666; position: relative; margin-left: 15px; }
.c-wrap .pay-wrap .guide ul li::before{ content: url(https://icqns2023registration.com/img/reddot.png); margin-right: 10px; position: absolute; transform: translateY(-3px); left: -15px; }
.c-wrap .pay-wrap .guide ul li span{ color: #2b7a83; border-bottom: 1px solid #2b7a83; font-weight: bold; }
.c-wrap .pay-wrap .guide .bank{ padding: 30px; width: 100%; font-size: 16px; background-color: #eee; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px; color: #444;}
.c-wrap .pay-wrap .guide .bank dl{ display: flex; text-align: center; align-items: center; }
.c-wrap .pay-wrap .guide .bank > dl{ margin-top: 5px; }
.c-wrap .pay-wrap .guide .bank > dl:first-of-type { margin-top: 15px; }
.c-wrap .pay-wrap .guide .bank > dl:last-of-type dt{ color: #666; }
.c-wrap .pay-wrap .guide .bank > dl:last-of-type dd{ color: #2b7a83; font-weight: bold; font-size: 18px; margin-left: 20px; }
.c-wrap .pay-wrap .guide .bank .bar{ margin: 0 10px; }
.c-wrap .pay-wrap .guide .bank .accName{ background-color: #2b7a83; border-radius: 30px; display: flex; align-items: center; color: #fff; padding: 10px 30px; margin-top: 20px; word-break: keep-all; }
.c-wrap .pay-wrap .guide .bank .accName p{ color: rgba(255,255,255,0.7); margin-right: 20px; text-align: center; }



.view-btn{ color: #fff; background-color: #2b7a83; display: inline-block; padding: 15px 20px; font-size: 16px; margin-top: 20px; }
.view-btn img{ margin-left: 20px; }

    /*마우스오버*/
    @media screen and (min-width: 769px){
        .c-wrap .btns-wrap li:hover{ background-color: #fff; }
        .c-wrap .btns-wrap li:hover a{ color: #2b7a83; }
        .c-wrap .btns-wrap li:hover::before{ display: block; }
        .c-wrap .btns-wrap li:hover img{ display: none; }
        .c-wrap .btns-wrap li:hover .a_arr{ display: inline-block; }
        .c-wrap .btns-wrap li:last-child:hover{ background-color: #2b7a83; }
        .c-wrap .btns-wrap li:last-child:hover a{ color: #fff; }
    }


/*공통 푸터 스타일*/
footer{ width: 100%; position: relative; background-color: #555; color: #888; padding: 30px 0 50px 0; }
.foot-wrap{ width: 90%; max-width: 1280px; margin: 0 auto; }
.foot-wrap ul{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.foot-wrap ul li{ margin-top: 30px; word-break: keep-all; margin-right: 20px; }
.foot-wrap ul li:last-of-type{ margin-right: 0; }
/* .foot-wrap ul li + li{ margin-left: 20px; } */
.foot-wrap ul li span{ margin-right: 20px; font-weight: bold; color: #ccc; }
.foot-wrap p{ margin-top: 30px; }



/*반응형*/
@media screen and (max-width: 1400px){
    .foot-wrap ul{ justify-content: center; align-items: center; }
    .foot-wrap p{ text-align: center; }
}

@media screen and (max-width: 1050px){
    .header::before{ display: none; }
}

@media screen and (max-width: 1000px){
    .header .h-wrap dl dd{ font-size: 45px; }
    .header .h-wrap ul{ display: block; }
    .header .h-wrap ul li:first-child{ margin-right: 0; }
    .header .h-wrap ul li + li{ margin-top: 10px; }
    .c-wrap .pre-wrap > h2{ font-size: 20px; }
    .c-wrap .pre-wrap > h2 br{ display: block; }
    .date li span{ font-size: 18px; margin-right: 10px; }
    .date li{ font-size: 16px; }
    .date li:first-child{ margin-right: 20px; }
    .c-wrap .info-wrap{ padding: 25px 50px; }

    .c-wrap .btns-wrap li{ padding: 15px 10px ; }
    .c-wrap .btns-wrap li a{ padding: 15px 10px; }
    .c-wrap .btns-wrap li + li{ margin-left: 15px; }

    .c-wrap .pay-wrap{ margin-top: 50px; }
    .c-wrap .pay-wrap .tit{ font-size: 20px; }
    .c-wrap .pay-wrap .guide h2{ font-size: 20px; }
    .c-wrap .pay-wrap .guide ul li{ font-size: 16px; }

    .c-wrap .pay-wrap .guide .bank{ font-size: 14px; }
    .c-wrap .pay-wrap .guide .bank .accName dl{ margin-top: 5px; }
    .c-wrap .pay-wrap .guide .bank > dl:last-of-type dd{ font-size: 16px; }
    

    .view-btn{ font-size: 14px; padding: 10px 15px; }
}

@media screen and (max-width: 768px){
    .header .h-wrap{ font-size: 16px; }
    .header .h-wrap dl{ font-size: 20px; }
    .header .h-wrap dl dd{ font-size: 35px; }
    .c-wrap .pre-wrap > h2{ font-size: 18px; }

    .date{ margin-top: 20px; flex-direction: column; }
    .date li{ font-size: 14px; }
    .date li:first-child{ margin-right: 0; margin-bottom: 5px; }
    .date li span{ font-size: 16px; }
    .c-wrap .info-wrap{ padding: 25px 25px; }
    .c-wrap .info-wrap > p{ font-size: 14px; }
    .c-wrap .info-wrap .credit p{ font-size: 14px; }
    .c-wrap .info-wrap .credit button{ font-size: 14px; padding: 10px 15px; }

    .c-wrap .btns-wrap li{ padding: 10px; margin-bottom: 10px; }
    .c-wrap .btns-wrap li + li{ margin-left: 10px; }
    .c-wrap .btns-wrap li a{ font-size: 14px; padding: 10px }
    .c-wrap .info-wrap .credit p br{ display: none;}
    .c-wrap .info-wrap .credit button{ margin-top: 15px; }

    .c-wrap .pay-wrap .tit{ font-size: 18px; }
    .c-wrap .pay-wrap .guide h2{ font-size: 18px; }
    .c-wrap .pay-wrap .guide ul li{ font-size: 14px; }

    .c-wrap .pay-wrap{ justify-content: space-between; }
    .c-wrap .pay-wrap .wrap{ width: 100%; }
    .c-wrap .pay-wrap .guide{ width: 100%; }

    .c-wrap .pay-wrap .guide .bank{ padding: 20px; }
    .c-wrap .pay-wrap .guide .bank .accName{ flex-direction: column; padding: 10px 20px; border-radius: 50px; }
    .c-wrap .pay-wrap .guide .bank .bar{ margin: 0 5px; }

    .regnote .note h1{ font-size: 16px; }

    footer{ padding: 40px 0 50px 0; }
    .foot-wrap ul li{ margin-top: 10px; font-size: 14px; }
    .foot-wrap ul li span{ margin-right: 10px; }
    .foot-wrap p{ font-size: 14px; }
}

@media screen and (max-width: 600px){
    .c-wrap .pre-wrap{ padding: 30px 20px; }
    .c-wrap .info-wrap{ padding: 20px 15px; }
    .c-wrap .pay-wrap .tit{ width: 20%; }
}

@media screen and (max-width: 500px){
    .c-wrap .pay-wrap{ display: block; }
    .c-wrap .pay-wrap .tit{ width: 100%; margin-bottom: 20px; font-size: 20px;}
    .c-wrap .pay-wrap .guide{ width: 100%; }
    .c-wrap .pay-wrap .guide h2{ font-size: 16px; }
    .c-wrap .pre-wrap{ padding: 15px 10px; }
    .c-wrap .btns-wrap{ flex-direction: column; }
    .c-wrap .btns-wrap li + li{ margin-left: 0; }
    .c-wrap .btns-wrap li{ padding: 0; width: 100%; }
    .c-wrap .btns-wrap li a{ display: flex; justify-content: space-between; align-items: center; padding: 10px 15px }
    .c-wrap .btns-wrap li img{ margin-left: 0; }
    .c-wrap .info-wrap .credit button{ line-height: 1.5; }
    .header .h-wrap ul li{ font-size: 14px; }
    .header .h-wrap ul li + li{ margin-top: 5px; }
    .foot-wrap ul{ flex-direction: column; justify-content: flex-start; align-items: flex-start; }
    .foot-wrap ul li + li{ margin-left: 0; }
}

@media screen and (max-width: 400px){
    .c-wrap .pay-wrap .guide .bank dl{ flex-direction: column; line-height: 1.5; }
    .c-wrap .pay-wrap .guide .bank .bar{ display: none; }
}



/*익스플로러*/
@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
    .c-wrap .regi-wrap form ul li .form_R .check-btn{ display: block !important; }
    .c-wrap .regi-wrap form ul li .form_R.meth > ul li{ word-break: break-all; }
}

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) and (max-width: 500px){
    .c-wrap .regi-wrap form ul li .form_R .check-btn{ display: flex !important; padding-top: 10px; }
    .c-wrap .regi-wrap form ul li:nth-child(2) .form_R input{ width: 70%; }
}



/* 20230504 프로모션 코드 입력페이지 추가 */
.promotion{ position: relative; width: 100%; padding-top: 80px; padding-bottom: 100px; }
.promotion .wrap1280{ width: 90%; max-width: 1280px; margin: 0 auto; }
.promotion h2{ font-size: 24px; font-weight: 700; letter-spacing: -0.025em; text-align: center; }
.promotion .flexbox{ display: flex; justify-content: center; align-items: center; margin-top: 20px; }
.promotion .flexbox li{ display: flex; align-items: center; }
.promotion .flexbox li:first-of-type{ margin-right: 70px; }
.promotion .flexbox li h3{ font-size: 20px; font-weight: 700; color: #2b7a83; margin-right: 20px; }
.promotion .flexbox li h4{ font-size: 18px; color: #666; font-weight: 400; }
.promotion .codeWrap{ width: 100%; margin-top: 50px; text-align: center; background-color: #f6f6f6; padding: 40px 20px; padding-bottom: 50px; box-sizing: border-box; }
.promotion .codeWrap h1{ font-size: 32px; font-weight: 700; color: #001949; }
.promotion .codeWrap .inner{ width: 90%; max-width: 670px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 20px; }
.promotion .codeWrap .inner input{ font-family: 'Pretendard'; width: 100%; font-size: 16px; padding: 15px; box-sizing: border-box; border: none; margin: 0; margin-right: 20px; border-radius: 15px; }
.promotion .codeWrap .inner .codeChk{ flex-shrink: 0; width: 100px; background-color: #001949; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.promotion .to_reg{ display: flex; justify-content: center; align-items: center; margin-top: 37px; }
.promotion .to_reg a{ display: flex; width: 220px; height: 66px; justify-content: center; align-items: center; border: 3px solid #001949; border-radius: 33px; transition-duration: 0.3s; }
.promotion .to_reg a span{ font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: #001949; margin-right: 40px; transition-duration: 0.3s; }
.promotion .to_reg a img{ transition-duration: 0.3s; }
.promotion .to_reg a img.ww{ display: none; }

@media screen and (min-width: 821px){
    .promotion .to_reg a:hover{ background-color: #001949; }
    .promotion .to_reg a:hover span{ color: #fff; }
    .promotion .to_reg a:hover img{ display: none; }
    .promotion .to_reg a:hover img.ww{ display: block; }
}

@media screen and (max-width: 1280px){
    .promotion .flexbox li:first-of-type{ margin-right: 40px; }
    .promotion .flexbox li h3{ font-size: 18px; }
    .promotion .flexbox li h4{ font-size: 16px; }
    .promotion .codeWrap h1{ font-size: 28px; }
    .promotion .to_reg a{ width: 200px; height: 50px; }
    .promotion .to_reg a span{ font-size: 18px; }
}

@media screen and (max-width: 820px){
    .promotion h2{ font-size: 20px; }
    .promotion .codeWrap{ padding: 30px 15px; }
    .promotion .flexbox{ display: block; }
    .promotion .flexbox li{ justify-content: center; }
    .promotion .flexbox li h3{ font-size: 16px; }
    .promotion .flexbox li h4{ font-size: 14px; }
    .promotion .flexbox li:first-of-type{ margin-right: 0; margin-bottom: 5px; }
    .promotion .codeWrap h1{ font-size: 22px; }
    .promotion .codeWrap .inner input{ padding: 10px; font-size: 14px; border-radius: 10px; margin-right: 10px; }
    .promotion .codeWrap .inner .codeChk{ width: 70px; font-size: 14px; }
    .promotion .to_reg a{ width: 160px; height: 40px; }
    .promotion .to_reg a span{ font-size: 15px; margin-right: 20px; }
}

@media screen and (max-width: 500px){
    .promotion h2{ font-size: 18px; }
    .promotion .flexbox li h3{ margin-right: 10px; }
    .promotion .codeWrap{ margin-top: 30px; padding: 20px 12px; }
    .promotion .codeWrap .inner .codeChk{ width: 50px; font-size: 12px; }
}