/* pretendard 동적 서브셋 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");

/* 구글 Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {font-family: Pretendard, 'Noto Sans KR', sans-serif;}

html {font-size: 10px; font-weight: 400;}

body {-ms-overflow-style: none; scrollbar-width: none;} 
::-webkit-scrollbar {display: none;} 

* {box-sizing: border-box;}

ul, li, a, a:active, a:hover, a:link, a:visited {list-style: none; text-decoration: none; color: var(--default-color);}

ul, li, p, a, h1, h2, h3, h4, h5 {padding: 0; margin: 0;}

a {-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}

input:focus, textarea:focus {outline: none;}

img {width: 100%;}

input::placeholder, textarea::placeholder {font-size: 1.4rem; font-weight: 300; color: #9c9c9c;}

:root {
    --default-color: #000;
    --base-color: #36bcee;
    --point-color: #0378c7;
    --desktop-width: 1400px;
    --laptop-width: 900px;
    --swiper-theme-color:  var(--point-color) !important;
}

.dp_none {display: none !important;}
.dp_block {display: block;}
.dp_grid {display: grid;}

h1 {font-size: 4rem; font-weight: 900;}
h2 {font-size: 3rem; font-weight: 700;}
h3 {font-size: 2.4rem; font-weight: 600;}

.pc_only {display: block;}
.mobile_only {display: none;}


/* head */
header {
    position: fixed; top: 0; 
    width: 100vw; 
    background-color: transparent;
    transition: background-color 1s ease-in-out; 
    z-index: 9;
}
header.header_white {
    background-color: #ffffff;
}

.header_wrap {
    display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center; 
    width: 100%; height: 60px; margin: 0; padding: 0 30px;
}

.top_logo>img {width: auto; height: 30px;}

.top_nav {
    display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center; 
    height: 100%; margin: 0;
}

.top_nav_item {
    padding: 10px 30px;
    font-size: 1.6rem; font-weight: 500;     
}
.top_nav_button {
    border: solid 1px #ddd; border-radius: 4px;
}
.top_nav_button:hover {
    color: #fff; 
    background-color: var(--point-color); 
    border-color: var(--point-color);
}
.top_nav_button.onpage {
    color: #fff; background-color: var(--point-color); 
    border: none; 
    cursor: default; pointer-events: none;
}



/* tail */
footer {
    width: 100vw; 
    background: var(--point-color);
}

.footer_wrap {
    display: grid; grid-auto-flow: column; justify-content: space-between; 
    max-width: var(--laptop-width); margin: 0 auto; padding-top: 10px;
}

.footer_logo>img {
    width: auto; height: 120px; 
    object-fit: contain; 
    opacity: .7;
}

.footer_info {
    display: grid; align-content: start; row-gap: 5px;  
}
.footer_info p {font-size: 1.6rem; color: #fff;}
.footer_info .value {font-size: 1.8rem; font-weight: 500;}

.copyright {
    grid-row: 2; grid-column: 1/4;
    margin-top: 10px; padding: 5px 0 10px; 
    text-align: center; color: #fff; font-size: 1.4rem;
    border-top: 1px solid #ddd;
    opacity: .7;
}



/* index */
main {width: 100%;}
  
.main_high {
    display: grid; grid-template-columns: repeat(2, 1fr); justify-content: center; justify-items: center; align-items: center;
    max-width: var(--laptop-width); height: 550px; margin: 0 auto;
}

@keyframes highlight1 {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes highlight2 {
    0% {
        transform: translateX(-30vw) rotate(0) scale(.5);
    }
    80% {
        transform: translateX(0) rotate(1440deg);
    }
    100% {
        transform: translateX(0) scale(1.2);
    }
}

.high_txt {
    text-align: center;
    animation: highlight1 2s ease-in-out both;
}
.high_txt p {
    font-size: 2.5rem; font-weight: 400; color: #333;
}
.high_txt p.slogan {
    padding-bottom: 20px;
    font-size: 3rem; font-weight: 600;
}

.high_img {
    width: 200px;
    opacity: .7;
    animation: highlight2 2.5s both;
}





section>p {margin-bottom: 30px; text-align: center; font-size: 4rem; font-weight: 500; color: #ffffffe6;}
section>p:last-child {margin-bottom: 0px;}

.section_backstage {padding: 150px 0; background: url(../img/bg_logo.png) no-repeat center center / 30%;}

.section_plan {background: #eaeaea;}
.section_plan>.table_plan {display: grid; grid-auto-flow: row; max-width: 900px; margin: 0 auto;}
.section_plan>.table_plan>.table_row {display: grid; grid-auto-flow: column; justify-content: space-between; padding: 20px 0; border-bottom: solid 2px #ffffffe6;}
.section_plan>.table_plan>.table_row>.row_label {width: 100px; font-size: 1.4rem; font-weight: 600;}
.section_plan>.table_plan>.table_row>div {padding-top: 40px; text-align: center;}
.section_plan>.table_plan>.table_row>.row_value {width: 400px;}
.section_plan>.table_plan>.table_row>.row_all {grid-column: 2; width: 800px;}
.section_plan>.table_plan>.table_row>div>p {font-size: 1.6rem;}

.section_contact {background: url(../img/bg_logo.png) no-repeat right bottom / 20%; /*background-attachment: fixed;*/}

.contact_wrap {display: grid; grid-auto-flow: row; align-content: space-between; align-items: center; row-gap: 30px; max-width: 900px; margin: 0 auto;}

.contact_btn {justify-self: center; padding: 10px 30px; font-size: 2rem; font-weight: 700; border-radius: 24px;}

/*** 점멸 버튼 표시 ***/
@keyframes twinkle {
    0%  	{background: var(--point-color);}
    50% 	{background: orange;}
    100%	{background: var(--point-color);}
}
.twinkle_btn {color: #fff !important; animation: twinkle 2s infinite;}



/* skin/board/inquiry */
.section_title h1 {text-align: center; font-weight: 600; color: #ffffffe6;}

.section_form {background: #fff;}

.inquiry_form_wrap {display: grid; row-gap: 50px; max-width: 900px; margin: 0 auto;}

.inquiry_form_wrap .input_title {font-size: 2.8rem; font-weight: 500;}

.inquiry_form_wrap>div {padding-bottom: 50px;}
.inquiry_form_wrap .radio_wrap {display: grid; grid-auto-flow: column; justify-content: space-evenly; justify-items: center;}
.inquiry_form_wrap .radio_wrap .input_radio {display: none;}
.inquiry_form_wrap .radio_wrap .input_radio[type=radio] + label {align-self: center; width: 100%; padding: 10px 20px; text-align: center; font-size: 2rem; font-weight: 500; color: #333; border: solid 1px; border-radius: 12px; transition: all .3s linear;}
.inquiry_form_wrap .radio_wrap .input_radio[type=radio]:checked + label {font-weight: 700; color: #fff; background: var(--base-color); border: none;}

.inquiry_form_wrap .input_wrap {display: grid; column-gap: 30px; row-gap: 30px;}
.inquiry_form_wrap .input_wrap .input_item {position: relative;}
.inquiry_form_wrap .input_wrap .input_item input {width: 100%; height: 40px; padding: 5px 10px 0; font-size: 1.6rem; border: none; border-bottom: solid 1px #eaeaea; border-radius: 0;}
.inquiry_form_wrap .input_wrap .input_item label {display: block; position: absolute; top: 20%; left: 10px; font-size: 1.6rem; color: #9c9c9c; transition: .3s; -webkit-user-select: none; user-select: none;}
.inquiry_form_wrap .input_wrap .input_item_focus label {top: -12px; font-size: 1.3rem; font-weight: 700; color: var(--point-color);}

.inquiry_form_wrap .textarea_wrap {display: grid; row-gap: 10px; padding-bottom: 0;}
.inquiry_form_wrap .textarea_wrap .input_item textarea {width: 100%; padding: 5px 10px; margin: 0 auto; resize: none; font-size: 1.6rem; border: solid 1px #eaeaea; border-radius: 0;}
.inquiry_form_wrap .textarea_wrap .input_item .textarea_label {display: block; position: absolute; top: 10px; left: 10px; font-size: 2rem; color: #9c9c9c; transition: .3s; -webkit-user-select: none; user-select: none;}
.inquiry_form_wrap .textarea_wrap .input_item_focus .textarea_label {top: -30px; font-size: 1.3rem; font-weight: 700; color: var(--point-color);}

.inquiry_form_wrap .textarea_wrap .privacy_agree {display: grid; grid-auto-flow: column; justify-content: start; align-items: center; column-gap: 3px; padding-left: 20px;}
.inquiry_form_wrap .textarea_wrap .privacy_agree input {width: 16px; height: 16px; border: none;}
.inquiry_form_wrap .textarea_wrap .privacy_agree label {font-size: 1.6rem; font-weight: 300;}
.inquiry_form_wrap .textarea_wrap .privacy_agree label a {font-weight: 600; color: var(--base-color); text-decoration: underline;}
.inquiry_form_wrap .textarea_wrap .submit_btn {display: block; width: auto; height: auto; padding: 10px 30px; margin: 0px auto 0; text-align: center; font-size: 2rem; font-weight: 400; color: #fff; background: var(--point-color); border: none; border-radius: 20px; cursor: pointer;}

.inquiry_form_wrap .privacy_policy {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding: 5vh 10vw; z-index: 101;}
.inquiry_form_wrap .privacy_policy .layer_close_btn {position: absolute; top: 10vh; right: 30vw; padding: 0; margin: 0; background: none; border: none; z-index: 103; cursor: pointer;}
.inquiry_form_wrap .privacy_policy .layer_close_btn::before {content: ""; position: absolute; width: 5rem; height: 5px; background: #fff; border-radius: 12px; transform: rotate(45deg);}
.inquiry_form_wrap .privacy_policy .layer_close_btn::after {content: ""; position: absolute; width: 5rem; height: 5px; background: #fff; border-radius: 12px; transform: rotate(-45deg);}
.inquiry_form_wrap .privacy_policy .layer_inner {position: absolute; top: 0; left: 30vw; width: 40vw; height: 100%; padding: 20vh 0 5vh; margin: 0; overflow: auto; z-index: 102;}
.inquiry_form_wrap .privacy_policy .layer_inner p {margin-bottom: 10px; font-size: 2rem; font-weight: 300; color: #fff;}
.inquiry_form_wrap .privacy_policy .layer_inner .layer_text_title {margin-bottom: 80px; text-align: center; font-size: 3.5rem; font-weight: 900;}
.inquiry_form_wrap .privacy_policy .layer_inner .layer_text_index {margin: 60px 0 20px; font-size: 2.5rem; font-weight: 700;}
.inquiry_form_wrap .layer_bg {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 100; opacity: .9;}



/* skin/member/login */
.login_wrap {display: grid; justify-content: center; justify-items: center; row-gap: 10vh; padding: 10vh 5vw;}




/*** opera ***/



@media (max-width: /*768px*/926px) {
    .pc_only {display: none;}
    .mobile_only {display: block;}

    h3 {font-size: 1.6rem;}

    /* head */
    .top_nav {padding: 10px 20px;}

    .top_logo>img {height: 30px;}

    .top_nav_list {align-items: center; height: 30px;}
    .top_nav_list>li>a {font-size: 1.8rem; font-weight: 600;}


    
    /* tail */
    .footer_wrap {grid-auto-flow: row; justify-content: center; max-width: 100%;}

    .footer_logo img {height: 60px;} /* 로고공백 감안 했을 때 1.6:1 */

    .footer_info {grid-auto-flow: row; row-gap: 0px;}
    .footer_info .contact {grid-auto-flow: column; justify-content: start; align-items: center; column-gap: 20px;}
    .footer_info .contact p {font-size: 1.2rem;}
    .footer_info .contact .value {font-size: 1.2rem;}
    .footer_info .copyright {grid-column: unset; grid-row: unset; padding: 10px 0px; font-size: 1.1rem;}



    /* index/ */
    main {margin-top: 50px;}

    section {padding: 50px 10px;}
    .section_backstage {padding: 70px 0;}
    .section_plan {padding: 30px 20px;}

    section>p {margin-bottom: 15px; font-size: 1.8rem;}

    .section_plan>.table_plan {max-width: 100%;}
    .section_plan>.table_plan>.table_row {grid-template-columns: repeat(2, 1fr); grid-auto-flow: unset; column-gap: 20px;}
    .section_plan>.table_plan>.table_row>.row_label {grid-column: span 2; width: 100%; font-size: 1.1rem;}
    .section_plan>.table_plan>.table_row>div {padding-top: 15px;}
    .section_plan>.table_plan>.table_row>.row_value {width: 100%;}
    .section_plan>.table_plan>.table_row>.row_all {grid-column: span 2; width: 100%;}
    .section_plan>.table_plan>.table_row>div>p {font-size: 1.2rem;}

    .contact_wrap {max-width: 100%; padding: 0 20px;}

    .contact_btn {font-size: 1.4rem;}


    /* skin/board/inquiry */
    .section_title h1 {font-size: 1.8rem;}

    .inquiry_form_wrap .input_title {font-size: 1.4rem; font-weight: 600;}

    .inquiry_form_wrap .radio_wrap {grid-auto-flow: unset; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 20px;}
    .inquiry_form_wrap .radio_wrap .input_radio[type=radio] + label {padding: 10px 15px; font-size: 1.4rem;}

}