/* common */
.subpage {overflow: hidden;}
.white {color:#fff !important; }
.navy {color:#00367b;}
b {font-weight: 600; }
.subpage > section { padding:80px 0; position: relative;}
@media screen and (min-width:1201px){
.subpage > section:last-of-type {padding-bottom: 180px;}
}
.sub_inner { max-width: 1420px; width: 100%; margin:0 auto; position: relative; padding:0 60px; }
/* font-head */
.h_60 {font-size: 60px; font-weight: 600; color:#000; line-height:1.3;}
.h_55 {font-size: 55px; font-weight: 600; color:#000; line-height:1.3;}
.h_45 {font-size: 45px; font-weight: 600; color:#000; line-height:1.3;}
.h_40 {font-size: 40px; font-weight: 600; color:#000; line-height:1.3;}
.sub_title h3 {font-size: 22px; font-weight: 500; color:#00367b; line-height: 1; margin-bottom: 25px; font-family:'Pretendard';}
/* font-p */
.p_20 {font-size: 20px; font-weight: 300; line-height: 1.8; color:#000 ;}
.p_18 {font-size: 18px; font-weight: 300; line-height: 1.8; color:#000 ;}
.p_16 {font-size: 16px; font-weight: 300; line-height: 1.8; color:#555;}
.p_14 {font-size: 14px; font-weight: 300; line-height: 1.8; color:#555;}


/*Content CSS*/
#menu {text-align: center; }
#menu h2 br {display: none;}

.menu_wrap {margin-top: 50px; display: flex; flex-wrap: wrap; counter-reset: number 0;}
.menu_wrap .menu {width: calc(25% - 22.5px); margin-right: 30px;counter-increment: number 1; }
@media screen and (min-width:1025px){
    .menu_wrap .menu:nth-child(4n) {margin-right: 0;}
    .menu_wrap .menu:nth-child(n+5) {margin-top: 60px;}
}
/* btn */
.menu .menu_btn button {position: relative; width: 100%; overflow: hidden; }
.menu .menu_btn button::after {content: ''; display: block; padding-bottom: 100%;}
.menu .menu_btn button > img {max-width: inherit; height: 100%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
.menu .menu_btn button .cover {position: absolute; left:0; top:0; background: rgba(255,230,0,.7); display: flex; width: 100%; height: 100%;
align-items: center; justify-content: center; flex-direction: column; opacity: 0; transition: opacity .3s; }
.menu .menu_btn button .cover .plus {display: block; transition: transform .4s; }
.menu .menu_btn button .cover p {color:#fff; font-weight: 700; margin-top: 7px;}
/* hover */
.menu .menu_btn button:hover .cover {opacity: 1; }
.menu .menu_btn button:hover .cover .plus {transform: rotate(90deg);}
/* btn-txt */
.menu .menu_btn .txt {margin-top: 20px; }
.menu .menu_btn .txt h3 {font-style: italic; font-size: 27px; font-weight: 800; color:#000; font-family: 'GangwonEduPower'; line-height: 1.2; word-break: normal;  }
.menu .menu_btn .txt p {font-weight: 400; }

/* modal */
.menu .modal-header {text-align: center; position: relative; overflow: hidden; padding:15px; margin:0; border:0; border-top: 4px solid #ffe600;
display: block; }
.menu .modal-dialog {max-width: 1420px; margin:0 auto; padding: 0 60px; width: 100%; height: 100%; display: flex ;align-items: center; justify-content: center;}
.menu .modal-content {overflow-y: auto; }
.menu .modal-body {padding:0 60px 60px;}
.menu .modal .close {opacity: 1; font-size:32px; color:#8a8a8a; padding: 0; float:none; margin:0 0 0 auto; display: block; }
.menu .modal .flex {display: flex; }
.menu .modal .flex > div {width: 50%; }
.menu .modal .flex .txt {padding:25px 0 0 0; }
.menu .modal .flex .txt .title {position: relative; width: 100%; padding-bottom: 30px; margin-bottom: 35px; border-bottom: 1px solid #ddd; }
.menu .modal .flex .txt .title::after {content: ''; display: block; width: 185px; height: 3px; background: #ffe600; position: absolute; bottom: -2px;
left: 50%;  transform: translateX(-50%);}
.menu .modal .flex .txt .title span {display: flex; align-items: center; justify-content: center; margin:0 auto; width: 100px; height: 45px; background: #ffe600;
border-radius: 22.5px; font-size: 16px; font-weight: 700; color:#000; }
.menu .modal .flex .txt .title span::after {content:'\00a0 0'counter(number);}
.menu_wrap .menu:nth-child(n+10) .modal .flex .txt .title span::after {content:'\00a0'counter(number);}

.menu .modal .flex .txt .title p {font-weight: 500; color:#555; margin:30px 0 0;}
.menu .modal .flex .txt .title h3 {font-style: italic; font-weight: 800; font-family: 'GangwonEduPower'; line-height: 1.3; }
.menu .modal .flex .txt > p {font-weight: 400; color:#666;}
.menu .modal .flex .img {text-align: right;}




@media screen and (max-width:1420px){
    /* common */
    .sub_inner {padding: 0 50px; }
    .subpage br:not(.mob) {display: none;}

    /* content */
    .menu_wrap .menu {width: calc(25% - 11.25px); margin-right:15px; }
    .menu .menu_btn .txt h3 {font-size: 22px; }

    .menu .modal-dialog {padding:  0 50px;}
    .menu .modal-body {padding: 0 50px 50px;}
    .menu .modal .flex .txt {padding:0 30px 0 0; }
    .menu .modal .flex .txt .title {padding-bottom:25px; margin-bottom: 30px;}
    .menu .modal .flex .txt .title p {margin: 20px 0 0;}
    .menu .modal .flex .txt .title span {height: 40px; }



}


@media screen and (max-width:1024px){
    /* common */
    .sub_inner {padding: 0 30px; }
    .subpage > section {padding: 60px 0;}
    /* font */
    .h_60 {font-size: 50px; }
    .h_55 {font-size: 45px;}
    .h_45 {font-size: 35px;}
    .h_40 {font-size: 30px;}
    .sub_title h3 {font-size: 20px}
    .p_20 {font-size: 18px;}
    .p_18 {font-size: 16px;}
    .p_16 {font-size: 14px;}
    .p_14 {font-size: 13px;}

    /* content */
    #menu h2 br {display: block;}
    .menu_wrap {margin-top: 40px; }
    .menu_wrap .menu {width: calc(33.3% - 13.3px); margin-right: 20px;}
    @media screen and (min-width:641px){
        .menu_wrap .menu:nth-child(3n) {margin-right: 0;}
        .menu_wrap .menu:nth-child(n+4) {margin-top: 50px;}
    }
    .menu .menu_btn .txt h3 {font-size: 19px; }

    .menu .modal-dialog {padding:  0 30px; display: block;}
    .menu .modal .flex {flex-direction: column-reverse; align-items: center;}
    .menu .modal .flex > div {width: 100%;}
    .menu .modal .flex .img {text-align: center; }
    .menu .modal .flex .txt {padding: 0; margin-top: 40px; }
    .menu .modal .flex .txt .title span {height: 35px; font-size: 15px; width: 90px;}

}

@media screen and (max-width:640px){
    /* common */
    .sub_inner {padding: 0 20px; }
    .subpage > section {padding: 50px 0;}
    /* font */
    .h_60 {font-size: 40px; }
    .h_55 {font-size: 35px;}
    .h_45 {font-size: 25px;}
    .h_40 {font-size: 20px;}
    .sub_title h3 {font-size: 18px; margin-bottom: 15px; }
    .p_20 {font-size: 17px;}
    .p_18 {font-size: 15px;}
    .p_16 {font-size: 13px;}
    .p_14 {font-size: 12px;}

    /* content */
    .menu_wrap {margin-top: 30px; }
    .menu_wrap .menu {width: calc(50% - 10px); margin-right: 20px;}
    .menu_wrap .menu:nth-child(2n) {margin-right: 0;}
    .menu_wrap .menu:nth-child(n+3) {margin-top: 40px;}
    .menu .menu_btn .txt {margin-top: 15px ;}
    .menu .menu_btn .txt h3 {font-size: 18px; }

    .menu .modal .close {font-size: 26px;}
    .menu .modal-dialog {padding:  0 20px;}
    .menu .modal-body {padding: 0 15px 40px;}
    .menu .modal .flex .txt {margin-top: 30px;}
    .menu .modal .flex .txt .title {  padding-bottom: 20px; margin-bottom: 25px;}
    .menu .modal .flex .txt .title::after {width: 100px;}
    .menu .modal .flex .txt .title span {width: 80px; height: 30px; font-size: 14px;}
    .menu .modal .flex .txt .title p {margin:15px 0 0;}

}

@media screen and (max-width:480px){
    .menu_wrap .menu {width: calc(50% - 5px); margin-right: 10px;}
    .menu_wrap .menu:nth-child(n+3) {margin-top: 30px;}
    .menu .menu_btn .txt {margin-top: 10px ;}

    .menu .modal .flex .txt .title {  padding-bottom: 15px; margin-bottom: 20px;}

}
@media screen and (max-width:390px){
    .menu .menu_btn .txt h3 {font-size: 17px; }
}