@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "NotoSansCJKkr", Helvetica, sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.5px; color: #000;}
input{ outline: none; -webkit-appearance: none;}
select{ outline: none; -webkit-appearance: none;}
select::-ms-expand{ display: none;}
textarea{ outline: none; -webkit-appearance: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #FFF;}
html.no_scroll{ overflow: hidden;}
body{ overflow: hidden; background: #FFF; -webkit-text-size-adjust: none; transition: all .2s;}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    html{ font-size: calc(100vw / 30);}
}



.full_menu{ position: fixed; z-index: 300; top: 0; right: 100%; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity .3s;}
.full_menu .inner{ overflow: auto; position: fixed; z-index: 10; top: 0; bottom: 0; right: -500px; max-width: 500px; width: 100%; background: #FFF; transition: all .5s;}
.full_menu .scroll{ position: relative; padding: 60px;}
.full_menu .close_btn{ position: absolute; z-index: 10; top: 20px; right: 20px; cursor: pointer;}
.full_menu .close_btn svg{ width: 30px; height: 30px;}
.full_menu .ft{ display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10;}
.full_menu .logo{}
.full_menu .logo img{ display: block; height: 40px;}

.full_menu .menu{ display: flex; grid-gap: 10px; margin: 30px 0 0 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.full_menu .menu a{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; position: relative; width: 50%; height: 50px; transition: all .3s;}
.full_menu .menu a img{ display: block; height: 16px;}
.full_menu .menu a p{ font-size: 16px; color: #000;}

.full_menu .gnb{ padding: 30px 0;}
.full_menu .gnb > ul{}
.full_menu .gnb > ul > li{ position: relative;}
.full_menu .gnb > ul > li > a{ display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; height: 50px; cursor: pointer;}
.full_menu .gnb > ul > li > a p{ position: relative; z-index: 10; font-size: 24px; font-weight: 700; color: #000;}
.full_menu .gnb > ul > li > a svg{ margin: 0 10px 0 0; width: 12px; height: 12px; transition: all .2s;}
.full_menu .gnb > ul > li ul{ display: none; margin: 10px 0; padding: 20px 40px; border-radius: 10px; background: #f6f8fb;}
.full_menu .gnb > ul > li ul li{}
.full_menu .gnb > ul > li ul li a{ display: flex; align-items: center; overflow: hidden; padding: 15px 0; font-size: 20px; color: rgba(0 0 0/80%); white-space: nowrap;}

.full_menu .gnb > ul > li:hover > a p{ color: #00a4cf;}
.full_menu .gnb > ul > li:hover > a svg{ transform: rotate(180deg);}
.full_menu .gnb > ul > li ul:before{ background: rgba(255 255 255/10%);}
.full_menu .gnb > ul > li ul li a:hover{ font-weight: 700; color: #000;}
.full_menu .gnb > ul > li.on > a{ color: #00a4cf;}
.full_menu .gnb > ul > li.on > a p{ font-weight: 700; color: #00a4cf;}
.full_menu .gnb > ul > li.on > a svg{ transform: rotate(180deg);}
.full_menu .gnb > ul > li.on > a svg path{ color: #00a4cf;}
.full_menu .gnb > ul > li ul li.on a{ font-weight: 700 !important; color: #00a4cf !important;}
.full_menu .close{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.00001%);}
.full_menu.on{ right: 0; left: 0; opacity: 1;}
.full_menu.on .inner{ right: 0; opacity: 1;}
@media(max-width: 767px){
    .full_menu .row{ left: -100%; max-width: 100%;}
    .full_menu .scroll{ padding: 3rem;}
    .full_menu .logo img{ height: 2rem;}

    .full_menu .menu{ grid-gap: 0.5rem; margin: 2rem 0 0 0;}
    .full_menu .menu a{ grid-gap: 0.5rem; height: 2.5rem;}
    .full_menu .menu a img{ height: 1rem;}
    .full_menu .menu a p{ font-size: 1rem;}

    .full_menu .gnb{ padding: 1.5rem 0;}
    .full_menu .gnb > ul > li > a{ height: 4rem;}
    .full_menu .gnb > ul > li > a p{ font-size: 1.6rem;}
    .full_menu .gnb > ul > li ul{ margin: 0.5rem 0; padding: 1rem 1.5rem;}
    .full_menu .gnb > ul > li ul li a{ font-size: 1.2rem;}
}



.header{ position: relative; z-index: 200; box-shadow: 0 1px 0 0 rgba(0 0 0/10%); transition: all .2s;}
.header .top{ overflow: hidden; border-bottom: 2px solid #00a7d0; background: #edf1f5;}
.header .top .modle_min{ display: flex; justify-content: space-between; align-items: center;}
.header .top .fl{ display: flex; align-items: center; grid-gap: 30px; height: 60px;}
.header .top .fr{ display: flex; align-items: center; grid-gap: 30px; position: relative; padding: 0 0 0 50px; height: 60px;}
.header .top a{ display: flex; align-items: center; grid-gap: 5px; position: relative; z-index: 10; height: 40px;}
.header .top a > img{ display: block; height: 24px;}
.header .top a p{ font-size: 15px; color: #333;}
.header .bottom{}
.header .bottom .modle_min{ display: flex; justify-content: space-between; align-items: center; height: 120px;}
.header .bottom .logo{ display: block; height: 50px;}
.header .bottom .logo img{ display: block; height: 100%;}
.header .bottom .fr{ display: flex; align-items: center;}
.header .bottom .gnb{ position: relative;}
.header .bottom .gnb > ul{ display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10;}
.header .bottom .gnb > ul > li{ display: flex; align-items: center; position: relative;}
.header .bottom .gnb > ul > li > a{ display: flex; align-items: center; grid-gap: 5px; padding: 0 30px; height: 120px; cursor: pointer;}
.header .bottom .gnb > ul > li > a:before{ content: ""; display: none; position: absolute; bottom: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 10px; background: #00a4cf; opacity: 1; transition: all .2s;}
.header .bottom .gnb > ul > li > a p{ position: relative; z-index: 1; font-size: 24px; font-weight: 700; color: #000; white-space: nowrap; transition: all .2s;}
.header .bottom .gnb > ul > li > a i{ font-size: 16px; color: rgba(0 0 0/100%);}
.header .bottom .gnb > ul > li > ul{ overflow: hidden; position: absolute; z-index: 10; top: 100px; right: 0; left: 0; padding: 0;  height: 0; transition: all .2s;}
.header .bottom .gnb > ul > li > ul li{}
.header .bottom .gnb > ul > li > ul li a{ display: flex; align-items: center; position: relative; padding: 0 0 0 30px; height: 0; font-size: 17px; color: #666; white-space: nowrap; opacity: 0; transition: all .2s;}

.header .bottom .gnb > ul > li > ul li a:hover{ font-weight: 600; color: #000;}
.header .bottom .gnb > ul > li.on > a p{ color: #00a4cf;}
.header .bottom .gnb > ul > li.on > a i{ color: rgba(120 80 149/100%);}
.header .bottom .gnb > ul > li.on > a:before{ display: block;}
.header .bottom .gnb > ul > li > ul li.on a{ font-weight: 600; color: #00a4cf;}
.header .bottom .gnb .bg{ content: ""; position: absolute; top: 100px; right: -3000px; left: -3000px; height: 0; border-radius: 15px; background: rgba(255 255 255/90%); backdrop-filter: blur(20px); border: 1px solid rgba(0 0 0/10%); box-shadow: 0 10px 30px 0 rgba(0 0 0/10%); opacity: 0; transition: all .2s;}

.header .bottom .gnb:hover > ul > li > ul{ top: 120px; padding: 20px 0; height: 260px; opacity: 1;}
.header .bottom .gnb:hover > ul > li > ul li a{ height: 35px; opacity: 1;}
.header .bottom .gnb:hover .bg{ top: 120px; height: 260px; opacity: 1;}


.header .bottom .btn_search{ margin-left: 30px; cursor: pointer;}
.header .bottom .btn_search svg{ width: 30px; height: 30px;}
.header .bottom .btn_full_menu{ margin-left: 30px; cursor: pointer;}
.header .bottom .btn_full_menu svg{ width: 30px; height: 30px;}
.header.on{ box-shadow: 0 1px 0 0 rgba(0 0 0/10%);}
@media(max-width: 1400px){
.header .bottom .gnb > ul > li > a{ padding: 0 20px;}
}
@media(max-width: 1150px){
    .header .bottom .gnb{ display: none;}
}
@media(max-width: 1000px){
    .header .top .fl{ grid-gap: 20px;}
    .header .top .fr{ grid-gap: 20px; padding: 0 0 0 30px;}
    .header .top a{ height: 35px;}
    .header .top a > img{ height: 20px;}
    .header .top a p{ font-size: 14px;}
    .header .bottom .modle_min{ height: 100px;}
}
@media(max-width: 767px){
    .header .top .fl{ grid-gap: 0.8rem; height: 3rem;}
    .header .top .fl a p{ display: none;}
    .header .top .fr{ grid-gap: 1.5rem; padding: 0 0 0 1.5rem; height: 3rem;}
    .header .top .fr:after{ right: -10rem; border-radius: 0 0 0 1.5rem;}
    .header .top a{ grid-gap: 0.3rem; height: 3rem;}
    .header .top .fr a:first-child{ display: none;}
    .header .top a > img{ height: 1.2rem;}
    .header .top a p{ font-size: 0.9rem;}
    .header .bottom .modle_min{ height: 5rem;}
    .header .bottom .logo{ height: 2.2rem;}
    .header .bottom .btn_search{ margin-left: 0;}
    .header .bottom .btn_search svg{ width: 1.8rem; height: 1.8rem;}
    .header .bottom .btn_full_menu{ margin-left: 1.5rem;}
    .header .bottom .btn_full_menu svg{ width: 1.8rem; height: 1.8rem;}
}




.header_search{ display: none; position: absolute; z-index: 500; top: 160px; left: calc(50% - 640px); padding: 50px; width: 1280px; border-radius: 50px; border: 1px solid rgba(0 0 0/10%); background: #FFF; box-shadow: 0 10px 30px 0 rgba(0 0 0/10%);}
.header_search .ft{ display: flex; grid-gap: 10px; position: relative;}
.header_search .ft input{ display: flex; align-items: center; margin: 0; padding: 0 20px; width: 100%; height: 60px; border-radius: 30px; border: 1px solid #ddd; background: #f5f5f5; font-size: 18px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.header_search .ft .btn{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 70px; width: 60px; height: 60px; cursor: pointer;}
.header_search .ft .btn svg{ width: 30px; height: 30px;}
.header_search .ft .btn_close{ flex: 0 0 60px; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 30px; background: #000; cursor: pointer;}
.header_search .ft .btn_close svg{ width: 30px; height: 30px;}
.header_search .ft .btn_close svg path{ fill: #FFF;}
.header_search .fb{ display: flex; grid-gap: 30px; margin-top: 20px;}
.header_search .fb .tit{ line-height: 30px; font-size: 18px; font-weight: 700; color: #00a7d0;}
.header_search .fb .tag{ flex: 1; display: flex; flex-wrap: wrap; grid-gap: 10px;}
.header_search .fb .tag a{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 30px; border-radius: 15px; background: #edf1f5; font-size: 14px; color: #000;}
.header_search.on{ display: block;}
@media(max-width: 1400px){
    .header_search{ right: 50px; left: 50px; width: auto;}
}
@media(max-width: 1000px){
    .header_search{ top: 140px;}
}
@media(max-width: 767px){
    .header_search{ top: 7.5rem; right: 1rem; left: 1rem; padding: 2rem; border-radius: 3rem;}
    .header_search .ft{ grid-gap: 0.5rem;}
    .header_search .ft input{ padding: 0 1rem; height: 3.5rem; font-size: 1.1rem;}
    .header_search .ft .btn{ right: 4rem; width: 3.5rem; height: 3.5rem;}
    .header_search .ft .btn svg{ width: 2rem; height: 2rem;}
    .header_search .ft .btn_close{ flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem;}
    .header_search .ft .btn_close svg{ width: 2rem; height: 2rem;}
    .header_search .ft .btn_close svg path{ fill: #FFF;}
    .header_search .fb{ display: grid; grid-gap: 0.5rem; margin-top: 1rem;}
    .header_search .fb .tit{ line-height: 1; font-size: 1rem;}
    .header_search .fb .tag{ grid-gap: 0.5rem;}
    .header_search .fb .tag a{ padding: 0 1rem; height: 2rem; border-radius: 1rem; font-size: 1rem;}
}




.footer{ margin-top: 80px;}
.footer .top{ position: relative; border-top: 2px solid #000;}
.footer .top:after{ content: ""; position: absolute; top: calc(30px + 20px + 30px); right: 0; bottom: 0; left: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fafafa;}
.footer .top .modle_min{}
.footer .top .gnb{ position: relative; z-index: 10;}
.footer .top .gnb > ul{ display: flex;}
.footer .top .gnb > ul > li{ width: 20%;}
.footer .top .gnb > ul > li > a{ display: block; padding: 30px 0; cursor: pointer;}
.footer .top .gnb > ul > li > a p{ line-height: 20px; font-size: 18px; font-weight: 700; color: #000; transition: all .3s;}
.footer .top .gnb > ul > li ul{  padding: 30px 0 50px 0;}
.footer .top .gnb > ul > li ul li{}
.footer .top .gnb > ul > li ul li a{ display: block; padding: 10px 0; font-size: 16px; color: #666; transition: all .3s;}
.footer .top .gnb > ul > li:hover a p{ color: #00a7d0;}
.footer .top .gnb > ul > li ul li a:hover{ font-weight: 700; color: #00a7d0;}

.footer .top .gnb > ul > li.on > a p{ color: #00a7d0;}
.footer .top .gnb > ul > li ul li.on a{ color: #00a7d0;}

.footer .bottom{}
.footer .bottom .modle_min{ display: flex; align-items: flex-start; grid-gap: 80px; padding: 50px 0 100px 0;}
.footer .bottom .logo{ display: block; cursor: pointer; height: 50px;}
.footer .bottom .logo img{ display: block; width: auto; height: 100%;}
.footer .bottom .fr{ flex: 1; display: flex;}
.footer .bottom .fr .fl{ flex: 1;}
.footer .bottom .fr .fl .menu{ display: flex; align-items: center; grid-gap: 15px;}
.footer .bottom .fr .fl .menu a{ font-size: 16px; color: #666; transition: all .3s;}
.footer .bottom .fr .fl .menu a:hover{ color: #000;}
.footer .bottom .fr .fl .menu span{ font-size: 12px; color: #ddd;}
.footer .bottom .fr .fl .info{ display: flex; flex-wrap: wrap; grid-gap: 10px 15px; margin-top: 30px; max-width: 500px;}
.footer .bottom .fr .fl .info .wrap{ display: flex; grid-gap: 5px;}
.footer .bottom .fr .fl .info .wrap p{ line-height: 1.2; font-size: 15px; font-weight: 500; color: #333;}
.footer .bottom .fr .fl .info .wrap span{ line-height: 1.2; font-size: 15px; color: #666;}
.footer .bottom .fr .fl .copy{ margin-top: 40px; font-size: 13px; text-transform: uppercase; color: #999;}
.footer .bottom .fr select{ display: flex; align-items: center; margin: 0; padding: 0 50px 0 20px; width: 220px; height: 50px; border-radius: 25px; border: 1px solid rgba(0 0 0/10%); background: url(/edu/images/modle_select_down.svg) no-repeat center right 15px #FFF; background-size: 14px auto; font-size: 17px; font-weight: 400; color: #333; outline: none; -webkit-appearance: none;}
@media(max-width: 1400px){
    .footer .bottom .fr{ flex-direction: column-reverse;}
    .footer .bottom .fr .fl{ margin-top: 30px;}
}
@media(max-width: 1000px){
    .footer .bottom .modle_min{ flex-direction: column; align-items: center; grid-gap: 0;}
    .footer .bottom .fr{ align-items: center; margin-top: 30px;}
    .footer .bottom .fr .fl .info{ justify-content: center;}
    .footer .bottom .fr .fl .copy{ text-align: center;}
}
@media(max-width: 767px){
    .footer{ margin-top: 4rem;}
    .footer .top:after{ content: ""; position: absolute; top: calc(2rem + 1.2rem + 2rem);}
    .footer .top .gnb > ul{ justify-content: space-between;}
    .footer .top .gnb > ul > li{ width: auto;}
    .footer .top .gnb > ul > li > a{ padding: 2rem 0;}
    .footer .top .gnb > ul > li > a p{ line-height: 1.2rem; font-size: 1.1rem;}
    .footer .top .gnb > ul > li ul{  padding: 1.5rem 0 2rem 0;}
    .footer .top .gnb > ul > li ul li a{ padding: 0.5rem 0; font-size: 0.9rem;}
    .footer .bottom .modle_min{ padding: 3rem 0 6rem 0;}
    .footer .bottom .logo{ height: 2.4rem;}
    .footer .bottom .fr{ margin-top: 2rem;}
    .footer .bottom .fr .fl{ flex: 1;}
    .footer .bottom .fr .fl .menu{ flex-wrap: wrap; justify-content: center; grid-gap: 1rem 2rem;}
    .footer .bottom .fr .fl .menu a{ font-size: 1.1rem;}
    .footer .bottom .fr .fl .menu span{ display: none;}
    .footer .bottom .fr .fl .info{ grid-gap: 1rem 1rem; margin-top: 2rem;}
    .footer .bottom .fr .fl .info .wrap{ grid-gap: 0.5rem;}
    .footer .bottom .fr .fl .info .wrap p{ font-size: 0.9rem;}
    .footer .bottom .fr .fl .info .wrap span{ font-size: 0.9rem;}
    .footer .bottom .fr .fl .copy{ margin-top: 2rem; font-size: 0.8rem;}
    .footer .bottom .fr select{ padding: 0 3rem 0 1.2rem; width: 16rem; height: 3rem; border-radius: 3rem; background: url(/edu/images/modle_select_down.svg) no-repeat center right 1rem #FFF; background-size: 1rem auto; font-size: 1.1rem;}
}




.home_visual{ position: relative;}
.home_visual .text{ display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 10; margin: 0 auto; padding-bottom: 90px; max-width: 1280px; width: 100%; height: 500px;}
.home_visual .text .t1{ font-size: 18px; color: rgba(255 255 255/70%); letter-spacing: 0;}
.home_visual .text .t2{ margin-top: 15px; line-height: 1.1; font-size: 40px; font-weight: 700; color: #FFF;}
.home_visual .text .t3{ margin-top: 20px; line-height: 1.3; font-size: 20px; color: #FFF;}
.home_visual .bg{ overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/edu/images/vbg.jpg) top center/cover;}
.home_visual .bg img{ display: block; position: absolute; top: 50%; left: 50%; transform: translate(0,-40%);}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .home_visual .bg img{ width: 500px;}
}
@media(max-width: 767px){
    .home_visual .text{ padding-bottom: 4rem; height: 22rem;}
    .home_visual .text .t1{ font-size: 1rem;}
    .home_visual .text .t2{ margin-top: 1rem; font-size: 2.4rem;}
    .home_visual .text .t3{ margin-top: 1.2rem; font-size: 1.1rem;}
    .home_visual .bg img{ left: 45%; transform: translate(0,-30%); width: 20rem;}
}




.home_quick_menu{ position: relative; z-index: 10; margin-top: -90px;}
.home_quick_menu ul{ display: flex; border-radius: 100px; background: #FFF; box-shadow: 0 0 0 1px rgba(0 0 0/10%);}
.home_quick_menu ul li{ position: relative; width: 20%;}
.home_quick_menu ul li::after{ content: ""; position: absolute; top: calc(50% - 30px); left: 0; width: 1px; height: 60px; background: #e9e9e9;}
.home_quick_menu ul li:first-child::after{ display: none;}
.home_quick_menu ul li a{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 180px;}
.home_quick_menu ul li a .icon{ display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%); transition: all .3s;}
.home_quick_menu ul li a .icon img{ display: block; width: 40px; height: 40px;}
.home_quick_menu ul li a p{ margin-top: 15px; font-size: 20px; font-weight: 500; color: #000;}
.home_quick_menu ul li a:hover .icon{ border-color: #ffd655; background: #ffd655;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .home_quick_menu{ margin-top: -70px;}
    .home_quick_menu ul{ padding: 0 20px;}
    .home_quick_menu ul li::after{ display: none;}
    .home_quick_menu ul li a{ height: 140px;}
    .home_quick_menu ul li a .icon{ width: 70px; height: 70px;}
    .home_quick_menu ul li a .icon img{ width: 30px; height: 30px;}
    .home_quick_menu ul li a p{ font-size: 16px;}
    .home_quick_menu ul li a:hover .icon{ border-color: rgba(0 0 0/10%); background: #FFF;}
}
@media(max-width: 767px){
    .home_quick_menu{ margin-top: -4rem;}
    .home_quick_menu ul{ display: grid; grid-template-columns: repeat(3,1fr); padding: 1rem; border-radius: 2rem;}
    .home_quick_menu ul li{ width: 100%;}
    .home_quick_menu ul li a{ height: 7rem;}
    .home_quick_menu ul li a .icon{ width: 4rem; height: 4rem;}
    .home_quick_menu ul li a .icon img{ width: 1.8rem; height: 1.8rem;}
    .home_quick_menu ul li a p{ margin-top: 0.6rem; font-size: 1.1rem;}
}




.home_top{}
.home_top .modle_min{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 40px; padding: 60px 0 0 0;}
.home_top .modle_min .inner{ min-width: 0;}
@media(max-width: 1400px){
    .home_top .modle_min{ grid-gap: 20px;}
}
@media(max-width: 1000px){
    .home_top .modle_min{ display: grid; grid-template-columns: repeat(2,1fr);}
    .home_top .modle_min .inner:nth-child(3){ grid-column: 1/3;}
}
@media(max-width: 767px){
    .home_top .modle_min{ grid-template-columns: repeat(1,1fr); grid-gap: 3rem; padding: 3rem 0 0 0;}
    .home_top .modle_min .inner:nth-child(3){ grid-column: 1/2;}
}




.home_alarm_zone{}
.home_alarm_zone .head{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;}
.home_alarm_zone .head .tit{ font-size: 30px; font-weight: 700; color: #000;}
.home_alarm_zone .head .fr{ display: flex; grid-gap: 5px;}
.home_alarm_zone .head .fr .home_alarm_zone_page{ display: flex; align-items: center; grid-gap: 5px; margin-right: 15px; width: auto; font-size: 18px; font-weight: 300; color: rgba(0 0 0/20%); transition: all .2s;}
.home_alarm_zone .head .fr .home_alarm_zone_page span{ font-size: 18px; color: rgba(0 0 0/60%);}
.home_alarm_zone .head .fr .home_alarm_zone_page span.swiper-pagination-current{ font-size: 20px; font-weight: 600; color: #000;}
.home_alarm_zone .head .fr .home_alarm_zone_btn{}
.home_alarm_zone .head .fr .home_alarm_zone_btn a{ display: none; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/20%); cursor: pointer; transition: all .2s;}
.home_alarm_zone .head .fr .home_alarm_zone_btn a svg{ width: 18px; height: 18px;}
.home_alarm_zone .head .fr .home_alarm_zone_btn a svg path{ color: #000;}
.home_alarm_zone .head .fr .home_alarm_zone_btn a svg rect{ fill: #000;}
.home_alarm_zone .head .fr .home_alarm_zone_btn a:hover{ border: 1px solid rgba(0 0 0/100%);}
.home_alarm_zone .head .fr .home_alarm_zone_btn a.on{ display: flex;}
.home_alarm_zone .head .fr .home_alarm_zone_prev{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/20%); cursor: pointer; transition: all .2s;}
.home_alarm_zone .head .fr .home_alarm_zone_prev svg{ width: 20px; height: 20px;}
.home_alarm_zone .head .fr .home_alarm_zone_prev svg path{ color: #000;}
.home_alarm_zone .head .fr .home_alarm_zone_prev:hover{ border: 1px solid rgba(0 0 0/100%);}
.home_alarm_zone .head .fr .home_alarm_zone_next{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/20%); cursor: pointer; transition: all .2s;}
.home_alarm_zone .head .fr .home_alarm_zone_next svg{ width: 20px; height: 20px;}
.home_alarm_zone .head .fr .home_alarm_zone_next svg path{ color: #000;}
.home_alarm_zone .head .fr .home_alarm_zone_next:hover{ border: 1px solid rgba(0 0 0/100%);}
.home_alarm_zone .body{}
.home_alarm_zone .body .rolling{ overflow: hidden; border-radius: 20px; box-shadow: 0 10px 20px 0 rgba(0 0 0/5%);}
.home_alarm_zone .body .rolling .swiper-wrapper{}
.home_alarm_zone .body .rolling .swiper-wrapper .swiper-slide{}
.home_alarm_zone .body .rolling .swiper-wrapper .swiper-slide a{ display: block;}
.home_alarm_zone .body .rolling .swiper-wrapper .swiper-slide img{ display: block; width: 100%;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    .home_alarm_zone .head{ padding-bottom: 1rem;}
    .home_alarm_zone .head .tit{ font-size: 1.8rem;}
    .home_alarm_zone .head .fr{ grid-gap: 0.5rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_page{ grid-gap: 0.5rem; margin-right: 1rem; font-size: 1.2rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_page span{ font-size: 1.2rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_page span.swiper-pagination-current{ font-size: 1.2rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_btn a{ width: 2.2rem; height: 2.2rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_btn a svg{ width: 1rem; height: 1rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_prev{ width: 2.2rem; height: 2.2rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_prev svg{ width: 1rem; height: 1rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_next{ width: 2.2rem; height: 2.2rem;}
    .home_alarm_zone .head .fr .home_alarm_zone_next svg{ width: 1rem; height: 1rem;}
    .home_alarm_zone .body .rolling{ border-radius: 1rem;}
}




.home_program_matching{ display: flex; flex-direction: column; height: 100%;}
.home_program_matching .head{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;}

.home_program_matching .head .menu{ display: flex; align-items: center; grid-gap: 15px;}
.home_program_matching .head .menu p{ font-size: 30px; font-weight: 700; color: #999; cursor: pointer; transition: all .3s;}
.home_program_matching .head .menu p:hover{ color: #000;}
.home_program_matching .head .menu p.on{ color: #000;}
.home_program_matching .head .menu span{ font-size: 30px; font-weight: 100; color: #ddd;}

.home_program_matching .head .tit{ font-size: 30px; font-weight: 700; color: #000;}
.home_program_matching .head .more{ display: flex; align-items: center; grid-gap: 5px; padding: 0 15px; height: 30px; border-radius: 20px; border: 1px solid #ddd; transition: all .3s;}
.home_program_matching .head .more p{ font-size: 14px; color: #666;}
.home_program_matching .head .more svg{ width: 16px; height: 16px;}
.home_program_matching .head .more svg path{ color: #666;}
.home_program_matching .head .more:hover{ border-color: #000;}
.home_program_matching .body{ flex: 1; display: flex; flex-direction: column; border-radius: 20px; border: 1px solid rgba(0 0 0/10%); background: #FFF; box-shadow: 0 10px 20px 0 rgba(0 0 0/5%);}
.home_program_matching .body .top{ display: flex; flex-direction: column; justify-content: center; padding: 0 40px; height: 130px; border-radius: 20px 20px 0 0; background: url(/images/hpm_bg.jpg) center/cover;}
.home_program_matching .body .top .txt{ font-size: 14px; color: rgba(255 255 255/80%);}
.home_program_matching .body .top .tit{ margin-top: 10px; line-height: 1.2; font-size: 20px; font-weight: 700; color: #FFF;}

.home_program_matching .body .notice_list{ flex: 1; display: none; flex-direction: column; justify-content: space-between; padding: 0 40px 0 40px; border-radius: 0 0 20px 20px;}
.home_program_matching .body .notice_list.on{ display: flex;}
.home_program_matching .body .notice_list a{ display: flex; flex-direction: column; justify-content: center; grid-gap: 10px; position: relative; padding-right: 30px; height: 25%; border-bottom: 1px dashed #ddd;}
.home_program_matching .body .notice_list a:last-child{ border-bottom: 0;}
.home_program_matching .body .notice_list a .tit{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 18px; font-weight: 600; color: #000; transition: all .3s;}
.home_program_matching .body .notice_list a .date{ font-size: 14px; color: #999;}
.home_program_matching .body .notice_list a svg{ position: absolute; top: calc(50% - 10px); right: 0; width: 20px; height: 20px;}
.home_program_matching .body .notice_list a:hover .tit{ color: #0044b5;}

.home_program_matching .body .bottom{ flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 40px 40px 40px; border-radius: 0 0 20px 20px; border: 1px solid rgba(0 0 0/10%); border-top: 0; background: #FFF;}
.home_program_matching .body .bottom .list{}
.home_program_matching .body .bottom .list .wrap{ display: flex; align-items: center; height: 80px; border-bottom: 1px solid #ddd;}
.home_program_matching .body .bottom .list .wrap:last-child{ border-bottom: 0;}
.home_program_matching .body .bottom .list .wrap .tit{ display: flex; align-items: center; grid-gap: 10px;}
.home_program_matching .body .bottom .list .wrap .tit img{ display: block; width: 30px;}
.home_program_matching .body .bottom .list .wrap .tit p{ font-size: 18px; font-weight: 700; color: #000;}
.home_program_matching .body .bottom .list .wrap select{ flex: 1; display: flex; align-items: center; margin: 0; padding: 0 35px 0 30px; width: auto; height: 40px; border-radius: 0; border: 0; background: url(/images/modle_select_down.svg) no-repeat center right 0 #FFF; background-size: 14px auto; font-size: 16px; font-weight: 400; color: #333; outline: none; -webkit-appearance: none;}
.home_program_matching .body .bottom .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; width: 100%; height: 60px; border-radius: 30px; background: #eef4ff; cursor: pointer;}
.home_program_matching .body .bottom .btn img{ display: block; height: 20px;}
.home_program_matching .body .bottom .btn p{ font-size: 20px; font-weight: 700; color: #0044b5;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .home_program_matching .body .bottom .list .wrap{ height: 75px;}
    .home_program_matching .body .bottom .btn{ height: 50px;}
}
@media(max-width: 767px){
    .home_program_matching .head{ padding-bottom: 1rem;}

    .home_program_matching .head .menu{ grid-gap: 1rem;}
    .home_program_matching .head .menu p{ font-size: 1.8rem;}
    .home_program_matching .head .menu span{ font-size: 1.8rem;}

    .home_program_matching .head .tit{ font-size: 1.8rem;}
    .home_program_matching .body{ border-radius: 1rem;}
    .home_program_matching .body .top{ padding: 2rem; height: auto; border-radius: 1rem 1rem 0 0;}
    .home_program_matching .body .top .txt{ font-size: 1rem;}
    .home_program_matching .body .top .tit{ margin-top: 0.8rem; font-size: 1.4rem;}

    .home_program_matching .body .notice_list{ padding: 0 2rem; border-radius: 0 0 1rem 1rem;}
    .home_program_matching .body .notice_list a{ grid-gap: 0.5rem; padding: 1.5rem 3rem 1.5rem 0; height: auto;}
    .home_program_matching .body .notice_list a .tit{ font-size: 1.2rem;}
    .home_program_matching .body .notice_list a .date{ font-size: 1rem;}
    .home_program_matching .body .notice_list a svg{ top: calc(50% - 0.5rem); width: 1rem; height: 1rem;}

    .home_program_matching .body .bottom{ padding: 0.5rem 2rem 2rem 2rem; border-radius: 0 0 1rem 1rem;}
    .home_program_matching .body .bottom .list .wrap{ height: 5rem;}
    .home_program_matching .body .bottom .list .wrap .tit{ grid-gap: 0.8rem;}
    .home_program_matching .body .bottom .list .wrap .tit img{ width: 1.8rem;}
    .home_program_matching .body .bottom .list .wrap .tit p{ font-size: 1.4rem;}
    .home_program_matching .body .bottom .list .wrap select{ padding: 0 2rem 0 2rem; height: 3rem; background-size: 1rem auto; font-size: 1.1rem;}
    .home_program_matching .body .bottom .btn{ grid-gap: 0.8rem; margin-top: 1rem; height: 3.5rem; border-radius: 3rem;}
    .home_program_matching .body .bottom .btn img{ height: 1.2rem;}
    .home_program_matching .body .bottom .btn p{ font-size: 1.2rem;}
}




.home_calendar{ display: flex; flex-direction: column; height: 100%;}
.home_calendar .head{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;}
.home_calendar .head .tit{ font-size: 30px; font-weight: 700; color: #000;}
.home_calendar .head .fr{ display: flex; align-items: center; grid-gap: 5px;}
.home_calendar .head .fr .date{ display: flex; align-items: center; margin-right: 15px; width: auto; font-size: 18px; font-weight: 300; color: rgba(0 0 0/60%); transition: all .2s;}
.home_calendar .head .fr .date b{ font-weight: 700; color: #000;}
.home_calendar .head .fr .btn{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/20%); cursor: pointer; transition: all .2s;}
.home_calendar .head .fr .btn svg{ width: 20px; height: 20px;}
.home_calendar .head .fr .btn svg path{ color: #000;}
.home_calendar .head .fr .btn:hover{ border: 1px solid rgba(0 0 0/100%);}
.home_calendar .body{ flex: 1; display: flex; flex-direction: column;}
.home_calendar .body .calendar{ overflow: hidden; border-radius: 20px 20px 0 0; border: 1px solid #ddd; box-shadow: 0 10px 20px 0 rgba(0 0 0/5%);}
.home_calendar .body .calendar .c_head{ display: flex; justify-content: space-between; align-items: center; padding: 0 10px; height: 60px; background: #ffd655;}
.home_calendar .body .calendar .c_head p{ width: 50%; text-align: center; font-size: 16px; font-weight: 600;}
.home_calendar .body .calendar .c_head p.sun{ color: #F00;}
.home_calendar .body .calendar .c_head p.sat{ color: #00bef5;}
.home_calendar .body .calendar .c_body{ overflow: hidden; padding: 10px 10px;}
.home_calendar .body .calendar .c_body ul{ display: flex; flex-wrap: wrap;}
.home_calendar .body .calendar .c_body ul li{ display: flex; justify-content: center; align-items: center; width: 14.285%; height: 50px;}
.home_calendar .body .calendar .c_body ul li p{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; color: #666;}
.home_calendar .body .calendar .c_body ul li p b{ display: none; margin-top: -4px; font-size: 12px; color: #FFF; transform: scale(0.6);}
.home_calendar .body .calendar .c_body ul li p font{ display: block; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%;}
.home_calendar .body .calendar .c_body ul li.today p{ background: #ffd655; color: #000;}
.home_calendar .body .calendar .c_body ul li.today p b{ display: block; color: #000;}
.home_calendar .body .calendar .c_body ul li.sun p{ color: #F00;}
.home_calendar .body .calendar .c_body ul li.sat p{ color: #00bef5;}
.home_calendar .body .list{ flex: 1; position: relative; border-radius: 0 0 20px 20px; border: 1px solid #ddd; border-top: 0; box-shadow: 0 10px 20px 0 rgba(0 0 0/5%);}
.home_calendar .body .list .box{ overflow: auto; display: grid; grid-gap: 10px; position: absolute; top: 15px; right: 15px; bottom: 15px; left: 20px;}
.home_calendar .body .list .wrap{ display: flex; align-items: center; padding-right: 20px; height: 25px;}
.home_calendar .body .list .wrap span{ display: flex; align-items: center; grid-gap: 5px; width: 60px; font-size: 16px; font-weight: 700;}
.home_calendar .body .list .wrap span font{ display: block; width: 6px; height: 6px; border-radius: 50%;}
.home_calendar .body .list .wrap p{ flex: 1; font-size: 16px; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.home_calendar .body .list .box.no_data{ overflow: initial; display: flex; justify-content: center; align-items: center;}
.home_calendar .body .list .box.no_data p{ font-size: 14px; color: #666;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .home_calendar{ padding-top: 40px;}
    .home_calendar .body .list{ padding: 30px 40px;}
    .home_calendar .body .list .box{ position: initial;}
}
@media(max-width: 767px){
    .home_calendar{ padding-top: 0;}
    .home_calendar .head{ padding-bottom: 1rem;}
    .home_calendar .head .tit{ font-size: 1.8rem;}
    .home_calendar .head .fr{ grid-gap: 0.5rem;}
    .home_calendar .head .fr .date{ margin-right: 1rem; font-size: 1.4rem;}
    .home_calendar .head .fr .btn{ width: 2.2rem; height: 2.2rem;}
    .home_calendar .head .fr .btn svg{ width: 1rem; height: 1rem;}
    .home_calendar .body .calendar{ border-radius: 1rem 1rem 0 0;}
    .home_calendar .body .calendar .c_head{ padding: 0 1rem; height: 4rem;}
    .home_calendar .body .calendar .c_head p{ font-size: 1.1rem;}
    .home_calendar .body .calendar .c_body{ padding: 1rem;}
    .home_calendar .body .calendar .c_body ul li{ height: 3.5rem;}
    .home_calendar .body .calendar .c_body ul li p{ width: 3.2rem; height: 3.2rem; font-size: 1.1rem;}
    .home_calendar .body .calendar .c_body ul li p b{ margin-top: 0; font-size: 0.7rem; transform: scale(1);}
    .home_calendar .body .list{ padding: 2rem; border-radius: 0 0 1rem 1rem;}
    .home_calendar .body .list .box{ grid-gap: 0.5rem;}
    .home_calendar .body .list .wrap{ padding-right: 0; height: 2rem;}
    .home_calendar .body .list .wrap span{ grid-gap: 0.5rem; width: 4rem; font-size: 1.2rem;}
    .home_calendar .body .list .wrap p{ font-size: 1.1rem}
    .home_calendar .body .list .box.no_data p{ font-size: 1rem;}
}




.home_registration{}
.home_registration  .modle_min{ padding-top: 60px;}
.home_registration .head{}
.home_registration .head .ft{ display: flex; justify-content: space-between; align-items: center;}
.home_registration .head .ft .tit{ font-size: 30px; font-weight: 700; color: #000;}
.home_registration .head .ft .fr{ display: flex; grid-gap: 10px;}
.home_registration .head .ft .fr select{ display: flex; align-items: center; margin: 0; padding: 0 50px 0 20px; width: auto; height: 50px; border-radius: 25px; border: 1px solid rgba(0 0 0/10%); background: url(/edu/images/modle_select_down.svg) no-repeat center right 15px #FFF; background-size: 14px auto; font-size: 17px; font-weight: 400; color: #333; outline: none; -webkit-appearance: none;}
.home_registration .head .ft .fr .search{ display: flex; grid-gap: 10px; position: relative;}
.home_registration .head .ft .fr .search svg{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; left: 0; padding: 15px; width: 50px; height: 50px;}
.home_registration .head .ft .fr .search input{ display: flex; align-items: center; margin: 0; padding: 0 20px 0 50px; width: 300px; height: 50px; border-radius: 25px; border: 1px solid #ddd; background: #FFF; font-size: 17px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.home_registration .head .ft .fr .search .btn{ display: flex; justify-content: center; align-items: center; width: 80px; height: 50px; border-radius: 25px; background: #00a7d0; font-size: 17px; font-weight: 600; color: #FFF; cursor: pointer;}
.home_registration .head .menu{ display: flex; grid-gap: 10px; margin-top: 20px;}
.home_registration .head .menu a{ display: flex; justify-content: center; align-items: center; width: 50%; height: 80px; border-radius: 15px; border: 1px solid rgba(0 0 0/10%); font-size: 20px; font-weight: 500; color: rgba(0 0 0/70%); cursor: pointer; transition: all .3s;}
.home_registration .head .menu a:hover{ background: #f2f6fc;}
.home_registration .head .menu a.on{ border: 1px solid #00a7d0; background: #00a7d0; font-weight: 700; color: #FFF;}
.home_registration .head .fb{ display: flex; justify-content: space-between; align-items: center; margin-top: 40px;}
.home_registration .head .fb .total{ font-size: 20px; font-weight: 500; color: #333;}
.home_registration .head .fb .total b{ font-weight: 800; color: #00a7d0;}
.home_registration .head .fb .more{ display: flex; align-items: center; grid-gap: 5px; padding: 0 15px; height: 30px; border-radius: 15px; border: 1px solid #ddd; cursor: pointer; transition: all .3s;}
.home_registration .head .fb .more p{ font-size: 14px; color: #666;}
.home_registration .head .fb .more svg{ width: 14px; height: 14px;}
.home_registration .head .fb .more svg path{ color: #999;}
.home_registration .head .fb .more:hover{ background: #f5f5f5;}

.home_registration .modle_registration_list{ margin-top: 15px;}

.modle_registration_list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 25px;}
.modle_registration_list .wrap{ display: flex; flex-direction: column; border-radius: 15px; border: 1px solid rgba(0 0 0/10%); background: #FFF; box-shadow: 0 5px 30px 0 rgba(0 0 0/5%); transition: all .3s;}
.modle_registration_list .wrap .box{ display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border-top: 1px dashed rgba(0 0 0/20%);}
.modle_registration_list .wrap .box:nth-child(1){ border-top: 0;}
.modle_registration_list .wrap .box:nth-child(2){ flex: 1;}
.modle_registration_list .wrap .box:nth-child(3){ padding-top: 0; border-top: 0;}
.modle_registration_list .wrap .box .tag{ display: flex; align-items: center; padding: 0 15px; height: 30px; border-radius: 15px; font-size: 14px; font-weight: 600; color: #FFF;}
.modle_registration_list .wrap .box .tit{ margin-top: 20px; height: 60px; line-height: 30px; font-size: 24px; font-weight: 700; color: #000; letter-spacing: -1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.modle_registration_list .wrap .box .info{ display: grid; grid-gap: 10px;}
.modle_registration_list .wrap .box .info .row{ display: flex; grid-gap: 5px;}
.modle_registration_list .wrap .box .info .row svg{ width: 20px; height: 20px;}
.modle_registration_list .wrap .box .info .row svg path{ color: #000;}
.modle_registration_list .wrap .box .info .row p{ width: 60px; line-height: 18px; font-size: 15px; font-weight: 700; color: #000;}
.modle_registration_list .wrap .box .info .row span{ flex: 1; line-height: 18px; font-size: 15px; color: #333;}
.modle_registration_list .wrap .box .txt{ height: 60px; line-height: 20px; font-size: 15px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.modle_registration_list .wrap .box .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; width: 100%; height: 50px; border-radius: 15px; border: 1px solid #000; cursor: pointer; transition: all .3s;}
.modle_registration_list .wrap .box .btn p{ font-size: 18px; font-weight: 600; color: #000; transition: all .3s;}
.modle_registration_list .wrap .box .btn svg{ width: 18px; height: 18px; transition: all .3s;}
.modle_registration_list .wrap .box .btn svg path{ color: #000; transition: all .3s;}
.modle_registration_list .wrap:hover{ border-color: #000;}
.modle_registration_list .wrap:hover .box .btn{ background: #000;}
.modle_registration_list .wrap:hover .box .btn p{ color: #FFF;}
.modle_registration_list .wrap:hover .box .btn svg path{ color: #FFF;}
.modle_registration_list .wrap .box .btn.off{ border-color: #ddd; background: #f5f5f5; cursor: initial;}
.modle_registration_list .wrap .box .btn.off p{ font-weight: 400; color: #999;}
.modle_registration_list .wrap .box .btn.off svg{ display: none;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .modle_registration_list{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 767px){
    .home_registration  .modle_min{ padding-top: 3rem;}
    .home_registration .head .ft{ display: block;}
    .home_registration .head .ft .tit{ font-size: 1.8rem;}
    .home_registration .head .ft .fr{ grid-gap: 0.5rem; margin-top: 1rem;}
    .home_registration .head .ft .fr select{ padding: 0 3rem 0 1rem; height: 3rem; border-radius: 3rem;background: url(/edu/images/modle_select_down.svg) no-repeat center right 1rem #FFF; background-size: 1rem auto; font-size: 1.1rem;}
    .home_registration .head .ft .fr .search{ flex: 1; grid-gap: 0.5rem;}
    .home_registration .head .ft .fr .search svg{ padding: 1rem; width: 3rem; height: 3rem;}
    .home_registration .head .ft .fr .search input{ flex: 1; padding: 0 1rem 0 3rem; width: 100%; height: 3rem; border-radius: 3rem; font-size: 1.1rem;}
    .home_registration .head .ft .fr .search .btn{ flex: 0 0 4rem; height: 3rem; border-radius: 3rem; font-size: 1.1rem;}
    .home_registration .head .menu{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.5rem; margin-top: 1.5rem;}
    .home_registration .head .menu a{ width: 100%; height: 3rem; border-radius: 1rem; font-size: 1.1rem;}
    .home_registration .head .fb{ margin-top: 2rem;}
    .home_registration .head .fb .total{ font-size: 1.2rem;}
    .home_registration .head .fb .more{ grid-gap: 0.5rem; padding: 0 1rem; height: 2rem; border-radius: 2rem;}
    .home_registration .head .fb .more p{ font-size: 1rem;}
    .home_registration .head .fb .more svg{ width: 1rem; height: 1rem;}

    .home_registration .modle_registration_list{ margin-top: 1rem;}

    .modle_registration_list{ grid-template-columns: repeat(1,1fr); grid-gap: 1.5rem;}
    .modle_registration_list .wrap{ border-radius: 1rem;}
    .modle_registration_list .wrap .box{ padding: 1.8rem;}
    .modle_registration_list .wrap .box .tag{ padding: 0 1rem; height: 2rem; border-radius: 2rem; font-size: 1rem;}
    .modle_registration_list .wrap .box .tit{ margin-top: 1.5rem; height: auto; line-height: 1.2; font-size: 1.6rem;}
    .modle_registration_list .wrap .box .info{ grid-gap: 0.5rem;}
    .modle_registration_list .wrap .box .info .row{ grid-gap: 0.5rem;}
    .modle_registration_list .wrap .box .info .row svg{ width: 1.2rem; height: 1.2rem;}
    .modle_registration_list .wrap .box .info .row p{ width: 4rem; line-height: 1.2rem; font-size: 1.1rem;}
    .modle_registration_list .wrap .box .info .row span{ line-height: 1.2rem; font-size: 1.1rem;}
    .modle_registration_list .wrap .box .txt{ height: auto; line-height: 1.4rem; font-size: 1.1rem;}
    .modle_registration_list .wrap .box .btn{ grid-gap: 1rem; height: 3.4rem; border-radius: 1rem;}
    .modle_registration_list .wrap .box .btn p{ font-size: 1.4rem;}
    .modle_registration_list .wrap .box .btn svg{ width: 1.4rem; height: 1.4rem;} 
}




.home_bottom{}
.home_bottom .modle_min{ padding-top: 60px;}
.home_bottom .modle_min .head{ display: flex; justify-content: space-between; align-items: center; width: calc(50% - 15px);}
.home_bottom .modle_min .head .menu{ display: flex; align-items: center; grid-gap: 30px;}
.home_bottom .modle_min .head .menu p{ font-size: 30px; font-weight: 700; color: #999; cursor: pointer; transition: all .3s;}
.home_bottom .modle_min .head .menu p:hover{ color: #000;}
.home_bottom .modle_min .head .menu p.on{ color: #000;}
.home_bottom .modle_min .head .menu span{ font-size: 30px; font-weight: 100; color: #ddd;}
.home_bottom .modle_min .head .more{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.home_bottom .modle_min .head .more svg{ width: 24px; height: 24px;}
.home_bottom .modle_min .head .more svg path{ color: #999; transition: all .3s;}
.home_bottom .modle_min .head .more p{ font-size: 16px; color: #999; transition: all .3s;}
.home_bottom .modle_min .head .more:hover svg path{ color: #000;}
.home_bottom .modle_min .head .more:hover p{ color: #000;}
.home_bottom .modle_min .body{ display: flex; grid-gap: 30px; margin-top: 20px;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .home_bottom .modle_min .head{ width: 100%;}
    .home_bottom .modle_min .body{ display: grid; grid-gap: 20px;}
    
}
@media(max-width: 767px){
    .home_bottom .modle_min{ padding-top: 3rem;}
    .home_bottom .modle_min .head .menu{ grid-gap: 1rem;}
    .home_bottom .modle_min .head .menu p{ font-size: 1.8rem;}
    .home_bottom .modle_min .head .menu span{ font-size: 1.8rem;}
    .home_bottom .modle_min .head .more{ grid-gap: 0.5rem;}
    .home_bottom .modle_min .head .more svg{ width: 1.4rem; height: 1.4rem;}
    .home_bottom .modle_min .head .more p{ font-size: 1.1rem;}
    .home_bottom .modle_min .body{ grid-gap: 1rem; margin-top: 1rem;}
}




.home_notice{ display: none; align-items: center; padding: 30px 40px; width: 50%; border-radius: 15px; border: 1px solid #ddd;}
.home_notice ul{ display: grid; grid-gap: 5px; width: 100%;}
.home_notice ul li{}
.home_notice ul li a{ display: flex; justify-content: space-between; align-items: center; height: 30px;}
.home_notice ul li a .fl{ flex: 1; display: flex; align-items: center; grid-gap: 10px;}
.home_notice ul li a .fl span{ display: flex; justify-content: center; align-items: center; padding: 0 10px; height: 25px; border-radius: 20px; font-size: 13px; font-weight: 500; white-space: nowrap;}
.home_notice ul li a .fl p{ font-size: 16px; font-weight: 500; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.home_notice ul li a:hover .fl p{ text-decoration: underline;}
.home_notice ul li a .fr{ width: 120px; text-align: right; font-size: 16px; color: #999;}
.home_notice.on{ display: flex;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .home_notice{ width: 100%;}
}
@media(max-width: 767px){
    .home_notice{ padding: 2rem; border-radius: 1rem;}
    .home_notice ul{ grid-gap: 0.4rem;}
    .home_notice ul li a{ height: 1.6rem;}
    .home_notice ul li a .fl{ grid-gap: 0.5rem;}
    .home_notice ul li a .fl span{ padding: 0 0.8rem; height: 1.6rem; border-radius: 2rem; font-size: 1rem;}
    .home_notice ul li a .fl p{ font-size: 1.1rem;}
    .home_notice ul li a .fr{ width: 7rem; font-size: 1rem;}
}




.home_contact{ margin-top: 40px;}
.home_contact .modle_min{ display: flex; justify-content: space-between; align-items: flex-end; gap: 200px; padding: 40px; border-radius: 15px; background: #f5f5f5;}
.home_contact .tel{}
.home_contact .tel .tit{ font-size: 24px; font-weight: 600; color: #000;}
.home_contact .tel .number{ margin-top: 10px; font-size: 36px; font-weight: 700; color: #000;}
.home_contact .tel .mail{ margin-top: 5px; font-size: 16px; color: #666; letter-spacing: 0;}
.home_contact .btn{ flex: 1; display: flex; grid-gap: 10px;}
.home_contact .btn a{ display: flex; justify-content: space-between; align-items: center; padding: 0 20px; width: 50%; height: 50px; border-radius: 30px; border: 1px solid #ddd; background: #FFF; cursor: pointer; transition: all .3s;}
.home_contact .btn a p{ font-size: 16px; font-weight: 500; color: #000; transition: all .3s;}
.home_contact .btn a svg{ width: 20px; height: 20px;}
.home_contact .btn a svg path{ color: #999; transition: all .3s;}
.home_contact .btn a:hover{ border-color: #000; background: #000;}
.home_contact .btn a:hover p{ color: #FFF;}
.home_contact .btn a:hover svg path{ color: #FFF;}
@media(max-width: 1400px){
    .home_contact .btn a p{ font-size: 15px;}
}
@media(max-width: 1000px){
    .home_contact .modle_min{ flex-direction: column; align-items: initial; gap: 0;}
    .home_contact .btn{ margin-top: 30px;}
}
@media(max-width: 767px){
    .home_contact{ margin-top: 2rem;}
    .home_contact .modle_min{ padding: 2rem; border-radius: 1rem;}
    .home_contact .tel .tit{ font-size: 1.8rem;}
    .home_contact .tel .number{ margin-top: 0.5rem; font-size: 2.4rem;}
    .home_contact .tel .mail{ margin-top: 0.5rem; font-size: 1.1rem;}
    .home_contact .btn{ display: grid; grid-gap: 0.5rem; margin-top: 1.5rem;}
    .home_contact .btn a{ padding: 0 1.5rem; width: 100%; height: 3rem; border-radius: 3rem;}
    .home_contact .btn a p{ font-size: 1.1rem;}
    .home_contact .btn a svg{ width: 1.2rem; height: 1.2rem;}
}






/* ---------------- 서브 ----------------*/


.sub{}
.sub .modle_min{ padding: 50px 0 0 0;}
.sub_title{ margin-bottom: 60px; text-align: center; line-height: 1.2; font-size: 36px; font-weight: 700; color: #000;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    .sub .modle_min{ padding: 1.2rem 0 0 0;}
    .sub_title{ margin-bottom: 2.5rem; font-size: 1.8rem;}
}






/* ---------------- 통합검색 ----------------*/


.sub_search{ padding: 10px 0 50px 0;}
.sub_search .form{ display: flex; align-items: center; grid-gap: 10px; margin: 0 auto; padding: 0 15px 0 30px; max-width: 800px; height: 70px; border-radius: 50px; border: 2px solid #000; background: #FFF;}
.sub_search .form input{ flex: 1; display: flex; align-items: center; margin: 0; padding: 0; width: 100%; height: 100%; border: 0; background: none; font-size: 20px; font-weight: 500; color: #000; outline: none; -webkit-appearance: none;}
.sub_search .form input::placeholder{ font-weight: 400; color: #bbb;}
.sub_search .form .btn{ flex: 0 0 50px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background: #000; cursor: pointer; transition: all .2s;}
.sub_search .form .btn svg{ width: 24px; height: 24px;}
.sub_search .form .btn svg circle{ color: #FFF;}
.sub_search .form .btn svg path{ color: #FFF;}
.sub_search .form .btn:hover{ background: #00a7d0;}
.sub_search .keyword{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 8px; margin-top: 20px;}
.sub_search .keyword p{ margin-right: 5px; font-size: 15px; font-weight: 600; color: #000;}
.sub_search .keyword a{ display: flex; align-items: center; padding: 0 15px; height: 34px; border-radius: 30px; border: 1px solid #e5e5e5; background: #FFF; font-size: 14px; color: #666; cursor: pointer; transition: all .2s;}
.sub_search .keyword a:hover{ border-color: #00a7d0; background: #00a7d0; color: #FFF;}
.sub_search .result{ margin-top: 40px; padding-top: 30px; border-top: 1px solid #e5e5e5; text-align: center;}
.sub_search .result p{ font-size: 18px; color: #666;}
.sub_search .result p b{ font-weight: 700; color: #00a7d0;}
.sub_search_list{ display: grid; grid-gap: 60px;}
.sub_search_list .section .s_head{ display: flex; justify-content: space-between; align-items: center; grid-gap: 15px; padding-bottom: 20px;}
.sub_search_list .section .s_head .tit{ font-size: 24px; font-weight: 700; color: #000;}
.sub_search_list .section .s_head .tit span{ margin-left: 5px; font-size: 20px; font-weight: 600; color: #00a7d0;}
.sub_search_list .section .s_head .more{ display: flex; align-items: center; grid-gap: 3px; cursor: pointer;}
.sub_search_list .section .s_head .more p{ font-size: 15px; color: #666;}
.sub_search_list .section .s_head .more svg{ width: 18px; height: 18px; color: #999;}
.sub_search_list .section .s_head .more:hover p{ font-weight: 500; color: #00a7d0;}
.sub_search_list .section .s_head .more:hover svg{ color: #00a7d0;}
.sub_search_list .section b{ font-weight: 700; color: #00a7d0;}
@media(max-width: 1000px){
    .sub_search_list .section .modle_registration_list{ grid-template-columns: repeat(1,1fr);}
}
@media(max-width: 767px){
    .sub_search{ padding: 0 0 2.5rem 0;}
    .sub_search .form{ grid-gap: 0.5rem; padding: 0 0.5rem 0 1.2rem; height: 3.6rem; border-radius: 2rem; border-width: 1px;}
    .sub_search .form input{ font-size: 1.2rem;}
    .sub_search .form .btn{ flex: 0 0 2.8rem; width: 2.8rem; height: 2.8rem;}
    .sub_search .form .btn svg{ width: 1.4rem; height: 1.4rem;}
    .sub_search .keyword{ grid-gap: 0.4rem; margin-top: 1.2rem;}
    .sub_search .keyword p{ margin-right: 0; width: 100%; text-align: center; font-size: 1.1rem;}
    .sub_search .keyword a{ padding: 0 0.8rem; height: 2.2rem; font-size: 1rem;}
    .sub_search .result{ margin-top: 2rem; padding-top: 1.5rem;}
    .sub_search .result p{ font-size: 1.2rem;}
    .sub_search_list{ grid-gap: 3rem;}
    .sub_search_list .section .s_head{ padding-bottom: 1rem;}
    .sub_search_list .section .s_head .tit{ font-size: 1.4rem;}
    .sub_search_list .section .s_head .tit span{ font-size: 1.2rem;}
    .sub_search_list .section .s_head .more p{ font-size: 1.1rem;}
    .sub_search_list .section .s_head .more svg{ width: 1.2rem; height: 1.2rem;}
    .sub_search_list .section .modle_registration_list{ grid-gap: 1rem;}
}






/* ---------------- 교육안내 ----------------*/


.sub_schedule{}
.sub_schedule > .head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.sub_schedule > .head .tit{ line-height: 1.2; font-size: 30px; font-weight: 700; color: #000;}
.sub_schedule > .head .menu{ display: flex; grid-gap: 10px;}
.sub_schedule > .head .menu a{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; padding: 0 25px; height: 50px; border-radius: 10px; border: 1px solid #ddd; background: #FFF; cursor: pointer; transition: all .2s;}
.sub_schedule > .head .menu a svg{ width: 24px; height: 24px;}
.sub_schedule > .head .menu a p{ font-size: 17px; font-weight: 500; color: #666; white-space: nowrap;}
.sub_schedule > .head .menu a:hover{ border-color: #999;}
.sub_schedule > .head .menu a.on{ border-color: #00a4cf; background: #00a4cf;}
.sub_schedule > .head .menu a.on svg g{ color: #FFF;}
.sub_schedule > .head .menu a.on svg rect{ color: #FFF;}
.sub_schedule > .head .menu a.on svg path{ fill: #FFF; color: #FFF;}
.sub_schedule > .head .menu a.on p{ font-weight: 600; color: #FFF;}

.sub_schedule > .type1,
.sub_schedule > .type2{ display: none;}
.sub_schedule > .type1.on,
.sub_schedule > .type2.on{ display: block;}

.sub_schedule .calendar{}
.sub_schedule .calendar .top{ display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid #ddd; border-bottom: 2px solid #00a4cf;}
.sub_schedule .calendar .top .btn{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(0 0 0/20%); cursor: pointer; transition: all .2s;}
.sub_schedule .calendar .top .btn svg{ width: 24px; height: 24px;}
.sub_schedule .calendar .top .btn:hover{ border-color: rgba(0 0 0/100%);}
.sub_schedule .calendar .top .date{ line-height: 1.2; font-size: 18px; font-weight: 500; color: #333;}
.sub_schedule .calendar .top .date b{ font-size: 30px; font-weight: 700; color: #000;}
.sub_schedule .calendar .week{ display: grid; grid-template-columns: repeat(7,1fr); padding: 20px 0; border-bottom: 2px solid #000;}
.sub_schedule .calendar .week .wrap{ display: flex; flex-direction: column; align-items: center; grid-gap: 5px;}
.sub_schedule .calendar .week .wrap span{ font-size: 14px; color: #999;}
.sub_schedule .calendar .week .wrap p{ font-size: 24px; font-weight: 700; color: #000;}
.sub_schedule .calendar .week .wrap.sun span,
.sub_schedule .calendar .week .wrap.sun p{ color: #F00;}
.sub_schedule .calendar .week .wrap.sat span,
.sub_schedule .calendar .week .wrap.sat p{ color: #003cff;}
.sub_schedule .calendar .days{ display: grid; grid-template-columns: repeat(7,1fr); grid-gap: 8px; margin-top: 8px;}
.sub_schedule .calendar .days .wrap{ position: relative; padding: 10px 0 15px 0; min-height: 150px; border-radius: 10px; border: 1px solid #ddd; background: #FFF; cursor: pointer; transition: all .3s;}
.sub_schedule .calendar .days .wrap:hover{ border-color: #000;}
.sub_schedule .calendar .days .wrap.off:hover{ border-color: #eee; box-shadow: none; cursor: initial;}
.sub_schedule .calendar .days .wrap .num{ padding: 0 10px; font-size: 16px; font-weight: 500; color: #333;}
.sub_schedule .calendar .days .wrap.sun .num{ color: #F00;}
.sub_schedule .calendar .days .wrap.sat .num{ color: #003cff;}
.sub_schedule .calendar .days .wrap.off{ border-color: #eee; background: #f6f8fb;}
.sub_schedule .calendar .days .wrap.off .num{ color: #bbb;}
.sub_schedule .calendar .days .wrap.today{ border-color: #ffd655; box-shadow: 0 0 0 1px #ffd655;}
.sub_schedule .calendar .days .wrap .event_list{ display: grid; grid-gap: 5px; margin-top: 10px; padding: 0 5px;}
.sub_schedule .calendar .days .wrap .event{ display: block; position: relative; z-index: 5; padding: 5px 10px; width: 100%; border-radius: 5px; background: #999; cursor: pointer; transition: all .2s;}
.sub_schedule .calendar .days .wrap .event p{ line-height: 1.3; font-size: 14px; font-weight: 500; color: #FFF; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.sub_schedule .calendar .days .wrap .event:hover{ filter: brightness(0.92);}
.sub_schedule .calendar .days .wrap .event.day2{ width: calc(200% + 18px);}
.sub_schedule .calendar .days .wrap .event.day3{ width: calc(300% + 36px);}
.sub_schedule .calendar .days .wrap .event.day4{ width: calc(400% + 54px);}
.sub_schedule .calendar .days .wrap .event.day5{ width: calc(500% + 72px);}
.sub_schedule .calendar .days .wrap .event.type1{ background: #23b2ab;}
.sub_schedule .calendar .days .wrap .event.type2{ background: #ec8b62;}
.sub_schedule .calendar .days .wrap .event.type3{ background: #00a7d0;}

.sub_schedule .month{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 10px; padding: 20px 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;}
.sub_schedule .month .wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 10px; padding: 30px 0; border-radius: 10px; background: #f6f8fb; cursor: pointer; transition: all .2s;}
.sub_schedule .month .wrap span{ font-size: 14px; color: rgba(0 0 0/50%); transition: all .2s;}
.sub_schedule .month .wrap p{ font-size: 16px; font-weight: 500; color: #333;}
.sub_schedule .month .wrap p b{ font-size: 24px; font-weight: 700; color: #000;}
.sub_schedule .month .wrap:hover{ border-color: #999;}
.sub_schedule .month .wrap.on{ border-color: #00a4cf; background: #00a4cf;}
.sub_schedule .month .wrap.on span{ font-weight: 600; color: #FFF;}
.sub_schedule .month .wrap.on p{ color: #FFF;}
.sub_schedule .month .wrap.on p b{ color: #FFF;}

.sub_schedule .list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px;}
.sub_schedule .list .wrap{ display: flex; flex-direction: column; padding: 30px 40px; border-radius: 15px; border: 1px solid #ddd; background: #FFF; box-shadow: 0 5px 20px 0 rgba(0 0 0/5%); cursor: pointer; transition: all .2s;}
.sub_schedule .list .wrap .ft{ display: flex; justify-content: space-between; align-items: center; grid-gap: 10px;}
.sub_schedule .list .wrap .ft .tag{ display: flex; align-items: center; padding: 0 12px; height: 28px; border-radius: 30px; background: #999; font-size: 14px; font-weight: 500; color: #FFF; white-space: nowrap;}
.sub_schedule .list .wrap .ft .tag.type1{ background: #23b2ab;}
.sub_schedule .list .wrap .ft .tag.type2{ background: #ec8b62;}
.sub_schedule .list .wrap .ft .tag.type3{ background: #00a7d0;}
.sub_schedule .list .wrap .ft .tag.type4{ background: #3fc4a8;}
.sub_schedule .list .wrap .ft .num{ font-size: 14px; color: #999;}
.sub_schedule .list .wrap .tit{ margin-top: 15px; min-height: 60px; line-height: 30px; font-size: 24px; font-weight: 600; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.sub_schedule .list .wrap .info{ display: grid; grid-gap: 10px; margin-top: 20px;}
.sub_schedule .list .wrap .info .box{ display: flex; align-items: center;}
.sub_schedule .list .wrap .info .box svg{ width: 20px; height: 20px; color: #666;}
.sub_schedule .list .wrap .info .box span{ margin-left: 5px; width: 60px; font-size: 15px; font-weight: 600; color: #333;}
.sub_schedule .list .wrap .info .box p{ font-size: 15px; color: #666;}
.sub_schedule .list .wrap .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; margin-top: 30px; height: 50px; border-radius: 15px; border: 1px solid #ddd; background: #FFF; transition: all .2s;}
.sub_schedule .list .wrap .btn p{ font-size: 18px; font-weight: 600; color: #000; transition: all .2s;}
.sub_schedule .list .wrap .btn svg{ width: 20px; height: 20px;}
.sub_schedule .list .wrap .btn svg path{ color: #000; transition: all .3s;}
.sub_schedule .list .wrap:hover{ border-color: #000;}
.sub_schedule .list .wrap:hover .btn{ border-color: #000; background: #000;}
.sub_schedule .list .wrap:hover .btn p{ color: #FFF;}
.sub_schedule .list .wrap:hover .btn svg path{ color: #FFF;}

.sub_schedule .option{ display: flex; justify-content: space-between; align-items: center; grid-gap: 20px; margin: 60px 0 20px 0;}
.sub_schedule .option .tit{ font-size: 20px; font-weight: 500; color: #000;}
.sub_schedule .option .tit b{ font-weight: 700; color: #00a7d0;}
.sub_schedule .option .search{ display: flex; grid-gap: 10px; position: relative;}
.sub_schedule .option .search svg{ position: absolute; z-index: 10; top: 13px; left: 13px; width: 24px; height: 24px;}
.sub_schedule .option .search svg path{ color: #666;}
.sub_schedule .option .search input{ display: flex; align-items: center; margin: 0; padding: 0 20px 0 50px; max-width: 300px; width: 100%; height: 50px; border-radius: 30px; border: 1px solid #e5e5e5; background: #FFF; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.sub_schedule .option .search input:focus{ border: 1px solid #00a7d0;}
.sub_schedule .option .search .btn{ display: flex; justify-content: center; align-items: center; padding: 0 30px; height: 50px; border-radius: 30px; background: #00a7d0; font-size: 16px; font-weight: 700; color: #FFF; white-space: nowrap; cursor: pointer;}

.sub_schedule .modle_notice .body li .wrap .number{ width: 10%;}
.sub_schedule .modle_notice .body li .wrap .tag{ width: 10%;}
.sub_schedule .modle_notice .body li .wrap .tag.type2{ width: 15%;}
.sub_schedule .modle_notice .body li .wrap .tit a{ max-width: 100%;}
.sub_schedule .modle_notice .body li .wrap .date{ width: 20%;}
.sub_schedule .modle_notice .body li .wrap .answer p{ grid-gap: 6px; padding: 0 15px; height: 38px; font-size: 14px; font-weight: 500; color: #000; cursor: pointer; transition: all .3s;}
.sub_schedule .modle_notice .body li .wrap .answer p svg{ width: 16px; height: 16px; color: #000; transition: all .3s;}
.sub_schedule .modle_notice .body li .wrap .answer p svg path{ transition: all .3s;}
.sub_schedule .modle_notice .body li .wrap .answer:hover p{ border-color: #000; background: #000; color: #FFF;}
.sub_schedule .modle_notice .body li .wrap .answer:hover p svg path{ color: #FFF;}
@media(max-width: 1400px){
    .sub_schedule .calendar .days .wrap{ min-height: 90px;}
}
@media(max-width: 1000px){
    .sub_schedule .month{ grid-template-columns: repeat(6,1fr);}
    .sub_schedule .list{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 767px){
    .sub_schedule .head{ margin-bottom: 1rem;}
    .sub_schedule .head .tit{ font-size: 1.4rem;}
    .sub_schedule .head .menu{ grid-gap: 0.5rem;}
    .sub_schedule .head .menu a{ grid-gap: 0.5rem; padding: 0 1.5rem; height: 3rem; border-radius: 0.5rem;}
    .sub_schedule .head .menu a svg{ width: 1.4rem; height: 1.4rem;}
    .sub_schedule .head .menu a p{ font-size: 1.1rem;}

    .sub_schedule .calendar .top{ padding: 1rem 0;}
    .sub_schedule .calendar .top .btn{ width: 3rem; height: 3rem;}
    .sub_schedule .calendar .top .btn svg{ width: 1.4rem; height: 1.4rem;}
    .sub_schedule .calendar .top .date{ font-size: 1.1rem;}
    .sub_schedule .calendar .top .date b{ font-size: 1.4rem;}
    .sub_schedule .calendar .week{ padding: 1rem 0;}
    .sub_schedule .calendar .week .wrap span{ font-size: 0.8rem; letter-spacing: 0;}
    .sub_schedule .calendar .week .wrap p{ font-size: 1.2rem;}
    .sub_schedule .calendar .days{ grid-gap: 0.4rem; margin-top: 0.4rem;}
    .sub_schedule .calendar .days .wrap{ padding: 0.6rem 0 0.8rem 0; min-height: 4rem;}
    .sub_schedule .calendar .days .wrap .num{ padding: 0 0.6rem; font-size: 1rem;}
    .sub_schedule .calendar .days .wrap .event_list{ grid-gap: 0.3rem; margin-top: 0.5rem; padding: 0 0.25rem;}
    .sub_schedule .calendar .days .wrap .event{ padding: 0.3rem 0.5rem;}
    .sub_schedule .calendar .days .wrap .event p{ font-size: 0.9rem;}
    .sub_schedule .calendar .days .wrap .event.day2{ width: calc(200% + 1rem + 2px);}
    .sub_schedule .calendar .days .wrap .event.day3{ width: calc(300% + 2rem + 4px);}
    .sub_schedule .calendar .days .wrap .event.day4{ width: calc(400% + 3rem + 6px);}
    .sub_schedule .calendar .days .wrap .event.day5{ width: calc(500% + 4rem + 8px);}

    .sub_schedule .month{ grid-gap: 0.4rem; padding: 1rem 0;}
    .sub_schedule .month .wrap{ grid-gap: 0.3rem; padding: 1.2rem 0; border-radius: 0.5rem;}
    .sub_schedule .month .wrap span{ font-size: 0.8rem; letter-spacing: 0;}
    .sub_schedule .month .wrap p{ font-size: 1rem;}
    .sub_schedule .month .wrap p b{ font-size: 1.2rem;}

    .sub_schedule .list{ grid-template-columns: repeat(1,1fr); grid-gap: 1rem;}
    .sub_schedule .list .wrap{ padding: 2rem; border-radius: 1rem;}
    .sub_schedule .list .wrap .ft .tag{ padding: 0 0.8rem; height: 2rem; border-radius: 2rem; font-size: 1rem;}
    .sub_schedule .list .wrap .ft .num{ font-size: 1rem;}
    .sub_schedule .list .wrap .tit{ margin-top: 1.5rem; min-height: auto; line-height: 1.2; font-size: 1.4rem;}
    .sub_schedule .list .wrap .info{ grid-gap: 0.6rem; margin-top: 1.5rem;}
    .sub_schedule .list .wrap .info .box{}
    .sub_schedule .list .wrap .info .box svg{ width: 1.4rem; height: 1.4rem;}
    .sub_schedule .list .wrap .info .box span{ width: 4.4rem; font-size: 1.1rem;}
    .sub_schedule .list .wrap .info .box p{ font-size: 1.1rem;}
    .sub_schedule .list .wrap .btn{ grid-gap: 1rem; margin-top: 1.5rem; height: 3.2rem; border-radius: 1rem;}
    .sub_schedule .list .wrap .btn p{ font-size: 1.2rem;}
    .sub_schedule .list .wrap .btn svg{ width: 1.2rem; height: 1.2rem;}

    .sub_schedule .option{ grid-gap: 0; margin: 3rem 0 1rem 0;}
    .sub_schedule .option .tit{ font-size: 1.2rem;}
    .sub_schedule .option .search{ grid-gap: 0.5rem;}
    .sub_schedule .option .search svg{ top: 0.9rem; left: 0.9rem; width: 1.2rem; height: 1.2rem;}
    .sub_schedule .option .search input{ flex: 1; grid-gap: 0.5rem; padding: 0 1rem 0 3rem; width: 14rem; height: 3rem; border-radius: 3rem; font-size: 1.1rem;}
    .sub_schedule .option .search .btn{ padding: 0 1.2rem; height: 3rem; border-radius: 3rem; font-size: 1.1rem;}

    .sub_schedule .modle_notice .body li .wrap .number{ flex: initial; width: auto;}
    .sub_schedule .modle_notice .body li .wrap .tag{ flex: initial; width: auto;}
    .sub_schedule .modle_notice .body li .wrap .tag.type2{ width: auto;}
    .sub_schedule .modle_notice .body li .wrap .date{ width: auto;}
    .sub_schedule .modle_notice .body li .wrap .answer{ width: auto;}
    .sub_schedule .modle_notice .body li .wrap .answer p{ grid-gap: 0.3rem; padding: 0 0.8rem; height: 2.2rem; font-size: 1rem;}
    .sub_schedule .modle_notice .body li .wrap .answer p svg{ width: 1.1rem; height: 1.1rem;}
    .sub_schedule .modle_page .btn p{ font-size: 1rem;}
}









/* ---------------- 교육신청 ----------------*/


.sub_registration_course_view{ display: flex; flex-wrap: wrap; align-items: flex-start; grid-gap: 60px;}
.sub_registration_course_view > .head{ padding-bottom: 30px; width: 100%; border-bottom: 3px solid #000;}
.sub_registration_course_view > .head .tag{ display: flex; grid-gap: 10px;}
.sub_registration_course_view > .head .tag p{ display: flex; align-items: center; padding: 0 20px; height: 40px; border-radius: 20px; font-size: 16px; font-weight: 600; color: #FFF;}
.sub_registration_course_view > .head .tit{ margin-top: 20px; line-height: 1.2; font-size: 30px; font-weight: 700; color: #000;}
.sub_registration_course_view > .head .txt{ display: flex; gap: 30px; margin-top: 20px;}
.sub_registration_course_view > .head .txt p{ font-size: 18px; color: #333;}
.sub_registration_course_view > .head .txt p span{ font-weight: 700; color: #000;}
.sub_registration_course_view > .head .txt p:nth-child(1) b{ font-weight: 700; color: #F00;}
.sub_registration_course_view > .head .txt p:nth-child(2) b{ font-weight: 700; color: #00a4cf;}
.sub_registration_course_view > .fl{ flex: 1;}
.sub_registration_course_view > .fr{ flex: 0 0 400px; display: grid; grid-gap: 40px;}

.sub_registration_course_view .section{ margin-top: 40px;}
.sub_registration_course_view .section:nth-child(1){ margin-top: 0;}
.sub_registration_course_view .section .s_tit{ margin-bottom: 15px; font-size: 20px; font-weight: 700; color: #000;}

.sub_registration_course_view .table_row{ border-top: 1px solid #000;}
.sub_registration_course_view .table_row .row{ display: flex; border-bottom: 1px solid #e5e5e5;}
.sub_registration_course_view .table_row .row .th{ flex: 0 0 140px; display: flex; align-items: center; padding: 15px 20px; background: #f6f8fb; line-height: 1.4; font-size: 16px; font-weight: 600; color: #000;}
.sub_registration_course_view .table_row .row .td{ flex: 1; display: flex; align-items: center; padding: 15px 20px; line-height: 1.4; font-size: 16px; color: #333;}
.sub_registration_course_view .table_row .row .td span{ font-weight: 600; color: #F00;}

.sub_registration_course_view .table_col{ display: flex; border-top: 1px solid #000;}
.sub_registration_course_view .table_col .row{ padding: 30px 40px; width: 100%; border: 1px solid #ddd; border-top: 0;}
.sub_registration_course_view .table_col .row:nth-child(2){ border-left: 0;}
.sub_registration_course_view .table_col .row .t1{ font-size: 16px; font-weight: 600; color: #000;}
.sub_registration_course_view .table_col .row .t2{ margin-top: 10px; font-size: 20px; font-weight: 600; color: #333;}
.sub_registration_course_view .table_col .row .t3{ display: grid; grid-gap: 15px; margin-top: 15px; padding-top: 20px; border-top: 1px solid #ddd;}
.sub_registration_course_view .table_col .row .t3 p{ line-height: 1.2; font-size: 16px; color: #333;}
.sub_registration_course_view .table_col .row .t3 p font{ color: #F00;}
.sub_registration_course_view .table_col .row .t3 a{ display: block; line-height: 1.2; font-size: 16px; color: #333; cursor: pointer;}
.sub_registration_course_view .table_col .row .t3 a:hover{ color: #0059ff;}

.sub_registration_course_view .tab{ display: grid; grid-template-columns: repeat(3,1fr); margin-top: 40px;}
.sub_registration_course_view .tab a{ display: flex; justify-content: center; align-items: center; height: 70px; border: 1px solid #ddd; background: #FFF; font-size: 20px; font-weight: 600; color: #666; cursor: pointer; transition: all .2s;}
.sub_registration_course_view .tab a + a{ border-left: 0;}
.sub_registration_course_view .tab a:hover{ background: #f6f8fb;}
.sub_registration_course_view .tab a.on{ border-color: #000; background: #000; font-weight: 600; color: #FFF;}

.sub_registration_course_view .tab_body{ display: none;}
.sub_registration_course_view .tab_body.on{ display: block;}
.sub_registration_course_view .tab_body .row{ display: flex; align-items: flex-start; grid-gap: 20px; padding: 30px 0; border-bottom: 1px solid #e5e5e5;}
.sub_registration_course_view .tab_body .row .t{ flex: 0 0 110px; padding-top: 2px; font-size: 18px; font-weight: 700; color: #000;}
.sub_registration_course_view .tab_body .row .c{ flex: 1; display: grid; grid-gap: 15px; min-width: 0;}
.sub_registration_course_view .tab_body .row .c p{ line-height: 1.4; font-size: 16px; color: #333;}
.sub_registration_course_view .tab_body .row .c .sub{ color: #666;}
.sub_registration_course_view .tab_body .row .c .dot{ display: grid; grid-gap: 10px;}
.sub_registration_course_view .tab_body .row .c .dot p{ line-height: 1.4; font-size: 16px; color: #666;}

.sub_registration_course_view .tab_body .curriculum{ display: grid; grid-gap: 10px; margin-top: 20px;}
.sub_registration_course_view .tab_body .curriculum .wrap{ display: flex; align-items: center; grid-gap: 20px; padding: 20px 25px; border: 1px solid #ddd; background: #FFF; transition: all .2s;}
.sub_registration_course_view .tab_body .curriculum .wrap .no{ flex: 0 0 60px; display: flex; justify-content: center; align-items: center; height: 30px; border-radius: 20px; background: #000; font-size: 15px; font-weight: 600; color: #FFF;}
.sub_registration_course_view .tab_body .curriculum .wrap .tit{ flex: 1; line-height: 1.4; font-size: 16px; font-weight: 500; color: #000;}
.sub_registration_course_view .tab_body .curriculum .wrap .date{ font-size: 15px; color: #666; white-space: nowrap;}
.sub_registration_course_view .tab_body .curriculum .wrap:hover{ border-color: #00a7d0;}

.sub_registration_course_view .tab_body .download{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px; margin-top: 20px;}
.sub_registration_course_view .tab_body .download .wrap{ display: flex; align-items: center; grid-gap: 15px; padding: 20px 25px; border: 1px solid #ddd; background: #FFF; cursor: pointer; transition: all .2s;}
.sub_registration_course_view .tab_body .download .wrap .icon{ flex: 0 0 50px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 5px; background: #999; font-size: 13px; font-weight: 700; color: #FFF;}
.sub_registration_course_view .tab_body .download .wrap .icon.hwp{ background: #2f6fe0;}
.sub_registration_course_view .tab_body .download .wrap .icon.pdf{ background: #e03131;}
.sub_registration_course_view .tab_body .download .wrap .icon.xlsx{ background: #1a9c4a;}
.sub_registration_course_view .tab_body .download .wrap .ft{ flex: 1; min-width: 0;}
.sub_registration_course_view .tab_body .download .wrap .ft .tit{ line-height: 1.4; font-size: 16px; font-weight: 500; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.sub_registration_course_view .tab_body .download .wrap .ft .txt{ margin-top: 5px; font-size: 13px; color: #999;}
.sub_registration_course_view .tab_body .download .wrap svg{ flex: 0 0 24px; width: 24px; height: 24px;}
.sub_registration_course_view .tab_body .download .wrap svg path{ color: #999; transition: all .2s;}
.sub_registration_course_view .tab_body .download .wrap:hover{ border-color: #00a7d0;}
.sub_registration_course_view .tab_body .download .wrap:hover .ft .tit{ color: #00a7d0;}
.sub_registration_course_view .tab_body .download .wrap:hover svg path{ color: #00a7d0;}
.sub_registration_course_view .tab_body .no_data{ display: flex; justify-content: center; align-items: center; height: 150px; font-size: 16px; color: #666;}

.sub_registration_course_view .fr .box{}
.sub_registration_course_view .fr .box .head{ display: flex; align-items: center; grid-gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #000;}
.sub_registration_course_view .fr .box .head svg{ display: none; width: 20px; height: 20px;}
.sub_registration_course_view .fr .box .head p{ font-size: 20px; font-weight: 700; color: #000;}
.sub_registration_course_view .fr .box .head .modify{ display: flex; align-items: center; margin-left: auto; margin-top: -5px; padding: 0 10px; height: 25px; border-radius: 20px; border: 1px solid rgba(0 0 0/10%); background: #f6f8fb; font-size: 12px; color: #333; white-space: nowrap; cursor: pointer; transition: all .2s;}
.sub_registration_course_view .fr .box .head .modify:hover{ border-color: #000; background: #000; color: #FFF;}
.sub_registration_course_view .fr .box .head .modify.on{ border-color: #00a7d0; background: #00a7d0; font-weight: 600; color: #FFF;}
.sub_registration_course_view .fr .box .head .modify.on:hover{ border-color: #0090b4; background: #0090b4;}

.sub_registration_course_view .fr .box .head_menu{ display: flex; grid-gap: 10px; margin-bottom: 20px;}
.sub_registration_course_view .fr .box .head_menu .row{ display: flex; justify-content: center; align-items: center; width: 50%; height: 50px; border: 1px solid #000; font-size: 18px; font-weight: 700; color: #000; cursor: pointer; transition: all .3s;}
.sub_registration_course_view .fr .box .head_menu .row:hover{ background: #f5f5f5;}
.sub_registration_course_view .fr .box .head_menu .row.on{ background: #000; color: #FFF;}

.sub_registration_course_view .fr .box .body{ display: grid; grid-gap: 12px;}
.sub_registration_course_view .fr .box .body.off{ display: none;}
.sub_registration_course_view .fr .box .body .row{ display: flex; align-items: flex-start; grid-gap: 10px;}
.sub_registration_course_view .fr .box .body .row > p{ flex: 0 0 100px; position: relative; padding-left: 10px; line-height: 1.4; font-size: 16px; font-weight: 600; color: #000;}
.sub_registration_course_view .fr .box .body .row > p:before{ content: ""; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #000;}
.sub_registration_course_view .fr .box .body .row > p font{ color: #F00;}
.sub_registration_course_view .fr .box .body .row > span{ flex: 1; line-height: 1.4; font-size: 16px; color: #333; word-break: break-all;}
.sub_registration_course_view .fr .box .body .row.tit_up{ align-items: flex-start !important;}
.sub_registration_course_view .fr .box .body .row.tit_up > p{ margin-top: 12px;}

.sub_registration_course_view .fr .box .body.form .row{ align-items: center;}
.sub_registration_course_view .fr .box .body.form .row select,
.sub_registration_course_view .fr .box .body.form .row input{ flex: 1; margin: 0; padding: 0 15px; width: 100%; min-width: 0; height: 45px; border-radius: 0; border: 1px solid #e5e5e5; background: #FFF; font-size: 15px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.sub_registration_course_view .fr .box .body.form .row select{ padding: 0 25px 0 15px; background: url(/edu/images/modle_select_down.svg) no-repeat center right 10px #FFF; background-size: 14px auto; color: #666; cursor: pointer;}
.sub_registration_course_view .fr .box .body.form .row select:focus,
.sub_registration_course_view .fr .box .body.form .row input:focus{ border-color: #00a7d0;}

.sub_registration_course_view .fr .box .body.form .row .tel{ display: flex; grid-gap: 5px;}

.sub_registration_course_view .fr .box .body.form .row .address{ display: grid; grid-gap: 10px;}
.sub_registration_course_view .fr .box .body.form .row .address .ft{ display: flex; grid-gap: 10px;}
.sub_registration_course_view .fr .box .body.form .row .address .ft .btn{ display: flex; justify-content: center; align-items: center; width: 80px; border-radius: 0; background: #e8ecf7; font-size: 15px; font-weight: 500; color: #000; cursor: pointer; transition: all .2s;}
.sub_registration_course_view .fr .box .body.form .row .address .ft .btn:hover{ background: #00a7d0; color: #FFF;}

.sub_registration_course_view .fr .box .body.form .row .radio{ display: flex !important; flex-wrap: wrap; grid-gap: 10px 20px !important; min-height: 40px;}
.sub_registration_course_view .fr .box .body.form .row .radio label{ display: flex; align-items: center; grid-gap: 5px; cursor: pointer;}
.sub_registration_course_view .fr .box .body.form .row .radio label .icon{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #DDD; background: #f6f8fb;}
.sub_registration_course_view .fr .box .body.form .row .radio label .icon svg{ width: 14px; height: 14px;}
.sub_registration_course_view .fr .box .body.form .row .radio label p{ font-size: 15px; color: #666;}
.sub_registration_course_view .fr .box .body.form .row .radio label p span{ font-weight: 600; color: #00a7d0; cursor: pointer;}
.sub_registration_course_view .fr .box .body.form .row .radio label.on .icon{ border-color: #00a7d0; background: #00a7d0;}
.sub_registration_course_view .fr .box .body.form .row .radio label.on .icon svg path{ color: #FFF;}
.sub_registration_course_view .fr .box .body.form .row .radio label.on p{ color: #000;}

.sub_registration_course_view .fr .box .body.upload label{ display: flex; align-items: center; grid-gap: 10px; padding: 0 15px; height: 45px; border-radius: 0; border: 1px solid #e5e5e5; background: #FFF; cursor: pointer; transition: all .2s;}
.sub_registration_course_view .fr .box .body.upload label p{ flex: 1; min-width: 0; font-size: 15px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sub_registration_course_view .fr .box .body.upload label p font{ font-weight: 500; color: #F00;}
.sub_registration_course_view .fr .box .body.upload label .icon{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; color: #999; transition: all .2s;}
.sub_registration_course_view .fr .box .body.upload label .icon svg{ width: 24px; height: 24px;}
.sub_registration_course_view .fr .box .body.upload label input{ display: none;}
.sub_registration_course_view .fr .box .body.upload label:hover{ border-color: #00a7d0;}
.sub_registration_course_view .fr .box .body.upload label.on{ border-color: #00a7d0;}
.sub_registration_course_view .fr .box .body.upload label.on p{ color: #000;}
.sub_registration_course_view .fr .box .body.upload label.on .icon{ background: #00a7d0;}
.sub_registration_course_view .fr .box .body.upload label.on .icon svg{ width: 16px; height: 16px;}
.sub_registration_course_view .fr .box .body.upload label.on .icon svg path{ color: #FFF;}

.sub_registration_course_view .fr .box .body.check label{ display: flex; align-items: flex-start; grid-gap: 10px; cursor: pointer;}
.sub_registration_course_view .fr .box .body.check label .icon{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ddd; background: #FFF; transition: all .2s;}
.sub_registration_course_view .fr .box .body.check label .icon svg{ width: 16px; height: 16px; color: #FFF; opacity: 0; transition: all .2s;}
.sub_registration_course_view .fr .box .body.check label p{ flex: 1; line-height: 1.4; font-size: 15px; color: #666;}
.sub_registration_course_view .fr .box .body.check label.on .icon{ border-color: #00a7d0; background: #00a7d0;}
.sub_registration_course_view .fr .box .body.check label.on .icon svg{ opacity: 1;}
.sub_registration_course_view .fr .box .body.check label.on .icon svg path{ color: #FFF;}
.sub_registration_course_view .fr .box .body.check label.on p{ color: #000;}

.sub_registration_course_view .fr .box .modle_btn{ margin-top: 20px;}
.sub_registration_course_view .fr .box .modle_btn a{ justify-content: center; padding: 0 40px;}
.sub_registration_course_view .fr .box .modle_btn a.on{ flex: 1;}
@media(max-width: 1400px){
    .sub_registration_course_view{ display: block;}
    .sub_registration_course_view > .fl{ margin-top: 60px;}
    .sub_registration_course_view > .fr{ margin-top: 60px;}
}
@media(max-width: 1000px){
    .sub_registration_course_view .tab_body .download{ grid-template-columns: repeat(1,1fr);}
}
@media(max-width: 767px){
    .sub_registration_course_view > .head{ padding-bottom: 1.5rem;}
    .sub_registration_course_view > .head .tag{ grid-gap: 0.5rem;}
    .sub_registration_course_view > .head .tag p{ padding: 0 1rem; height: 2rem; border-radius: 2rem; font-size: 1rem;}
    .sub_registration_course_view > .head .tit{ margin-top: 1rem; font-size: 1.6rem;}
    .sub_registration_course_view > .head .txt{ display: grid; gap: 0.8rem; margin-top: 1rem;}
    .sub_registration_course_view > .head .txt p{ font-size: 1.1rem;}

    .sub_registration_course_view > .fl{ margin-top: 3rem;}
    .sub_registration_course_view > .fr{ margin-top: 3rem;}

    .sub_registration_course_view .section{ margin-top: 3rem;}
    .sub_registration_course_view .section .s_tit{ margin-bottom: 1rem; font-size: 1.4rem;}

    .sub_registration_course_view .table_row .row .th{ flex: 0 0 8rem; padding: 1rem; font-size: 1.1rem;}
    .sub_registration_course_view .table_row .row .td{ padding: 1rem; font-size: 1.1rem;}

    .sub_registration_course_view .table_col{ display: block;}
    .sub_registration_course_view .table_col .row{ padding: 2rem; width: auto;}
    .sub_registration_course_view .table_col .row:last-child{ border-left: 1px solid #ddd;}
    .sub_registration_course_view .table_col .row .t1{ font-size: 1.1rem;}
    .sub_registration_course_view .table_col .row .t2{ margin-top: 0.5rem; font-size: 1.4rem;}
    .sub_registration_course_view .table_col .row .t3{ grid-gap: 0.6rem; margin-top: 1rem; padding-top: 1rem;}
    .sub_registration_course_view .table_col .row .t3 p{ font-size: 1.1rem;}
    .sub_registration_course_view .table_col .row .t3 a{ font-size: 1.1rem;}

    .sub_registration_course_view .tab{ margin-top: 3rem;}
    .sub_registration_course_view .tab a{ height: 4rem; font-size: 1.3rem;}

    .sub_registration_course_view .tab_body .row{ display: grid; grid-gap: 0.6rem; padding: 2rem 0;}
    .sub_registration_course_view .tab_body .row .t{ padding-top: 0; font-size: 1.4rem;}
    .sub_registration_course_view .tab_body .row .c{ grid-gap: 1rem;}
    .sub_registration_course_view .tab_body .row .c p{ font-size: 1.1rem;}
    .sub_registration_course_view .tab_body .row .c .dot p{ font-size: 1.1rem;}

    .sub_registration_course_view .tab_body .curriculum{ grid-gap: 0.5rem; margin-top: 1.2rem;}
    .sub_registration_course_view .tab_body .curriculum .wrap{ flex-wrap: wrap; grid-gap: 0.5rem 1rem; padding: 1.2rem;}
    .sub_registration_course_view .tab_body .curriculum .wrap .no{ flex: 0 0 4rem; height: 2rem; font-size: 1rem;}
    .sub_registration_course_view .tab_body .curriculum .wrap .tit{ flex: 1 0 100%; order: 3; font-size: 1.2rem;}
    .sub_registration_course_view .tab_body .curriculum .wrap .date{ font-size: 1rem;}
    .sub_registration_course_view .tab_body .download{ grid-template-columns: repeat(1,1fr); grid-gap: 0.5rem; margin-top: 1.2rem;}
    .sub_registration_course_view .tab_body .download .wrap{ grid-gap: 1rem; padding: 1.2rem;}
    .sub_registration_course_view .tab_body .download .wrap .icon{ flex: 0 0 3.4rem; width: 3.4rem; height: 3.4rem; border-radius: 0.4rem; font-size: 1rem;}
    .sub_registration_course_view .tab_body .download .wrap .ft .tit{ font-size: 1.2rem;}
    .sub_registration_course_view .tab_body .download .wrap .ft .txt{ font-size: 1rem;}
    .sub_registration_course_view .tab_body .download .wrap svg{ flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem;}
    .sub_registration_course_view .tab_body .no_data{ height: 8rem; font-size: 1.1rem;}

    .sub_registration_course_view > .fr{ grid-gap: 3rem; margin-top: 3rem; border-radius: 1rem;}
    .sub_registration_course_view .fr .box .head{ grid-gap: 0.5rem; padding-bottom: 1rem;}
    .sub_registration_course_view .fr .box .head svg{ flex: 0 0 2rem; width: 2rem; height: 2rem;}
    .sub_registration_course_view .fr .box .head p{ font-size: 1.4rem;}
    .sub_registration_course_view .fr .box .head .modify{ margin-top: 0; padding: 0 0.8rem; height: 2rem; border-radius: 2rem; font-size: 1rem;}

    .sub_registration_course_view .fr .box .head_menu{ grid-gap: 0.5rem;}
    .sub_registration_course_view .fr .box .head_menu .row{ height: 3.5rem; font-size: 1.4rem;}

    .sub_registration_course_view .fr .box .body{ grid-gap: 0.8rem;}
    .sub_registration_course_view .fr .box .body .row > p{ flex: 0 0 7rem; padding-left: 0.7rem; font-size: 1.1rem;}
    .sub_registration_course_view .fr .box .body .row > p:before{ top: 0.5rem; width: 0.25rem; height: 0.25rem;}
    .sub_registration_course_view .fr .box .body .row > span{ font-size: 1.1rem;}
    .sub_registration_course_view .fr .box .body.form .row select,
    .sub_registration_course_view .fr .box .body.form .row input{ padding: 0 1rem; height: 3rem; border-radius: 0; font-size: 1.1rem;}
    .sub_registration_course_view .fr .box .body.form .row select{ padding: 0 2.2rem 0 1rem; height: 3rem; background: url(/edu/images/modle_select_down.svg) no-repeat center right 0.8rem #FFF; background-size: 0.9rem auto;}

    .sub_registration_course_view .fr .box .body.form .row .tel{ grid-gap: 0.5rem;}

    .sub_registration_course_view .fr .box .body.form .row .address{ grid-gap: 0.5rem;}
    .sub_registration_course_view .fr .box .body.form .row .address .ft{ grid-gap: 0.5rem;}
    .sub_registration_course_view .fr .box .body.form .row .address .ft .btn{ width: 5rem; border-radius: 0; font-size: 1rem;}

    .sub_registration_course_view .fr .box .body.form .row .radio{ grid-gap: 1rem 1.4rem !important; min-height: 3rem;}
    .sub_registration_course_view .fr .box .body.form .row .radio label{ grid-gap: 0.5rem;}
    .sub_registration_course_view .fr .box .body.form .row .radio label .icon{ width: 1.6rem; height: 1.6rem;}
    .sub_registration_course_view .fr .box .body.form .row .radio label .icon svg{ width: 1rem; height: 1rem;}
    .sub_registration_course_view .fr .box .body.form .row .radio label p{ font-size: 1.1rem;}

    .sub_registration_course_view .fr .box .body.upload label{ grid-gap: 0.8rem; padding: 0 1rem; height: 3.5rem; border-radius: 0;}
    .sub_registration_course_view .fr .box .body.upload label p{ font-size: 1.1rem;}
    .sub_registration_course_view .fr .box .body.upload label .icon{ flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem;}
    .sub_registration_course_view .fr .box .body.upload label .icon svg{ width: 1.6rem; height: 1.6rem;}
    .sub_registration_course_view .fr .box .body.upload label.on .icon svg{ width: 0.9rem; height: 0.9rem;}

    .sub_registration_course_view .fr .box .body.check label{ grid-gap: 0.6rem;}
    .sub_registration_course_view .fr .box .body.check label .icon{ flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem;}
    .sub_registration_course_view .fr .box .body.check label .icon svg{ width: 0.9rem; height: 0.9rem;}
    .sub_registration_course_view .fr .box .body.check label p{ font-size: 1.1rem;}

    .sub_registration_course_view .fr .modle_btn{ margin-top: 2rem;}

}


.sub_registration_course_view_ok{ display: flex; flex-direction: column; align-items: center; padding: 60px 40px; border-radius: 20px; background: #f4f8fd;}
.sub_registration_course_view_ok .icon{ display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 70px; height: 70px; border: 2px solid #000; border-radius: 50%; background: #ffd655;}
.sub_registration_course_view_ok .icon svg{ width: 34px; height: 34px; color: #FFF;}
.sub_registration_course_view_ok .tit{ margin-top: 25px; line-height: 1.3; font-size: 26px; font-weight: 700; color: #000;}
.sub_registration_course_view_ok .txt{ margin-top: 15px; line-height: 1.4; text-align: center; font-size: 16px; color: #666;}
.sub_registration_course_view_ok .txt b{ font-weight: 600; color: #000;}
.sub_registration_course_view_ok .info{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 40px; margin: 40px 0; padding: 30px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: left;}
.sub_registration_course_view_ok .info .wrap{ display: grid; grid-gap: 10px;}
.sub_registration_course_view_ok .info .wrap .s_tit{ margin-bottom: 5px; font-size: 20px; font-weight: 600; color: #000;}
.sub_registration_course_view_ok .info .wrap .row{ display: flex; align-items: flex-start; grid-gap: 10px;}
.sub_registration_course_view_ok .info .wrap .row p{ flex: 0 0 70px; line-height: 1.5; font-size: 16px; font-weight: 600; color: #000;}
.sub_registration_course_view_ok .info .wrap .row span{ flex: 1; line-height: 1.5; font-size: 16px; color: #666;}
.sub_registration_course_view_ok .modle_btn{ margin-top: 30px;}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    .sub_registration_course_view_ok{ padding: 2rem; border-radius: 1rem;}
    .sub_registration_course_view_ok .icon{ width: 4rem; height: 4rem;}
    .sub_registration_course_view_ok .icon svg{ width: 2rem; height: 2rem;}
    .sub_registration_course_view_ok .tit{ margin-top: 1.5rem; font-size: 1.5rem;}
    .sub_registration_course_view_ok .txt{ margin-top: 1rem; font-size: 1.1rem;}
    .sub_registration_course_view_ok .info{ grid-template-columns: repeat(1,1fr); grid-gap: 2rem; margin: 2rem 0; padding: 2rem 0;}
    .sub_registration_course_view_ok .info .wrap{ grid-gap: 0.6rem;}
    .sub_registration_course_view_ok .info .wrap .s_tit{ margin-bottom: 0.2rem; font-size: 1.3rem;}
    .sub_registration_course_view_ok .info .wrap .row{ grid-gap: 0.5rem;}
    .sub_registration_course_view_ok .info .wrap .row p{ flex: 0 0 5rem; font-size: 1.1rem;}
    .sub_registration_course_view_ok .info .wrap .row span{ font-size: 1.1rem;}
    .sub_registration_course_view_ok .modle_btn{ margin-top: 2rem;}
}
































.sub_search_head{ display: flex; grid-gap: 10px; position: relative;}
.sub_search_head input{ display: flex; align-items: center; margin: 0; padding: 0 20px; width: 100%; height: 60px; border-radius: 10px; border: 1px solid #00a7d0; background: #FFF; font-size: 18px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.sub_search_head .btn{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; width: 60px; height: 60px; cursor: pointer;}
.sub_search_head .btn svg{ width: 30px; height: 30px;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    .sub_search_head{ grid-gap: 0.5rem;}
    .sub_search_head input{ padding: 0 1rem; height: 3.5rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .sub_search_head .btn{ width: 3.5rem; height: 3.5rem;}
    .sub_search_head .btn svg{ width: 2rem; height: 2rem;}
}


.sub_search_menu{ padding: 30px 0;}
.sub_search_menu ul{ display: flex; flex-wrap: wrap; padding: 1px 0 0 1px;}
.sub_search_menu ul li{ width: 20%;}
.sub_search_menu ul li a{ display: flex; justify-content: center; align-items: center; margin: -1px 0 0 -1px; height: 60px; border: 1px solid #ddd; font-size: 18px; font-weight: 500; color: #000; cursor: pointer;}
.sub_search_menu ul li a.on{ position: relative; z-index: 10; border-color: #00a7d0; background: #00a7d0; color: #FFF;}
@media(max-width: 767px){
    .sub_search_menu{ padding: 2rem 0;}
    .sub_search_menu ul li{ width: 33.333%;}
    .sub_search_menu ul li a{ height: 3.5rem; font-size: 1.2rem;}
}













/* ---------------- 멤버 ----------------*/


.member_login{ margin: 0 auto; max-width: 500px;}
.member_login .head{ display: flex; flex-direction: column; align-items: center;}
.member_login .head img{ display: block; width: auto; height: 40px;}
.member_login .head p{ margin-top: 20px; font-size: 24px; font-weight: 600; color: #000;}
.member_login .head p span{ font-weight: 700; color: #00a7d0;}

.member_login .body{ display: grid; grid-gap: 15px; margin-top: 40px;}
.member_login .body .title{ padding: 0 0 25px 0; text-align: center; font-size: 24px; font-weight: 700; color: #000;}
.member_login .body .wrap{ position: relative;}
.member_login .body .wrap .icon{ display: block; position: absolute; z-index: 10; top: 0; left: 0; padding: 16px; width: 60px; height: 60px;}
.member_login .body .wrap .btn_pw{ display: block; position: absolute; z-index: 10; top: 0; right: 0; padding: 16px; width: 60px; height: 60px; opacity: 0.2; cursor: pointer;}
.member_login .body .wrap input{ display: flex; align-items: center; margin: 0; padding: 0 20px 0 60px; width: 100%; height: 60px; border-radius: 10px; border: 1px solid #e5e5e5; background: #f6f8fb; font-size: 16px; font-weight: 400; color: #000; letter-spacing: 0; outline: none; -webkit-appearance: none; transition: all .2s;}
.member_login .body .wrap input:focus{ border-color: #00a7d0;}
.member_login .body .wrap.on .btn_pw{ opacity: 1;}
.member_login .body .wrap.on .btn_pw circle{ color: #00a7d0;}
.member_login .body .wrap.on .btn_pw path{ color: #00a7d0;}
.member_login .body .check{ display: flex; justify-content: space-between; align-items: center;}
.member_login .body .check label{ display: flex; align-items: center; grid-gap: 5px; cursor: pointer;}
.member_login .body .check label .icon{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #DDD; background: #f6f8fb;}
.member_login .body .check label .icon svg{ width: 14px; height: 14px;}
.member_login .body .check label.on .icon{ border-color: #ffd655; background: #ffd655;}
.member_login .body .check label.on .icon svg path{ color: #000;}
.member_login .body .check p{ font-size: 15px; color: #666;}
.member_login .body .check p span{ font-weight: 600; color: #00a7d0; cursor: pointer;}
.member_login .btn_login{ display: flex; justify-content: center; align-items: center; margin: 10px 0 0 0; height: 60px; border-radius: 10px; background: #ffd655; font-size: 20px; font-weight: 700; color: #000; cursor: pointer;}

.member_login .or{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 10px;}
.member_login .or a{ display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 10px; border: 1px solid #DDD; cursor: pointer; transition: all .2s;}
.member_login .or a p{ font-size: 16px; font-weight: 500; color: #000; transition: all .2s;}
.member_login .or a:hover{ border-color: #00a7d0; background: #fafafa;}
.member_login .or a:hover p{ color: #00a7d0;}

.member_login .foot{ margin: 60px 0 0 0; padding: 40px; border-radius: 10px; background: #f6f8fb;}
.member_login .foot .tit{ font-size: 24px; font-weight: 600; color: #000;}
.member_login .foot ul{ display: grid; grid-gap: 10px; margin-top: 20px;}
.member_login .foot ul li{ position: relative; padding: 0 0 0 15px; line-height: 1.4; font-size: 15px; color: #333;}
.member_login .foot ul li:before{ content: ""; display: block; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #00a7d0;}
.member_login .foot ul li b{ color: #F00;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    .member_login .head img{ height: 2rem;}
    .member_login .head p{ margin-top: 1rem; font-size: 1.6rem;}

    .member_login .body{ grid-gap: 1rem; margin-top: 2rem;}
    .member_login .body .wrap .icon{ padding: 1rem; width: 3.5rem; height: 3.5rem;}
    .member_login .body .wrap .btn_pw{ padding: 1rem; width: 3.5rem; height: 3.5rem;}
    .member_login .body .wrap input{ padding: 0 1.5rem 0 3.5rem; height: 3.5rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .member_login .body .check label{ grid-gap: 0.5rem;}
    .member_login .body .check label .icon{ width: 1.6rem; height: 1.6rem;}
    .member_login .body .check label .icon svg{ width: 1rem; height: 1rem;}
    .member_login .body .check p{ font-size: 1rem;}
    .member_login .btn_login{ margin: 1rem 0 0 0; height: 4rem; border-radius: 0.5rem; font-size: 1.2rem;}

    .member_login .or{ grid-gap: 0.5rem;}
    .member_login .or a{ height: 3rem; border-radius: 0.5rem;}
    .member_login .or a p{ font-size: 1.1rem;}

    .member_login .foot{ margin: 2rem 0 0 0; padding: 1.5rem; border-radius: 0.5rem;}
    .member_login .foot .tit{ font-size: 1.3rem;}
    .member_login .foot ul{ grid-gap: 1rem; margin-top: 1rem;}
    .member_login .foot ul li{ padding: 0 0 0 1rem; font-size: 1rem;}
    .member_login .foot ul li:before{ top: 0.5rem;}
}


.member_join{}
.member_join .menu_pw{ display: grid; grid-template-columns: repeat(2,1fr); border-radius: 10px 10px 0 0; border: 1px solid #ddd; background: #f6f8fb; border-bottom: 0;}
.member_join .menu_pw a{ display: flex; justify-content: center; align-items: center; height: 50px; font-size: 18px; font-weight: 500; color: #333; cursor: pointer;}
.member_join .menu_pw a:nth-child(1){ border-radius: 10px 0 0 0;}
.member_join .menu_pw a:nth-child(2){ border-radius: 0 10px 0 0;}
.member_join .menu_pw a.on{ position: relative; z-index: 10; margin: -10px -1px 0 -1px; height: 60px; border-radius: 10px 10px 0 0; border: 2px solid #00a7d0; border-bottom: 0; background: #FFF; font-weight: 700; color: #00a7d0;}

.member_join .member_write:first-child{ padding-top: 0;}
.member_join .head{}
.member_join .head .step{ overflow: hidden; display: flex; position: relative; border-radius: 10px;}
.member_join .head .step:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 10px; border: 1px solid #ddd;}
.member_join .head .step .wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 5px; position: relative; z-index: 10; width: 20%; height: 100px; opacity: 0.4;}
.member_join .head .step .wrap .txt{ position: relative; z-index: 10; font-size: 15px; font-weight: 500; color: rgba(0 0 0/50%);}
.member_join .head .step .wrap .tit{ position: relative; z-index: 10; font-size: 20px; font-weight: 700; color: #000;}
.member_join .head .step .wrap svg{ display: none; position: absolute; top: calc(50% - 12px); right: -12px; width: 24px; height: 24px;}
.member_join .head .step .wrap.on{ opacity: 1;}
.member_join .head .step .wrap.on:before{ content: ""; position: absolute; top: 0; right: 20px; bottom: 0; left: -20px; background: #ffd655;}
.member_join .head .step .wrap.on:after{ content: ""; position: absolute; top: 0; right: -20px; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 40px solid #ffd655;}
.member_join .head .step .wrap:nth-child(6).on:after{ right: -50px; width: 100%; height: 100%; border-top: 0; border-bottom: 0; border-left: 0; background: #ffd655;}
.member_join .head .step .wrap.on .txt{ color: rgba(0 0 0/60%);}
.member_join .head .step .wrap.on .tit{ color: #000;}
.member_join .head .step .wrap:nth-child(1){ z-index: 6;}
.member_join .head .step .wrap:nth-child(2){ z-index: 5;}
.member_join .head .step .wrap:nth-child(3){ z-index: 4;}
.member_join .head .step .wrap:nth-child(4){ z-index: 3;}
.member_join .head .step .wrap:nth-child(5){ z-index: 2;}
.member_join .head .step .wrap:nth-child(6){ z-index: 1;}

.member_join .foot{ margin: 60px 0 0 0; padding: 40px; border-radius: 10px; background: #f6f8fb;}
.member_join .foot .tit{ font-size: 24px; font-weight: 600; color: #000;}
.member_join .foot ul{ display: grid; grid-gap: 10px; margin-top: 20px;}
.member_join .foot ul li{ position: relative; padding: 0 0 0 15px; line-height: 1.4; font-size: 15px; color: #333;}
.member_join .foot ul li:before{ content: ""; display: block; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #00a7d0;}
.member_join .foot ul li b{ color: #F00;}

.member_title{ display: grid; grid-gap: 10px; margin-top: 60px;}
.member_title img{ margin: 0 auto; width: 60px; height: 60px;}
.member_title .tit{ text-align: center; line-height: 1.2; font-size: 30px; font-weight: 600; color: #000;}
.member_title .txt{ text-align: center; line-height: 1.4; font-size: 17px; color: #666;}
.member_title .txt b{ font-weight: 600; color: #00a7d0;}

.member_type{ display: flex; justify-content: center; grid-gap: 20px; margin: 60px 0 0 0; width: 100%;}
.member_type .wrap{ display: flex; flex-direction: column; align-items: center; position: relative; padding: 50px; width: 50%; border-radius: 10px; border: 1px solid #ddd; cursor: pointer; transition: all .2s;}
.member_type .wrap .icon{ height: 60px;}
.member_type .wrap .icon img{ width: auto; height: 100%;}
.member_type .wrap .tit{ margin-top: 20px; font-size: 24px; font-weight: 700; color: #000;}
.member_type .wrap .txt{ margin-top: 10px; font-size: 17px; color: #333;}
.member_type .wrap:hover{ background: #fafafa;}
.member_type .wrap.on:after{ content: ""; display: block; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: 10px; border: 2px solid #00a7d0;}

.member_terms{ display: grid; grid-gap: 60px; margin-top: 60px;}
.member_terms > .wrap{}
.member_terms > .wrap > .tit{ font-size: 24px; font-weight: 600; color: #000;}
.member_terms > .wrap > .tit span{ font-weight: 700; color: #00a7d0;}
.member_terms > .wrap > .board{ overflow: hidden; margin: 20px 0 0 0;}
.member_terms > .wrap > .board > .box{ overflow: auto; padding: 40px; height: 300px; border: 1px solid #ddd; line-height: 1.6; font-size: 15px; color: #666;}
.member_terms > .wrap > .check{ display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
.member_terms > .wrap > .check label{ display: flex; align-items: center; grid-gap: 5px; cursor: pointer;}
.member_terms > .wrap > .check label .icon{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #DDD; background: #fafafa;}
.member_terms > .wrap > .check label .icon svg{ width: 14px; height: 14px;}
.member_terms > .wrap > .check label p{ font-size: 17px; color: #666;}
.member_terms > .wrap > .check label p b{ font-weight: 600; color: #00a7d0; cursor: pointer;}
.member_terms > .wrap > .check label.on .icon{ border-color: #00a7d0; background: #00a7d0;}
.member_terms > .wrap > .check label.on .icon svg path{ color: #FFF;}
.member_terms > .wrap > .check label.on p{ font-weight: 500; color: #000;}
.member_terms > .wrap.on{ display: grid;}

.member_like{ margin-top: 20px;}
.member_like ul{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 10px;}
.member_like ul li{ display: flex; justify-content: center; align-items: center; height: 60px; border-radius: 10px; border: 1px dashed rgba(0 0 0/10%); background: #f2f6fc; font-size: 17px; color: rgba(0 0 0/70%); cursor: pointer;}
.member_like ul li.on{ border: 1px solid #ffd655; background: #ffd655; font-weight: 600; color: #000;}
.member_like p{ margin-top: 10px; line-height: 1.2; font-size: 14px; color: #666;}

.member_write{ padding: 60px 0 0 0; width: 100%;}
.member_write.mypage{ padding: 0;}
.member_write .member_write_head{ display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 20px 0; border-bottom: 2px solid #000;}
.member_write .member_write_head .fl{ flex: 1;}
.member_write .member_write_head .fl .tit{ font-size: 24px; font-weight: 600; color: #000;}
.member_write .member_write_head .fl .txt{ margin-top: 10px; line-height: 1.4; font-size: 16px; color: #666;}
.member_write .member_write_head p{ font-size: 24px; font-weight: 600; color: #000;}
.member_write .member_write_head span{ font-size: 14px; color: #000;}
.member_write .member_write_head span b{ color: #F00;}
.member_write .list{ display: flex; flex-wrap: wrap;}
.member_write .list .wrap{ position: relative; padding: 15px 20px 15px 200px; width: 100%; border-bottom: 1px solid #DDD;}
.member_write .list .wrap .tit{ position: absolute; top: 0; bottom: 0; left: 0; padding: 25px 20px 0 20px; width: 180px; background: #f6f8fb; line-height: 1.2; font-size: 15px; font-weight: 500; color: #000;}
.member_write .list .wrap .tit span{ padding-left: 5px; color: #F00;}
.member_write .list .wrap .txt{ margin: 10px 0 0 0; line-height: 1.4; font-size: 13px; color: #666;}
.member_write .list .wrap .txt span{ color: #F00;}
.member_write .list .wrap .data{ display: flex; align-items: center; min-height: 40px; line-height: 1.2; font-size: 15px; font-weight: 500; color: #000; letter-spacing: 0;}

.member_write .in{ display: flex; align-items: center; margin: 0; padding: 0 10px; width: 100%; height: 40px; border-radius: 10px; border: 1px solid #DDD; background: #FFF; font-size: 15px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.member_write .in:focus{ border: 1px solid #00a7d0;}
.member_write .in:read-only{ border: 0; background: #f0f0f0; color: #000; font-weight: 600;}
.member_write select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 10px; width: 100%; height: 40px; border-radius: 10px; border: 1px solid #DDD; background:url(/edu/images/modle_select_down.svg) no-repeat center right 10px #FFF; background-size: 14px auto; font-size: 15px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.member_write select:focus{ border: 1px solid #00a7d0;}
.member_write textarea{ display: block; margin: 0; padding: 10px; width: 100%; height: 260px; resize: none; border-radius: 10px; border: 1px solid #DDD; background: none; line-height: 1.4; font-size: 15px; color: #000; outline: none; -webkit-appearance: none;}
.member_write textarea:focus{ border: 1px solid #00a7d0;}

.member_write .check_id{ display: flex; grid-gap: 5px; max-width: 320px;}
.member_write .check_id .in{ flex: 1;}
.member_write .check_id .btn{ display: flex; justify-content: center; align-items: center; width: 140px; border-radius: 10px; background: #e8ecf7; font-size: 15px; font-weight: 500; color: #00a7d0; cursor: pointer; transition: all .2s;}
.member_write .check_id .btn:hover{ background: #00a7d0; color: #FFF;}

.member_write .check_user{ display: flex; grid-gap: 5px; max-width: 320px;}
.member_write .check_user .fl{ flex: 1; display: grid; grid-template-columns: repeat(2,1fr); height: 40px; border-radius: 10px; border: 1px solid #ddd;}
.member_write .check_user .fl .row{ display: flex; justify-content: center; align-items: center; font-size: 15px; color: #666; cursor: pointer;}
.member_write .check_user .fl .row.on{ position: relative; z-index: 10; border-radius: 10px; background: #ffd655; font-weight: 600; color: #000;}
.member_write .check_user .fl .row:nth-child(1).on{ margin: -1px 0 -1px -1px;}
.member_write .check_user .fl .row:nth-child(2).on{ margin: -1px -1px -1px 0;}
.member_write .check_user .btn{ display: flex; justify-content: center; align-items: center; width: 140px; border-radius: 10px; background: #e8ecf7; font-size: 15px; font-weight: 500; color: #00a7d0; cursor: pointer; transition: all .2s;}
.member_write .check_user .btn:hover{ background: #00a7d0; color: #FFF;}

.member_write .file{ display: flex; grid-gap: 10px;}
.member_write .file .btn{ display: flex; justify-content: center; align-items: center; width: 140px; border-radius: 5px; background: #e8ecf7; font-size: 15px; font-weight: 500; color: #00a7d0; cursor: pointer; transition: all .2s;}
.member_write .file .btn:hover{ background: #00a7d0; color: #FFF;}

.member_write .address{ display: grid; grid-gap: 10px;}
.member_write .address .row{ display: flex; grid-gap: 10px;}
.member_write .address .row .fl{ display: flex; grid-gap: 10px; max-width: 320px;}
.member_write .address .row .fl .btn{ display: flex; justify-content: center; align-items: center; width: 140px; border-radius: 10px; background: #e8ecf7; font-size: 15px; font-weight: 500; color: #00a7d0; cursor: pointer; transition: all .2s;}
.member_write .address .row .fl .btn:hover{ background: #00a7d0; color: #FFF;}
.member_write .address .row .in{ flex: 1;}

.member_write .check{ display: flex; flex-wrap: wrap; grid-gap: 10px 20px; min-height: 40px;}
.member_write .check label{ display: flex; align-items: center; grid-gap: 5px; cursor: pointer;}
.member_write .check label .icon{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 5px; border: 1px solid #DDD;}
.member_write .check label .icon svg{ width: 14px; height: 14px;}
.member_write .check label p{ font-size: 15px; color: #333;}
.member_write .check label p span{ font-weight: 600; color: #00a7d0; cursor: pointer;}
.member_write .check label.on .icon{ border-color: #00a7d0; background: #00a7d0;}
.member_write .check label.on .icon svg path{ color: #FFF;}
.member_write .check label.on p{ color: #00a7d0;}
.member_write .check.radio label .icon{ border-radius: 50%;}
.member_write .check.check_type_3{ display: grid; grid-template-columns: repeat(3,1fr);}

.member_write .landline{ display: flex; align-items: center; grid-gap: 10px;}
.member_write .landline .fl{ display: flex; grid-gap: 10px; max-width: 320px;}
.member_write .landline .fl select{ flex: 0 0 100px;}
.member_write .landline .fl input{ width: 50%;}

.member_write .tel{ display: flex; grid-gap: 10px; max-width: 320px;}
.member_write .tel select{ flex: 0 0 100px;}
.member_write .tel input{ width: 50%;}
.member_write .tel_textarea{ margin-top: 10px; padding: 20px; border-radius: 5px; background: #f5f5f5; line-height: 1.4; font-size: 15px; color: #666;}

.member_write .tel_sms{ display: grid; grid-gap: 10px; max-width: 320px;}
.member_write .tel_sms .ft{ display: flex; grid-gap: 10px;}
.member_write .tel_sms .ft select{ flex: 0 0 100px;}
.member_write .tel_sms .ft input{ width: 50%;}
.member_write .tel_sms .btn{ display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 5px; background: #e8ecf7; font-size: 15px; font-weight: 500; color: #00a7d0; cursor: pointer; transition: all .2s;}
.member_write .tel_sms .btn:hover{ background: #00a7d0; color: #FFF;}

.member_write .tel_sms_again{ display: grid; grid-gap: 10px; max-width: 320px;}
.member_write .tel_sms_again .ft{ display: flex; grid-gap: 5px;}
.member_write .tel_sms_again .ft .time{ flex: 0 0 40px; display: flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #ddd; font-size: 15px; font-weight: 500; color: #000;}
.member_write .tel_sms_again .ft .bt{ display: flex; justify-content: center; align-items: center; padding: 0 20px; border-radius: 5px; background: #00a7d0; font-size: 15px; font-weight: 500; color: #FFF; white-space: nowrap; cursor: pointer;}
.member_write .tel_sms_again .btn{ display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 5px; background: #e8ecf7; font-size: 15px; color: #00a7d0; cursor: pointer; transition: all .2s;}
.member_write .tel_sms_again .btn:hover{ background: #00a7d0; color: #FFF;}

.member_write .mail{ display: flex; grid-gap: 10px; max-width: 600px;}
.member_write .mail .ft{ display: flex; align-items: center; width: 70%;}
.member_write .mail .ft input{ width: 50%;}
.member_write .mail .ft p{ padding: 0 5px; font-size: 15px; color: #666;}
.member_write .mail select{ width: 30%;}

.member_write .company_number{ display: flex; grid-gap: 5px; max-width: 320px;}
.member_write .company_number .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; border-radius: 5px; background: #e8ecf7; font-size: 15px; font-weight: 500; color: #00a7d0; white-space: nowrap; cursor: pointer; transition: all .2s;}
.member_write .company_number .btn:hover{ background: #00a7d0; color: #FFF;}

.member_write .company_name{ display: grid; grid-gap: 10px;}
.member_write .company_name .row{ display: flex; grid-gap: 10px;}
.member_write .company_name .row .in{ max-width: 320px;}
.member_write .company_name .row .plus{ flex: 0 0 40px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 5px; background: #e8ecf7; cursor: pointer; transition: all .2s;}
.member_write .company_name .row .plus svg{ width: 24px; height: 24px;}
.member_write .company_name .row .plus svg path{ color: #00a7d0; transition: all .2s;}
.member_write .company_name .row .plus:hover{ background: #00a7d0;}
.member_write .company_name .row .plus:hover svg path{ color: #FFF;}
.member_write .company_name .row .delete{ flex: 0 0 40px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 5px; background: #ffdada; cursor: pointer; transition: all .2s;}
.member_write .company_name .row .delete svg{ width: 24px; height: 24px;}
.member_write .company_name .row .delete svg path{ color: #F00; transition: all .2s;}
.member_write .company_name .row .delete:hover{ background: #F00;}
.member_write .company_name .row .delete:hover svg path{ color: #FFF;}
.member_write .company_name .row .btn{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 40px; border-radius: 5px; background: #e8ecf7; font-size: 15px; font-weight: 400; color: #000; white-space: nowrap; cursor: pointer; transition: all .2s;}
.member_write .company_name .row .btn:hover{ background: #00a7d0; color: #FFF;}
@media(max-width: 1000px){
    .member_join .head .step .wrap .txt{ font-size: 13px;}
    .member_join .head .step .wrap .tit{ font-size: 17px;}
    .member_write .list .wrap{ width: 100% !important;}
}
@media(max-width: 767px){
    .member_join .head{}
    .member_join .head .step{ display: grid; grid-template-columns: repeat(6,1fr); border-radius: 0.4rem;}
    .member_join .head .step .wrap{ flex-shrink: 0; grid-gap: 0.5rem; width: auto; height: 4rem;}
    .member_join .head .step .wrap .txt{ font-size: 0.7rem;}
    .member_join .head .step .wrap .tit{ font-size: 0.9rem;}
    .member_join .head .step .wrap.on:before{ right: 0.5rem; left: -0.5rem;}
    .member_join .head .step .wrap.on:after{ right: -0.5rem; border-top: 2rem solid transparent; border-bottom: 2rem solid transparent; border-left: 1rem solid #ffd655;}
    .member_join .head .step .wrap:nth-child(6).on:before{ right: -0.5rem;}

    .member_join .foot{ margin: 2.5rem 0 0 0; padding: 1.5rem; border-radius: 0.4rem;}
    .member_join .foot .tit{ font-size: 1.4rem;}
    .member_join .foot ul{ grid-gap: 0.5rem; margin-top: 1rem;}
    .member_join .foot ul li{ padding: 0 0 0 1rem; font-size: 1rem;}
    .member_join .foot ul li:before{ top: 0.5rem;}

    .member_title{ grid-gap: 0.6rem; margin-top: 2.5rem;}
    .member_title img{ width: 3rem; height: 3rem;}
    .member_title .tit{ font-size: 1.5rem;}
    .member_title .txt{ font-size: 1rem;}

    .member_type{ grid-gap: 0.5rem; margin: 2.5rem 0 0 0;}
    .member_type .wrap{ padding: 2.5rem 0; border-radius: 0.4rem;}
    .member_type .wrap .icon{ height: 3rem;}
    .member_type .wrap .tit{ margin-top: 1rem; font-size: 1.4rem;}
    .member_type .wrap .txt{ margin-top: 0.5rem; font-size: 1rem;}
    .member_type .wrap.on:after{ border-radius: 0.4rem;}

    .member_like{ margin-top: 1rem;}
    .member_like ul{ grid-gap: 0.5rem;}
    .member_like ul li{ height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .member_like p{ margin-top: 0.6rem; font-size: 1rem;}

    .member_terms{ grid-gap: 2.5rem; margin-top: 2.5rem;}
    .member_terms > .wrap > .tit{ line-height: 1.2; font-size: 1.4rem;}
    .member_terms > .wrap > .board{ margin: 1rem 0 0 0;}
    .member_terms > .wrap > .board > .box{ padding: 2rem 1rem; height: 20rem; font-size: 1.1rem;}
    .member_terms > .wrap > .check{ margin-top: 1.5rem;}
    .member_terms > .wrap > .check label{ grid-gap: 0.5rem;}
    .member_terms > .wrap > .check label .icon{ width: 1.6rem; height: 1.6rem;}
    .member_terms > .wrap > .check label .icon svg{ width: 1rem; height: 1rem;}
    .member_terms > .wrap > .check label p{ font-size: 1.1rem;}

    .member_write{ padding: 3rem 0 0 0;}
    .member_write .member_write_head{ padding: 0 0 1rem 0;}
    .member_write .member_write_head .fl{ flex: 1;}
    .member_write .member_write_head .fl .tit{ font-size: 1.4rem;}
    .member_write .member_write_head .fl .txt{ margin-top: 0.5rem; font-size: 1rem;}
    .member_write .member_write_head p{ font-size: 1.4rem;}
    .member_write .member_write_head span{ font-size: 1rem;}
    .member_write .list .wrap{ padding: 1.2rem 0;}
    .member_write .list .wrap .tit{ position: initial; padding: 0 0 0.8rem 0; width: auto; background: none; font-size: 1.1rem;}
    .member_write .list .wrap .txt{ margin: 0.6rem 0 0 0; font-size: 1rem;}
    .member_write .list .wrap .data{ min-height: auto; font-size: 1.2rem;}

    .member_write .in{ padding: 0 1rem; max-width: 100% !important; height: 3rem; border-radius: 0.4rem; font-size: 1.1rem;}
    .member_write .in:focus{ border: 1px solid #00a7d0;}
    .member_write .in:read-only{ border: 0; background: #f0f0f0; color: #000; font-weight: 600;}
    .member_write select{ padding: 0 2rem 0 1rem; height: 3rem; border-radius: 0.4rem; background:url(/edu/images/modle_select_down.svg) no-repeat center right 1rem #FFF; background-size: 1rem auto; font-size: 1.1rem;}
    .member_write textarea{ padding: 1rem; height: 15rem; border-radius: 0.4rem; font-size: 1.1rem;}

    .member_write .check_user{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .check_user .fl{ height: 3rem; border-radius: 0.5rem;}
    .member_write .check_user .fl .row{ font-size: 1.1rem;}
    .member_write .check_user .fl .row.on{ border-radius: 0.5rem;}
    .member_write .check_user .btn{ width: 8rem; border-radius: 0.5rem; font-size: 1.1rem;}

    .member_write .check_id{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .check_id .btn{ width: 8rem; border-radius: 0.4rem; font-size: 1.1rem;}

    .member_write .file{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .file .btn{ width: 8rem; border-radius: 0.4rem; font-size: 1.1rem;}

    .member_write .address{ grid-gap: 0.5rem;}
    .member_write .address .row{ display: grid; grid-gap: 0.5rem;}
    .member_write .address .row .fl{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .address .row .btn{ width: 8rem; border-radius: 0.4rem; font-size: 1.1rem;}

    .member_write .check{ grid-gap: 0.8rem 1.6rem; min-height: auto;}
    .member_write .check.check_type_3{ grid-template-columns: repeat(2,1fr);}
    .member_write .check label{ grid-gap: 0.5rem;}
    .member_write .check label .icon{ width: 1.6rem; height: 1.6rem; border-radius: 0.5rem;}
    .member_write .check label .icon svg{ width: 1rem; height: 1rem;}
    .member_write .check label p{ font-size: 1.1rem;}

    .member_write .landline{ display: grid; grid-gap: 0.5rem;}
    .member_write .landline .fl{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .landline .fl select{ flex: 0 0 7rem;}
    .member_write .landline .check{ min-height: auto;}

    .member_write .tel{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .tel select{ flex: 0 0 7rem;}
    .member_write .tel_textarea{ margin-top: 0.5rem; padding: 1rem; border-radius: 0.4rem; font-size: 1rem;}

    .member_write .tel_sms{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .tel_sms .ft{ grid-gap: 0.5rem;}
    .member_write .tel_sms .ft select{ flex: 0 0 7rem;}
    .member_write .tel_sms .btn{ height: 3rem; border-radius: 0.4rem; font-size: 1.1rem;}

    .member_write .tel_sms_again{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .tel_sms_again .ft{ grid-gap: 0.5rem;}
    .member_write .tel_sms_again .ft .time{ flex: 0 0 3.5rem; border-radius: 0.4rem; font-size: 1.12rem;}
    .member_write .tel_sms_again .ft .bt{ padding: 0 1rem; border-radius: 0.4rem; font-size: 1.12rem;}
    .member_write .tel_sms_again .btn{ height: 3.5rem; border-radius: 0.4rem; font-size: 1.1rem;}

    .member_write .mail{ display: grid; grid-gap: 0.5rem;}
    .member_write .mail .ft{ width: 100%;}
    .member_write .mail .ft p{ padding: 0 0.4rem; font-size: 1rem;}
    .member_write .mail select{ width: 100%;}

    .member_write .company_number{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .company_number .btn{ padding: 0 1rem; border-radius: 0.4rem; font-size: 1.1rem;}

    .member_write .company_name{ grid-gap: 0.5rem; max-width: 100%;}
    .member_write .company_name .row{ flex-wrap: wrap; grid-gap: 0.5rem;}
    .member_write .company_name .row .in{ max-width: 100%;}
    .member_write .company_name .row .plus{ flex: 0 0 3rem; width: 3rem; height: 3rem; border-radius: 0.4rem;}
    .member_write .company_name .row .plus svg{ width: 1.6rem; height: 1.6rem;}
    .member_write .company_name .row .delete{ flex: 0 0 3rem; width: 3rem; height: 3rem; border-radius: 0.4rem;}
    .member_write .company_name .row .delete svg{ width: 1.6rem; height: 1.6rem;}
    .member_write .company_name .row .btn{ padding: 0 1rem; height: 3rem; border-radius: 0.4rem; font-size: 1.1rem;}
    .member_write .company_name .row .btn:last-child{ flex: 1;}
}




.new_member_join{ margin: 0 auto; max-width: 500px;}
.new_member_join .title{ margin-top: 40px; text-align: center;}
.new_member_join .title .tit{ font-size: 30px; font-weight: 700; color: #000;}
.new_member_join .title .txt{ margin-top: 10px; line-height: 1.4; font-size: 17px; color: #333;}

.new_member_join .step{ display: flex; justify-content: space-between; align-items: center;}
.new_member_join .step .wrap{ position: relative;}
.new_member_join .step .wrap p{ font-size: 28px; font-weight: 700; color: #999;}
.new_member_join .step .wrap.on p{ color: #000;}
.new_member_join .step svg{ width: 14px; height: 14px;}
.new_member_join .step svg path{ color: #999;}

.new_member_join .text_top{ margin-top: 40px;}
.new_member_join .text_top .tit{ font-size: 20px; font-weight: 600; color: #000;}
.new_member_join .text_top .txt{ margin-top: 10px; line-height: 1.4; font-size: 15px; color: #333;}
.new_member_join .text_top .txt b{ font-weight: 600; letter-spacing: 0; color: #F00;}

.new_member_join .text_bottom{ display: flex; grid-gap: 5px; margin-top: 20px; line-height: 24px; font-size: 15px; color: #333;}
.new_member_join .text_bottom svg{ width: 24px; height: 24px;}
.new_member_join .text_bottom svg path{ color: #F00;}
.new_member_join .text_bottom svg circle{ color: #F00;}

.new_member_join .policy{ display: flex; flex-direction: column; align-items: flex-start; margin-top: 40px;}
.new_member_join .policy .full{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.new_member_join .policy .full .icon{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ddd;}
.new_member_join .policy .full .icon svg{ width: 16px; height: 16px;}
.new_member_join .policy .full .icon svg path{ color: #999;}
.new_member_join .policy .full p{ font-size: 24px; font-weight: 600; color: #000;}
.new_member_join .policy .full.on .icon{ border-color: #000; background: #000;}
.new_member_join .policy .full.on svg path{ color: #FFF;}

.new_member_join .policy .list{ display: grid; grid-gap: 15px; margin-top: 15px; padding: 30px 0; width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #ddd;}
.new_member_join .policy .list .wrap{ display: flex; justify-content: space-between; align-items: center;}
.new_member_join .policy .list .wrap label{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.new_member_join .policy .list .wrap label .icon{ display: flex; justify-content: center; align-items: center; margin: 3px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ddd;}
.new_member_join .policy .list .wrap label .icon svg{ width: 12px; height: 12px;}
.new_member_join .policy .list .wrap label .icon svg path{ color: #999;}
.new_member_join .policy .list .wrap label .icon_none{ margin: 3px; width: 24px; height: 24px;}
.new_member_join .policy .list .wrap label p{ font-size: 16px; color: #000;}
.new_member_join .policy .list .wrap label p span{ color: #F00;}
.new_member_join .policy .list .wrap label.on .icon{ border-color: #000; background: #000;}
.new_member_join .policy .list .wrap label.on svg path{ color: #FFF;}
.new_member_join .policy .list .wrap .btn{ display: flex; align-items: center; padding: 0 10px; height: 30px; border-radius: 20px; border: 1px solid #ddd; font-size: 13px; color: #666; cursor: pointer; transition: all .3s;}
.new_member_join .policy .list .wrap .btn:hover{ border-color: #000; color: #000;}

.new_member_join .policy .list .min{ display: flex; grid-gap: 20px; padding-left: 40px;}
.new_member_join .policy .list .min label{ display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.new_member_join .policy .list .min label .icon{ display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ddd;}
.new_member_join .policy .list .min label .icon svg{ width: 12px; height: 12px;}
.new_member_join .policy .list .min label .icon svg path{ color: #999;}
.new_member_join .policy .list .min label .icon_none{ margin: 3px; width: 24px; height: 24px;}
.new_member_join .policy .list .min label p{ font-size: 14px; color: #666;}
.new_member_join .policy .list .min label p span{ color: #F00;}
.new_member_join .policy .list .min label.on .icon{ border-color: #000; background: #000;}
.new_member_join .policy .list .min label.on svg path{ color: #FFF;}

.new_member_join .join_btn{ margin-top: 40px;}
.new_member_join .join_btn .btn{ display: flex; justify-content: center; align-items: center; height: 60px; border-radius: 10px; border: 1px solid #333; font-size: 18px; font-weight: 700; color: #000; cursor: pointer; transition: all .3s;}
.new_member_join .join_btn .btn:hover{ background: #f5f5f5;}
.new_member_join .join_btn .or{ position: relative; margin: 40px 0;}
.new_member_join .join_btn .or p{ position: relative; z-index: 1; margin: 0 auto; width: 100px; background: #FFF; text-align: center; font-size: 14px; color: #666;}
.new_member_join .join_btn .or:after{ content: ""; display: block; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #DDD;}
.new_member_join .join_btn .sns{ display: grid; grid-gap: 10px;}
.new_member_join .join_btn .sns a{ display: flex; align-items: center; grid-gap: 20px; padding: 0 30px; height: 60px; border-radius: 10px; border: 1px solid #DDD; cursor: pointer;}
.new_member_join .join_btn .sns a img{ display: block; width: 40px;}
.new_member_join .join_btn .sns a p{ font-size: 18px; font-weight: 700; color: #000;}
.new_member_join .join_btn .sns a.kakao{ border-color: #fee500; background: #fee500;}
.new_member_join .join_btn .sns a.naver{ border-color: #03c75a; background: #03c75a;}
.new_member_join .join_btn .sns a.naver p{ color: #FFF;}

.new_member_join .user_check{ display: grid; grid-gap: 10px; margin-top: 40px;}
.new_member_join .user_check a{ display: flex; justify-content: center; align-items: center; grid-gap: 20px; height: 60px; border-radius: 10px; border: 1px solid #333; cursor: pointer; transition: all .3s;}
.new_member_join .user_check a svg{ width: 30px; height: 30px;}
.new_member_join .user_check a p{ font-size: 18px; font-weight: 700; color: #000;}
.new_member_join .user_check a:hover{ border-color: #000; background: #f5f5f5;}

.new_member_join .write{ display: grid; grid-gap: 25px; margin-top: 40px; width: 100%;}
.new_member_join .write .tit{ padding: 0 0 5px 0; font-size: 15px; font-weight: 600; color: #000;}
.new_member_join .write .tit b{ color: #F00;}
.new_member_join .write .txt{ margin-top: 10px; font-size: 13px; color: #666;}
.new_member_join .write input{ display: flex; align-items: center; margin: 0; padding: 0 15px; width: 100%; height: 45px; border-radius: 10px; border: 1px solid #ddd; background: none; font-size: 16px; font-weight: 400; color: #000; letter-spacing: 0; outline: none; -webkit-appearance: none;}
.new_member_join .write input:focus{ border-color: #000;}
.new_member_join .write select{ display: flex; align-items: center; margin: 0; padding: 0 30px 0 15px; width: 100%; height: 45px; border-radius: 10px; border: 1px solid #ddd; background: url(/edu/images/modle_select_down.svg) no-repeat center right 10px #FFF; background-size: 14px auto; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.new_member_join .write select:focus{ border-color: #000;}
.new_member_join .write textarea{ margin: 0; padding: 10px 15px; width: 100%; height: 100px; resize: none; border-radius: 10px; border: 1px solid #ddd; background: none; font-size: 16px; font-weight: 400; color: #000; letter-spacing: 0; outline: none; -webkit-appearance: none;}
.new_member_join .write textarea:focus{ border-color: #000;}

.new_member_join .write .check_id{ display: flex; grid-gap: 10px;}
.new_member_join .write .check_id input{ flex: 1;}
.new_member_join .write .check_id .btn{ flex: 0 0 100px; display: flex; justify-content: center; align-items: center; height: 45px; border-radius: 10px; border: 1px solid #333; font-size: 15px; font-weight: 500; color: #000; cursor: pointer; transition: all .3s;}
.new_member_join .write .check_id .btn:hover{ background: #f5f5f5;}

.new_member_join .write .sex{ display: flex; grid-gap: 10px;}
.new_member_join .write .sex .btn{ display: flex; justify-content: center; align-items: center; width: 50%; height: 45px; border-radius: 10px; border: 1px solid #333; font-size: 15px; font-weight: 500; color: #000; cursor: pointer; transition: all .3s;}
.new_member_join .write .sex .btn:hover{ background: #f5f5f5;}
.new_member_join .write .sex .btn.on{ background: #000; color: #FFF; font-weight: 600;}

.new_member_join .write .tel{ display: flex; grid-gap: 10px;}
.new_member_join .write .tel select{ flex: 0 0 120px;}
.new_member_join .write .tel input{ width: 50%;}

.new_member_join .write .mail{ display: grid; grid-gap: 10px;}
.new_member_join .write .mail .ft{ display: flex; align-items: center; grid-gap: 5px;}
.new_member_join .write .mail .ft input{ width: 50%;}
.new_member_join .write .mail .ft p{ font-size: 14px; color: #000;}

.new_member_join .write .address{ display: grid; grid-gap: 10px;}
.new_member_join .write .address .ft{ display: flex; grid-gap: 10px;}
.new_member_join .write .address .ft input{ flex: 1;}
.new_member_join .write .address .ft .btn{ flex: 0 0 100px; display: flex; justify-content: center; align-items: center; height: 45px; border-radius: 10px; border: 1px solid #333; font-size: 15px; font-weight: 500; color: #000; cursor: pointer; transition: all .3s;}
.new_member_join .write .address .ft .btn:hover{ background: #f5f5f5;}

.new_member_join .write .member_like{}
.new_member_join .write .member_like ul{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 5px;}
.new_member_join .write .member_like ul li{ display: flex; justify-content: center; align-items: center; height: 45px; border-radius: 10px; border: 1px solid #ddd; background: #fff; font-size: 15px; color: rgba(0 0 0/70%); cursor: pointer; transition: all .3s;}
.new_member_join .write .member_like ul li:hover{ background: #f5f5f5;}
.new_member_join .write .member_like ul li.on{ border: 1px solid #000; background: #000; font-weight: 600; color: #FFF;}
.new_member_join .write .member_like p{ margin-top: 10px; line-height: 1.2; font-size: 13px; color: #666;}

.new_member_join .join_ok{ margin-top: 40px; text-align: center;}
.new_member_join .join_ok img{ display: block; margin: 0 auto; width: auto; height: 60px;}
.new_member_join .join_ok .tit{ margin-top: 20px; font-size: 30px; font-weight: 600; color: #000;}
.new_member_join .join_ok .txt{ margin-top: 15px; line-height: 1.4; font-size: 18px; color: #333;}
.new_member_join .join_ok .txt b{ font-weight: 600; letter-spacing: 0; color: #F00;}

.new_member_join .find_menu{ display: flex; padding-left: 1px;}
.new_member_join .find_menu .wrap{ width: 50%;}
.new_member_join .find_menu .wrap a{ display: flex; justify-content: center; align-items: center; margin-left: -1px; height: 60px; border: 1px solid #DDD; background: #fafafa; font-size: 16px; font-weight: 500; color: #666;}
.new_member_join .find_menu .wrap.on a{ position: relative; z-index: 10; border: 1px solid #000; border-bottom: 1px solid #FFF; background: #FFF; font-weight: 600; color: #000;}

.new_member_join .find_foot{ margin-top: 40px; padding: 30px; border-radius: 10px; background: #f6f8fb;}
.new_member_join .find_foot p{ position: relative; padding: 5px 0 5px 15px; line-height: 1.4; font-size: 14px; font-weight: 400; color: rgba(0 0 0/70%);}
.new_member_join .find_foot p:before{ content: ""; display: block; position: absolute; top: 12px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0 0 0/100%);}

@media(max-width: 767px){
    .new_member_join .title{ margin-top: 2rem;}
    .new_member_join .title .tit{ font-size: 1.6rem;}
    .new_member_join .title .txt{ margin-top: 0.5rem; font-size: 1.1rem;}

    .new_member_join .step .wrap p{ font-size: 1.6rem;}
    .new_member_join .step svg{ width: 0.8rem; height: 0.8rem;}

    .new_member_join .text_top{ margin-top: 2rem;}
    .new_member_join .text_top .tit{ font-size: 1.4rem;}
    .new_member_join .text_top .txt{ margin-top: 0.5rem; font-size: 1.1rem;}

    .new_member_join .text_bottom{ grid-gap: 0.5rem; margin-top: 1rem; line-height: 1.4rem; font-size: 1rem;}
    .new_member_join .text_bottom svg{ width: 1.4rem; height: 1.4rem;}

    .new_member_join .policy{ margin-top: 2rem;}
    .new_member_join .policy .full{ grid-gap: 0.5rem;}
    .new_member_join .policy .full .icon{ width: 2rem; height: 2rem;}
    .new_member_join .policy .full .icon svg{ width: 1rem; height: 1rem;}
    .new_member_join .policy .full p{ font-size: 1.4rem;}

    .new_member_join .policy .list{ grid-gap: 1rem; margin-top: 1rem; padding: 1.5rem 0;}
    .new_member_join .policy .list .wrap label{ grid-gap: 0.5rem;}
    .new_member_join .policy .list .wrap label .icon{ margin: 0.2rem; width: 1.6rem; height: 1.6rem;}
    .new_member_join .policy .list .wrap label .icon svg{ width: 0.8rem; height: 0.8rem;}
    .new_member_join .policy .list .wrap label .icon_none{ margin: 0.2rem; width: 1.6rem; height: 1.6rem;}
    .new_member_join .policy .list .wrap label p{ font-size: 1.2rem;}
    .new_member_join .policy .list .wrap .btn{ padding: 0 0.8rem; height: 2rem; border-radius: 2rem; font-size: 0.9rem;}

    .new_member_join .policy .list .min{ grid-gap: 1rem; padding-left: 2.5rem;}
    .new_member_join .policy .list .min label{ grid-gap: 0.5rem;}
    .new_member_join .policy .list .min label .icon{ width: 1.6rem; height: 1.6rem;}
    .new_member_join .policy .list .min label .icon svg{ width: 0.8rem; height: 0.8rem;}
    .new_member_join .policy .list .min label .icon_none{ margin: 0.2rem; width: 1.6rem; height: 1.6rem;}
    .new_member_join .policy .list .min label p{ font-size: 1rem;}

    .new_member_join .user_check{ grid-gap: 1rem; margin-top: 2rem;}
    .new_member_join .user_check a{ grid-gap: 1rem; height: 3.5rem; border-radius: 0.5rem;}
    .new_member_join .user_check a svg{ width: 2rem; height: 2rem;}
    .new_member_join .user_check a p{ font-size: 1.2rem;}

    .new_member_join .write{ grid-gap: 1.5rem; margin-top: 2rem;}
    .new_member_join .write .tit{ padding: 0 0 0.5rem 0; font-size: 1.1rem;}
    .new_member_join .write .txt{ margin-top: 0.5rem; font-size: 0.9rem;}
    .new_member_join .write input{ padding: 0 1rem; height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .new_member_join .write select{ padding: 0 2rem 0 1rem; height: 3rem; border-radius: 0.5rem; border: 1px solid #ddd; background: url(/edu/images/modle_select_down.svg) no-repeat center right 1rem #FFF; background-size: 1rem auto; font-size: 1.1rem;}
    .new_member_join .write textarea{ padding: 0.5rem 1rem; height: 6rem; border-radius: 0.5rem; font-size: 1.1rem;}

    .new_member_join .write .check_id{ grid-gap: 0.5rem;}
    .new_member_join .write .check_id .btn{ flex: 0 0 8rem; height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}

    .new_member_join .write .sex{ grid-gap: 0.5rem;}
    .new_member_join .write .sex .btn{ height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}

    .new_member_join .write .tel{ grid-gap: 0.5rem;}
    .new_member_join .write .tel select{ flex: 0 0 8rem;}

    .new_member_join .write .mail{ grid-gap: 0.5rem;}
    .new_member_join .write .mail .ft{ grid-gap: 0.5rem;}
    .new_member_join .write .mail .ft p{ font-size: 1rem;}

    .new_member_join .write .address{ grid-gap: 0.5rem;}
    .new_member_join .write .address .ft{ grid-gap: 0.5rem;}
    .new_member_join .write .address .ft .btn{ flex: 0 0 8rem; height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}

    .new_member_join .write .member_like ul{ grid-gap: 0.5rem;}
    .new_member_join .write .member_like ul li{ height: 3rem; border-radius: 0.5rem; font-size: 1rem;}
    .new_member_join .write .member_like p{ margin-top: 0.5rem; font-size: 0.9rem;}

    .new_member_join .join_ok{ margin-top: 2rem;}
    .new_member_join .join_ok img{ height: 3rem;}
    .new_member_join .join_ok .tit{ margin-top: 1.5rem; font-size: 1.4rem;}
    .new_member_join .join_ok .txt{ margin-top: 1rem; font-size: 1.1rem;}

    .new_member_join .join_btn{ margin-top: 2rem;}
    .new_member_join .join_btn .btn{ height: 4rem; border-radius: 0.5rem; font-size: 1.2rem;}
    .new_member_join .join_btn .or{ margin: 2rem 0;}
    .new_member_join .join_btn .or p{  width: 6rem; font-size: 1rem;}
    .new_member_join .join_btn .sns{ grid-gap: 0.5rem;}
    .new_member_join .join_btn .sns a{ grid-gap: 1rem; padding: 0 2rem; height: 3.5rem; border-radius: 0.5rem;}
    .new_member_join .join_btn .sns a img{ width: 2.4rem;}
    .new_member_join .join_btn .sns a p{ font-size: 1.2rem;}

    .new_member_join .find_menu .wrap a{ height: 4rem; font-size: 1.2rem;}

    .new_member_join .find_foot{ margin-top: 2rem; padding: 1.5rem 2rem; border-radius: 0.5rem;}
    .new_member_join .find_foot p{ padding: 0.5rem 0 0.5rem 1rem; font-size: 1rem;}
    .new_member_join .find_foot p:before{ top: 1rem; width: 0.3rem; height: 0.3rem;}
}







/* ---------------- 마이페이지 ----------------*/


.mypage_inner{ display: flex; grid-gap: 60px;}
.mypage_inner .mypage_right{ flex: 1;}
@media(max-width: 1400px){
    .mypage_inner{ display: grid;}
}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    .mypage_inner{ grid-gap: 2rem;}
}


.mypage_head{ flex: 0 0 200px; position: relative; padding: 30px; border-radius: 10px; background: #f6f8fb;}
.mypage_head .user{ display: flex; flex-direction: column; align-items: center;}
.mypage_head .user .img{ overflow: hidden; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%);}
.mypage_head .user .img img{ display: block; height: 100%; border-radius: 50%;}
.mypage_head .user .fr{ display: flex; flex-direction: column; align-items: center; margin: 15px 0 0 0;}
.mypage_head .user .fr .name{ font-size: 18px; color: #666;}
.mypage_head .user .fr .name b{ font-weight: 600; color: #000;}
.mypage_head .user .fr .out{ margin-top: 10px; padding: 6px 15px; border-radius: 30px; border: 1px solid #ddd; background: #FFF; font-size: 13px; color: #666; letter-spacing: 0; cursor: pointer;}
.mypage_head .user .fr .out:hover{ border-color: #000; color: #000;}
.mypage_head .mypage_menu{ margin-top: 20px;}
.mypage_head .mypage_menu a{ display: flex; justify-content: space-between; align-items: center; position: relative; height: 45px; border-bottom: 1px solid rgba(0 0 0/10%); cursor: pointer; transition: all .3s;}
.mypage_head .mypage_menu a p{ font-size: 16px; font-weight: 400; color: #666; letter-spacing: -1px; transition: all .3s;}
.mypage_head .mypage_menu a svg{ width: 16px; height: 16px; opacity: 0; transition: all .3s;}
.mypage_head .mypage_menu a:hover p{ color: #000;}
.mypage_head .mypage_menu a:hover svg{ opacity: 1;}
.mypage_head .mypage_menu a.on p{ font-weight: 600; color: #00a7d0;}
.mypage_head .mypage_menu a.on svg{ opacity: 1;}
.mypage_head .mypage_menu a.on svg path{ color: #00a7d0;}
@media(max-width: 1400px){
    .mypage_head{ flex: 1; display: flex; flex-direction: column; align-items: center;}
    .mypage_head .user{ display: flex; flex-direction: initial;}
    .mypage_head .user .img{ width: 80px; height: 80px;}
    .mypage_head .user .fr{ margin: 0 0 0 10px;}
    .mypage_head .mypage_menu{ display: flex; grid-gap: 30px;}
    .mypage_head .mypage_menu a{ height: auto; border-bottom: 0;}
    .mypage_head .mypage_menu a p{ font-size: 18px;}
    .mypage_head .mypage_menu a svg{ display: none;}
}
@media(max-width: 1000px){
}
@media(max-width: 767px){
    .mypage_head{ display: block; padding: 0; border-radius: 0; border-bottom: 2px solid #000; background: none;}
    .mypage_head .user{ justify-content: center;}
    .mypage_head .user .img{ width: 5rem; height: 5rem;}
    .mypage_head .user .fr{ margin: 0 0 0 1rem;}
    .mypage_head .user .fr .name{ font-size: 1.4rem;}
    .mypage_head .user .fr .out{ margin-top: 0.6rem; padding: 0.4rem 0.8rem; border-radius: 3rem; font-size: 0.8rem;}
    .mypage_head .mypage_menu{ justify-content: space-between; grid-gap: 0; margin-top: 0.5rem; padding-bottom: 0;}
    .mypage_head .mypage_menu a p{ padding: 1rem 0; font-size: 1.1rem; letter-spacing: -0.15rem;}
}


/* .mypage_head{ display: flex; justify-content: space-between; align-items: flex-end; grid-gap: 60px; position: relative; padding-bottom: 20px; border-bottom: 2px solid #000;}
.mypage_head .user{ display: flex; align-items: center;}
.mypage_head .user .img{ overflow: hidden; width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%);}
.mypage_head .user .img img{ display: block; height: 100%; border-radius: 50%;}
.mypage_head .user .fr{ display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 0 15px;}
.mypage_head .user .fr .name{ font-size: 24px; color: #666;}
.mypage_head .user .fr .name b{ font-weight: 600; color: #000;}
.mypage_head .user .fr .out{ margin-top: 10px; padding: 6px 15px; border-radius: 30px; border: 1px solid #ddd; font-size: 13px; color: #666; letter-spacing: 0; cursor: pointer;}
.mypage_head .user .fr .out:hover{ background: #f5f5f5; color: #000;}
.mypage_head .mypage_menu{ display: flex; grid-gap: 40px; padding-bottom: 10px;}
.mypage_head .mypage_menu a{ display: flex; justify-content: center; align-items: center; position: relative; font-size: 24px; font-weight: 400; color: #333; letter-spacing: -2px; cursor: pointer; transition: all .3s;}
.mypage_head .mypage_menu a.on{ font-weight: 600; color: #00a7d0;}
@media(max-width: 1400px){
}
@media(max-width: 1000px){
    .mypage_head{ grid-gap: 30px;}
    .mypage_head .user .img{ width: 80px; height: 80px;}
    .mypage_head .user .fr .name{ font-size: 20px;}
    .mypage_head .mypage_menu{ grid-gap: 20px;}
    .mypage_head .mypage_menu a{ font-size: 18px;}
}
@media(max-width: 767px){
    .mypage_head{ display: block; padding-bottom: 0;}
    .mypage_head .user{ justify-content: center;}
    .mypage_head .user .img{ width: 5rem; height: 5rem;}
    .mypage_head .user .fr{ margin: 0 0 0 1rem;}
    .mypage_head .user .fr .name{ font-size: 1.4rem;}
    .mypage_head .user .fr .out{ margin-top: 0.6rem; padding: 0.4rem 0.8rem; border-radius: 3rem; font-size: 0.8rem;}
    .mypage_head .mypage_menu{ justify-content: space-between; grid-gap: 0; margin-top: 0; padding-bottom: 0;}
    .mypage_head .mypage_menu a{ padding: 1.5rem 0; font-size: 1.2rem;}
} */


.mypage_title{ margin-top: 40px;}
.mypage_title .tit{ font-size: 30px; font-weight: 600; color: #000;}
.mypage_title .txt{ margin-top: 10px; line-height: 1.4; font-size: 16px; color: #333;}

.mypage_inner .mypage_right .mypage_title:nth-child(1){ margin-top: 0;}
@media(max-width: 767px){
    .mypage_title{ margin-top: 3rem;}
    .mypage_title .tit{ font-size: 1.4rem;}
    .mypage_title .txt{ margin-top: 0.6rem; font-size: 1rem;}
}


.mypage_search{ display: flex; grid-gap: 10px; position: relative; margin: 20px 0 0 0; padding: 20px 30px; border-radius: 10px; background: #f6f8fb;}
.mypage_search .box{ display: flex; grid-gap: 10px;}
.mypage_search .box .dash{ display: flex; align-items: center; font-size: 15px; color: #666;}
.mypage_search select{ display: flex; align-items: center; margin: 0; padding: 0 45px 0 15px; width: auto; height: 45px; border-radius: 30px; border: 1px solid #ddd; background:url(/edu/images/modle_select_down.svg) no-repeat #FFF center right 15px/20px auto; font-size: 15px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.mypage_search select:focus{ border: 1px solid #00a7d0;}
.mypage_search input{ display: flex; align-items: center; margin: 0; padding: 0 45px 0 15px; max-width: 300px; width: 100%; height: 45px; border-radius: 30px; border: 1px solid #ddd; background: #FFF; font-size: 15px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.mypage_search input:focus{ border: 1px solid #00a7d0;}
.mypage_search .btn{ display: flex; justify-content: center; align-items: center; padding: 0 25px; height: 45px; border-radius: 30px; background: #00a7d0; font-size: 15px; font-weight: 700; color: #FFF; white-space: nowrap; cursor: pointer;}
@media(max-width: 1000px){
    .mypage_search .inquiry{ position: initial; flex: 1;}
}
@media(max-width: 767px){
    .mypage_search{ flex-wrap: wrap; grid-gap: 0.5rem; margin: 1rem 0 0 0; padding: 1rem; border-radius: 1rem;}
    .mypage_search .box{ grid-gap: 0.5rem; width: 100%;}
    .mypage_search select{ padding: 0 3rem 0 1.2rem; height: 3rem; border-radius: 2rem; background:url(/edu/images/modle_select_down.svg) no-repeat center right 1rem #FFF; background-size: 1rem auto; font-size: 1.1rem;}
    .mypage_search input{ padding: 0 1.2rem; height: 3rem; border-radius: 2rem; font-size: 1.1rem;}
    .mypage_search .btn{ padding: 0 1.2rem; height: 3rem; border-radius: 2rem; font-size: 1.1rem;}
    .mypage_search .mw100{ width: 100%;}
}


.mypage_option{ display: flex; justify-content: space-between; align-items: center; margin: 40px 0 20px 0;}
.mypage_option .fl{ font-size: 16px; color: #000;}
.mypage_option .fl span{ margin: 0 2px 0 0; font-weight: 600; color: #00a7d0;}
.mypage_option .fr{ display: flex; align-items: center;}
.mypage_option .fr .number{ display: flex; align-items: center;}
.mypage_option .fr .number .tit{ margin: 0 16px 0 0; font-size: 16px; font-weight: 600; color: #000;}
.mypage_option .fr .number select{ display: flex; align-items: center; margin: 0; padding: 0 25px 0 0; width: auto; height: 20px; border-radius: 0; border: 0; background:url(/images/modle_select_down.svg) no-repeat center right 0/18px auto; line-height: 20px; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.mypage_option .fr .sort{ display: flex; align-items: center; margin: 0 0 0 40px; padding: 0 0 0 40px; border-left: 1px solid #e5e5e5;}
.mypage_option .fr .sort .tit{ font-size: 16px; font-weight: 600; color: #000;}
.mypage_option .fr .sort .btn{ display: flex; align-items: center;}
.mypage_option .fr .sort .btn a{ margin: 0 0 0 16px; font-size: 16px; color: #666; cursor: pointer;}
.mypage_option .fr .sort .btn a.on{ font-weight: 600; color: #00a7d0;}
@media(max-width: 767px){
    .mypage_option{ margin: 2rem 0 1rem 0;}
    .mypage_option .fl{ font-size: 1.1rem;}
    .mypage_option .fl span{ margin: 0 0.2rem 0 0;}
    .mypage_option .fr .number .tit{ margin: 0 0.8rem 0 0; font-size: 1.1rem;}
    .mypage_option .fr .number select{ padding: 0 1.5rem 0 0; height: 1rem; background:url(/images/modle_select_down.svg) no-repeat center right 0; background-size: 1rem auto; line-height: 1rem; font-size: 1.1rem;}
    .mypage_option .fr .sort{ margin: 0 0 0 1rem; padding: 0 0 0 1rem;}
    .mypage_option .fr .sort .tit{ font-size: 1.1rem;}
    .mypage_option .fr .sort .btn a{ margin: 0 0 0 0.8rem; font-size: 1.1rem;}
}


.mypage_dashboard{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 20px; margin-top: 20px;}
.mypage_dashboard .wrap{ display: block; padding: 30px; border-radius: 15px; border: 1px solid #ddd; background: #FFF; cursor: pointer; transition: all .2s;}
.mypage_dashboard .wrap .ft{ display: flex; justify-content: space-between; align-items: center; grid-gap: 10px;}
.mypage_dashboard .wrap .ft .tit{ font-size: 16px; font-weight: 600; color: #333;}
.mypage_dashboard .wrap .ft svg{ width: 16px; height: 16px; color: #bbb; transition: all .2s;}
.mypage_dashboard .wrap .num{ margin-top: 15px; line-height: 1.2; font-size: 20px; font-weight: 700; color: #000;}
.mypage_dashboard .wrap .num b{ font-size: 32px; font-weight: 700; color: #000;}
.mypage_dashboard .wrap .txt{ margin-top: 10px; line-height: 1.4; font-size: 14px; color: #999;}
.mypage_dashboard .wrap .tag{ display: flex; flex-wrap: wrap; grid-gap: 6px; margin-top: 15px;}
.mypage_dashboard .wrap .tag p{ display: flex; align-items: center; padding: 0 15px; height: 30px; border-radius: 20px; border: 1px solid transparent; background: #999; font-size: 14px; font-weight: 600; color: #FFF; white-space: nowrap;}
.mypage_dashboard .wrap .tag p.type1{ background: #2f6fe0;}
.mypage_dashboard .wrap .tag p.type2{ background: #f0921e;}
.mypage_dashboard .wrap .tag p.type3{ background: #1a9c4a;}
.mypage_dashboard .wrap .tag p.type4{ background: #999;}
.mypage_dashboard .wrap .tag p.type5{ border-color: #ddd; background: #FFF; font-weight: 500; color: #666;}
.mypage_dashboard .wrap:hover{ border-color: #00a7d0; box-shadow: 0 5px 20px 0 rgba(0 0 0/6%);}
.mypage_dashboard .wrap:hover .ft .tit{ color: #00a7d0;}
.mypage_dashboard .wrap:hover .ft svg{ color: #00a7d0; transform: translate(3px,0);}
@media(max-width: 1000px){
    .mypage_dashboard{ grid-template-columns: repeat(2,1fr); grid-gap: 15px;}
    .mypage_dashboard .wrap{ padding: 20px;}
}
@media(max-width: 767px){
    .mypage_dashboard{ grid-gap: 0.5rem; margin-top: 1rem;}
    .mypage_dashboard .wrap{ padding: 1.5rem 1.2rem; border-radius: 0.5rem;}
    .mypage_dashboard .wrap .ft .tit{ font-size: 1.1rem;}
    .mypage_dashboard .wrap .ft svg{ width: 1.1rem; height: 1.1rem;}
    .mypage_dashboard .wrap .num{ margin-top: 1rem; font-size: 1.3rem;}
    .mypage_dashboard .wrap .num b{ font-size: 1.8rem;}
    .mypage_dashboard .wrap .txt{ margin-top: 0.6rem; font-size: 0.9rem;}
    .mypage_dashboard .wrap .tag{ grid-gap: 0.4rem; margin-top: 1rem;}
    .mypage_dashboard .wrap .tag p{ padding: 0 0.6rem; height: 2rem; font-size: 0.8rem;}
}


.mypage_applications_menu{ display: flex; margin-top: 20px;}
.mypage_applications_menu .btn{ flex: 1; display: flex; justify-content: center; align-items: center; position: relative; height: 60px; border-radius: 0; border: 1px solid #ddd; font-size: 17px; font-weight: 500; color: #666; cursor: pointer; transition: all .3s;}
.mypage_applications_menu .btn:after{ content: ""; position: absolute; z-index: 10; right: -1px; bottom: -1px; left: -1px; height: 2px; background: #000;}
.mypage_applications_menu .btn:hover{ background: #f5f5f5; color: #000;}
.mypage_applications_menu .btn.on{ border-color: #000; background: #000; font-weight: 700; color: #FFF;}
@media(max-width: 767px){
    .mypage_applications_menu{ flex-wrap: wrap; margin-top: 1rem;}
    .mypage_applications_menu .btn{ height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}
}


.mypage_inquiry_qna{ margin-top: 20px;  display: flex; align-items: center; grid-gap: 25px; padding: 25px 30px; border-radius: 10px; border: 1px solid #e5e5e5; background: #FFF;}
.mypage_inquiry_qna .img{ flex: 0 0 70px; overflow: hidden; width: 70px; height: 70px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%); background: #f0f0f0;}
.mypage_inquiry_qna .img img{ width: 100%; height: 100%; object-fit: cover;}
.mypage_inquiry_qna .info{ flex: 1; min-width: 0;}
.mypage_inquiry_qna .info .ft{ display: flex; flex-wrap: wrap; align-items: center; grid-gap: 8px; padding-bottom: 8px;}
.mypage_inquiry_qna .info .ft .name{ font-size: 18px; font-weight: 700; color: #000;}
.mypage_inquiry_qna .info .ft .part{ font-size: 14px; color: #999;}
.mypage_inquiry_qna .info .txt{ line-height: 1.4; font-size: 14px; color: #666;}
.mypage_inquiry_qna .btn{ flex: 0 0 auto;}
.mypage_inquiry_qna .btn a{ display: flex; justify-content: center; align-items: center; padding: 0 25px; height: 40px; border-radius: 10px; border: 1px solid #222; background: #222; font-size: 15px; font-weight: 600; color: #FFF; white-space: nowrap; cursor: pointer; transition: all .2s;}
.mypage_inquiry_qna .btn a:hover{ border-color: #00a7d0; background: #00a7d0;}
@media(max-width: 1000px){
    .mypage_inquiry_qna { grid-gap: 20px; padding: 20px;}
}
@media(max-width: 767px){
    .mypage_inquiry_qna{ margin-top: 1rem; flex-wrap: wrap; grid-gap: 1rem; padding: 1.5rem; border-radius: 1rem;}
    .mypage_inquiry_qna .img{ flex: 0 0 5rem; width: 5rem; height: 5rem;}
    .mypage_inquiry_qna .info{ flex: 1 0 0;}
    .mypage_inquiry_qna .info .ft{ grid-gap: 0.5rem; padding-bottom: 0.5rem;}
    .mypage_inquiry_qna .info .ft .name{ font-size: 1.3rem;}
    .mypage_inquiry_qna .info .ft .part{ font-size: 1rem;}
    .mypage_inquiry_qna .info .txt{ font-size: 0.9rem;}
    .mypage_inquiry_qna .btn{ flex: 1 0 100%;}
    .mypage_inquiry_qna .btn a{ padding: 0; height: 3rem; border-radius: 0.5rem; font-size: 1.2rem;}
}


.my_applications_box{ display: none;}
.my_applications_box.on{ display: block;}


.mypage_applications_list{ overflow: hidden; margin-top: 20px;}
.mypage_applications_list .head{ display: flex; border-top: 1px solid #ddd; border-bottom: 2px solid #00a7d0;}
.mypage_applications_list .head li{ display: flex; justify-content: center; align-items: center; height: 70px;}
.mypage_applications_list .head li p{ font-size: 16px; font-weight: 600; color: #000;}
.mypage_applications_list .body li{}
.mypage_applications_list .body li .wrap{ display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: 20px 0; border-bottom: 1px solid #e5e5e5; transition: all .3s;}
.mypage_applications_list .body li .wrap:hover{ background: #f6f8fb;}
.mypage_applications_list .body li .wrap .number{ width: 6%; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #333;}
.mypage_applications_list .body li .wrap .tag{ width: 13%; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; color: #333;}
.mypage_applications_list .body li .wrap .tit{ flex: 1; display: flex; align-items: center; padding: 0 20px;}
.mypage_applications_list .body li .wrap .tit a{ max-width: 100%; line-height: 25px; font-size: 15px; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.mypage_applications_list .body li .wrap .tit a:hover{ font-weight: 500; color: #00a7d0;}
.mypage_applications_list .body li .wrap .date{ width: 12%; display: flex; justify-content: center; align-items: center; text-align: center; list-style: 1.2; font-size: 14px; color: #333;}
.mypage_applications_list .body li .wrap .user{ width: 15%; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #333;}
.mypage_applications_list .body li .wrap .click{ width: 10%; display: flex; justify-content: center; align-items: center;}
.mypage_applications_list .body li .wrap .click .state{ display: flex; justify-content: center; align-items: center; padding: 0 10px; min-width: 70px; height: 35px; border-radius: 20px; background: #999; font-size: 13px; font-weight: 600; color: #FFF; white-space: nowrap;}
.mypage_applications_list .body li .wrap .click .state.type1{ background: #1a9c4a;}
.mypage_applications_list .body li .wrap .click .state.type2{ background: #f0921e;}
.mypage_applications_list .body li .wrap .click .state.type3{ background: #e03131;}
.mypage_applications_list .body li .wrap .click .state.type4{ background: #2e71e9;}
.mypage_applications_list .body li .wrap .answer{ width: 10%; display: flex; justify-content: center; align-items: center;}
.mypage_applications_list .body li .wrap .answer a{ display: flex; justify-content: center; align-items: center; padding: 0 10px; height: 35px; border-radius: 20px; border: 1px solid #ddd; background: #FFF; font-size: 13px; font-weight: 500; color: #333; white-space: nowrap; cursor: pointer; transition: all .2s;}
.mypage_applications_list .body li .wrap .answer a:hover{ border-color: #222; background: #222; color: #FFF;}
.mypage_applications_list .body li .wrap .m_show{ display: none;}
@media(max-width: 1400px){
    .mypage_applications_list .body li .wrap .tit{ padding: 0 10px;}
}
@media(max-width: 767px){
    .mypage_applications_list{ margin-top: 1rem; border-top: 2px solid #222;}
    .mypage_applications_list .head{ display: none;}
    .mypage_applications_list .body li .wrap{ grid-gap: 0.8rem 0.5rem; padding: 1.5rem 1rem;}
    .mypage_applications_list .body li .wrap .number{ flex: initial; justify-content: flex-start; width: auto; font-size: 1.1rem;}
    .mypage_applications_list .body li .wrap .tag{ flex: 1; justify-content: flex-start; width: auto; font-size: 1.1rem;}
    .mypage_applications_list .body li .wrap .tit{ flex: initial; justify-content: flex-start; padding: 0; width: 100%;}
    .mypage_applications_list .body li .wrap .tit a{ max-width: 100%; line-height: 1.2; font-size: 1.2rem; font-weight: 500;}
    .mypage_applications_list .body li .wrap .date{ flex: 1 0 100%; justify-content: flex-start; font-size: 1rem;}
    .mypage_applications_list .body li .wrap .date br{ display: none;}
    .mypage_applications_list .body li .wrap .user{ flex: 1 0 100%; justify-content: flex-start; font-size: 1rem;}
    .mypage_applications_list .body li .wrap .click{ width: auto;}
    .mypage_applications_list .body li .wrap .click .state{ padding: 0 1rem; height: 2.2rem; font-size: 1rem;}
    .mypage_applications_list .body li .wrap .answer{ width: auto;}
    .mypage_applications_list .body li .wrap .answer a{ padding: 0 1rem; height: 2.2rem; font-size: 1rem;}
    .mypage_applications_list .body li .wrap .m_show{ display: block; margin-right: 0.5rem; font-weight: 600; color: #000;}
}


.mypage_applications_view{ display: grid; grid-gap: 40px;}
.mypage_applications_view .legend{ display: flex; flex-wrap: wrap; grid-gap: 10px 25px;}
.mypage_applications_view .legend p{ display: flex; align-items: center; font-size: 14px; color: #666;}
.mypage_applications_view .legend p:before{ content: ""; display: block; margin-right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #999;}
.mypage_applications_view .legend p.type2:before{ background: #2f6fe0;}
.mypage_applications_view .legend p.type3:before{ background: #f0921e;}

.mypage_applications_view .section{}
.mypage_applications_view .section .s_head{ display: flex; justify-content: space-between; align-items: center; grid-gap: 20px; padding: 0 0 15px 0; border-bottom: 1px solid #000;}
.mypage_applications_view .section .s_head .tit{ display: flex; align-items: center; font-size: 20px; font-weight: 700; color: #000;}
.mypage_applications_view .section .s_head .tit span{ display: flex; justify-content: center; align-items: center; margin-right: 8px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #666; font-size: 11px; font-weight: 500; color: #333;}
.mypage_applications_view .section .s_head .note{ font-size: 13px; color: #999; text-align: right;}

.mypage_applications_view .table{}
.mypage_applications_view .table .row{ display: flex; flex-wrap: wrap; border-bottom: 1px solid #e5e5e5;}
.mypage_applications_view .table .th{ flex: 0 0 165px; display: flex; align-items: center; padding: 14px 20px; background: #f6f8fb; line-height: 1.4; font-size: 15px; font-weight: 600; color: #333;}
.mypage_applications_view .table .td{ flex: 1; display: flex; align-items: center; padding: 14px 20px; min-width: 0; border-left: 1px solid #e5e5e5; line-height: 1.4; font-size: 15px; color: #000; word-break: break-all;}
.mypage_applications_view .table .td + .th{ border-left: 1px solid #e5e5e5;}
.mypage_applications_view .table .td span{ margin-left: 3px; font-size: 13px; color: #999;}

.mypage_applications_view .file{}
.mypage_applications_view .file .row{ display: flex; justify-content: space-between; align-items: center; grid-gap: 20px; padding: 14px 20px; border-bottom: 1px solid #e5e5e5;}
.mypage_applications_view .file .row a{ font-size: 15px; color: #2f6fe0; text-decoration: underline; word-break: break-all; cursor: pointer;}
.mypage_applications_view .file .row a:hover{ color: #00a7d0;}
.mypage_applications_view .file .row .state{ display: flex; justify-content: center; align-items: center; padding: 0 12px; height: 28px; border-radius: 20px; background: #1a9c4a; font-size: 13px; font-weight: 600; color: #FFF; white-space: nowrap;}

.mypage_applications_view .issue{ display: flex; flex-wrap: wrap; grid-gap: 10px; padding: 20px 0 0 0;}
.mypage_applications_view .issue .btn{ display: flex; justify-content: center; align-items: center; padding: 0 20px; height: 45px; border-radius: 10px; border: 1px solid #333; background: #FFF; font-size: 15px; font-weight: 600; color: #000; cursor: pointer; transition: all .2s;}
.mypage_applications_view .issue .btn:hover{ background: #333; color: #FFF;}
.mypage_applications_view .issue .btn.off{ border-color: #e5e5e5; background: #f5f5f5; font-weight: 400; color: #aaa; cursor: default;}
.mypage_applications_view .issue .btn.off:hover{ background: #f5f5f5; color: #aaa;}

.mypage_applications_view .notice,
.mypage_classroom_notice{ margin-top: 20px; padding: 18px 20px; border: 1px dashed #ccc; border-radius: 10px; background: #fafafa; line-height: 1.6; font-size: 14px; color: #666; word-break: keep-all;}
.mypage_applications_view .notice b,
.mypage_classroom_notice b{ font-weight: 700; color: #333;}

@media(max-width: 1000px){
    .mypage_applications_view .table .th{ flex: 0 0 140px; padding: 12px 15px;}
    .mypage_applications_view .table .td{ padding: 12px 15px;}
}
@media(max-width: 767px){
    .mypage_applications_view .legend{ grid-gap: 0.5rem 1.2rem;}
    .mypage_applications_view .legend p{ font-size: 1rem;}
    .mypage_applications_view .legend p:before{ margin-right: 0.4rem; width: 0.8rem; height: 0.8rem;}
    .mypage_applications_view .section{}
    .mypage_applications_view .section .s_head{ display: block; padding: 0 0 1rem 0;}
    .mypage_applications_view .section .s_head .tit{ font-size: 1.4rem;}
    .mypage_applications_view .section .s_head .tit span{ margin-right: 0.5rem; width: 1.4rem; height: 1.4rem; font-size: 0.9rem;}
    .mypage_applications_view .section .s_head .note{ margin-top: 0.5rem; font-size: 1rem; text-align: left;}
    .mypage_applications_view .table .row{ display: grid;}
    .mypage_applications_view .table .th{ flex: initial; padding: 1rem 1rem 0 1rem; background: #FFF; font-size: 1.1rem; font-weight: 600;}
    .mypage_applications_view .table .td{ flex: initial; padding: 0.5rem 1rem 1rem 1rem; border-left: 0; font-size: 1.1rem;}
    .mypage_applications_view .table .td + .th{ border-top: 1px solid #e5e5e5; border-left: 0;}
    .mypage_applications_view .table .td span{ font-size: 1rem;}
    .mypage_applications_view .file .row{ grid-gap: 1rem; padding: 1rem;}
    .mypage_applications_view .file .row a{ font-size: 1.1rem;}
    .mypage_applications_view .file .row .state{ padding: 0 0.8rem; height: 2rem; font-size: 1rem;}
    .mypage_applications_view .issue{ grid-gap: 0.5rem; padding: 1rem 0 0 0;}
    .mypage_applications_view .issue .btn{ width: 100%; padding: 0 1rem; height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_applications_view .notice{ margin-top: 2rem; padding: 1rem; border-radius: 0.5rem; font-size: 1rem;}
    .mypage_applications_view .modle_btn a{ padding: 0 1.5rem;}
}


.mypage_classroom{ display: grid; grid-gap: 20px; margin-top: 20px;}
.mypage_classroom .wrap{ padding: 30px; border-radius: 15px; border: 1px solid #e5e5e5; background: #FFF;}
.mypage_classroom .wrap .ft{ display: flex; justify-content: space-between; align-items: flex-start; grid-gap: 20px;}
.mypage_classroom .wrap .ft .tit{ flex: 1; line-height: 1.4; font-size: 20px; font-weight: 700; color: #000;}
.mypage_classroom .wrap .ft .state{ display: flex; justify-content: center; align-items: center; padding: 0 15px; height: 30px; border-radius: 10px; background: #999; font-size: 14px; font-weight: 500; color: #FFF; white-space: nowrap;}
.mypage_classroom .wrap .ft .state.type1{ background: #f0921e;}
.mypage_classroom .wrap .ft .state.type2{ background: #1a9c4a;}
.mypage_classroom .wrap .ft .tit .type{ display: inline-flex; justify-content: center; align-items: center; margin-left: 5px; padding: 0 12px; height: 26px; border-radius: 30px; border: 1px solid #ddd; background: #FFF; vertical-align: 3px; font-size: 13px; font-weight: 500; color: #666; white-space: nowrap;}
.mypage_classroom .wrap .ft .tit .type.type1{ border-color: #4c8dff; color: #4c8dff;}
.mypage_classroom .wrap .ft .tit .type.type2{ border-color: #ddd; color: #666;}
.mypage_classroom .wrap .ft .tit .type.type3{ border-color: #1a9c4a; color: #1a9c4a;}
.mypage_classroom .wrap .info{ display: flex; flex-wrap: wrap; align-items: center; margin-top: 15px; padding-bottom: 20px; border-bottom: 1px dashed #ddd;}
.mypage_classroom .wrap .info p{ font-size: 14px; color: #666;}
.mypage_classroom .wrap .info p b{ margin-right: 5px; font-weight: 600; color: #333;}
.mypage_classroom .wrap .info span{ display: block; margin: 0 15px; width: 1px; height: 14px; background: #ddd;}
.mypage_classroom .wrap .btn_group{ display: flex; flex-wrap: wrap; grid-gap: 8px; margin-top: 20px;}
.mypage_classroom .wrap .btn_group .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; padding: 0 20px; height: 45px; border-radius: 10px; border: 1px solid #ddd; background: #FFF; font-size: 15px; font-weight: 500; color: #333; white-space: nowrap; cursor: pointer; transition: all .2s;}
.mypage_classroom .wrap .btn_group .btn svg{ width: 20px; height: 20px;}
.mypage_classroom .wrap .btn_group .btn:hover{ border-color: #333; color: #000;}
.mypage_classroom .wrap .btn_group .btn.on{ border-color: #333; background: #333; font-weight: 600; color: #FFF;}
.mypage_classroom .wrap .btn_group .btn.on svg path{ color: #FFF;}
.mypage_classroom .wrap .btn_group .btn.on:hover{ border-color: #000; background: #000; color: #FFF;}
.mypage_classroom .wrap .btn_group .btn.green{ border-color: #1a9c4a; background: #1a9c4a; font-weight: 600; color: #FFF;}
.mypage_classroom .wrap .btn_group .btn.green:hover{ border-color: #158340; background: #158340; color: #FFF;}
.mypage_classroom .wrap .btn_group .btn.off{ border-color: #e5e5e5; background: #f5f5f5; font-weight: 400; color: #aaa; cursor: default;}
.mypage_classroom .wrap .btn_group .btn.off:hover{ border-color: #e5e5e5; color: #aaa;}
.mypage_classroom_notice{ margin-top: 20px;}
@media(max-width: 1000px){
    .mypage_classroom .wrap{ padding: 20px;}
}
@media(max-width: 767px){
    .mypage_classroom{ grid-gap: 1rem; margin-top: 1rem;}
    .mypage_classroom .wrap{ padding: 1.5rem; border-radius: 0.6rem;}
    .mypage_classroom .wrap .ft{ grid-gap: 1rem;}
    .mypage_classroom .wrap .ft .tit{ font-size: 1.3rem;}
    .mypage_classroom .wrap .ft .state{ padding: 0 0.8rem; height: 2rem; font-size: 1rem;}
    .mypage_classroom .wrap .ft .tit .type{ margin-left: 0.4rem; padding: 0 0.8rem; height: 1.9rem; vertical-align: 0.2rem; font-size: 1rem;}
    .mypage_classroom .wrap .info{ display: grid; grid-gap: 0.6rem; margin-top: 1rem; padding-bottom: 1.2rem;}
    .mypage_classroom .wrap .info p{ font-size: 1.1rem;}
    .mypage_classroom .wrap .info span{ display: none;}
    .mypage_classroom .wrap .btn_group{ grid-gap: 0.5rem; margin-top: 1.2rem;}
    .mypage_classroom .wrap .btn_group .btn{ flex: 1 0 calc(50% - 0.25rem); grid-gap: 0.4rem; padding: 0 0.5rem; height: 3rem; border-radius: 0.5rem; font-size: 1rem;}
    .mypage_classroom .wrap .btn_group .btn svg{ width: 1.4rem; height: 1.4rem;}
    .mypage_classroom_notice{ margin-top: 1rem;}
}


.mypage_classroom_survey{ display: grid; grid-gap: 15px; margin-top: 30px;}
.mypage_classroom_survey .wrap{ padding: 25px 30px; border-radius: 8px; border: 1px solid #e5e5e5; background: #FFF;}
.mypage_classroom_survey .wrap .type{ font-size: 16px; color: #666;}
.mypage_classroom_survey .wrap .type font{ margin-left: 2px; color: #F00;}
.mypage_classroom_survey .wrap .q_tit{ margin-top: 8px; line-height: 1.5; font-size: 20px; font-weight: 700; color: #000;}
.mypage_classroom_survey .wrap .scale{ margin-top: 25px;}
.mypage_classroom_survey .wrap .scale .num{ display: flex; justify-content: center; align-items: center; grid-gap: 15px;}
.mypage_classroom_survey .wrap .scale .num label{ display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #ddd; background: #FFF; cursor: pointer; transition: all .2s;}
.mypage_classroom_survey .wrap .scale .num label p{ font-size: 15px; color: #666;}
.mypage_classroom_survey .wrap .scale .num label:hover{ border-color: #bbb;}
.mypage_classroom_survey .wrap .scale .num label.on{ border-color: #2f6fe0; background: #2f6fe0;}
.mypage_classroom_survey .wrap .scale .num label.on p{ font-weight: 600; color: #FFF;}
.mypage_classroom_survey .wrap .scale .ft{ display: flex; justify-content: space-between; align-items: center; grid-gap: 10px; margin-top: 20px;}
.mypage_classroom_survey .wrap .scale .ft p{ font-size: 13px; color: #999;}
.mypage_classroom_survey .wrap .radio{ display: grid; grid-gap: 10px; margin-top: 20px;}
.mypage_classroom_survey .wrap .radio label{ display: flex; align-items: center; grid-gap: 12px; padding: 15px 20px; border-radius: 8px; border: 1px solid #e5e5e5; background: #FFF; cursor: pointer; transition: all .2s;}
.mypage_classroom_survey .wrap .radio label .icon{ flex: 0 0 20px; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; background: #FFF; transition: all .2s;}
.mypage_classroom_survey .wrap .radio label .icon:before{ content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: #FFF; transition: all .2s;}
.mypage_classroom_survey .wrap .radio label p{ flex: 1; line-height: 1.4; font-size: 15px; color: #333;}
.mypage_classroom_survey .wrap .radio label:hover{ border-color: #bbb;}
.mypage_classroom_survey .wrap .radio label.on{ border-color: #2f6fe0; background: #f5f9ff;}
.mypage_classroom_survey .wrap .radio label.on .icon{ border-color: #2f6fe0;}
.mypage_classroom_survey .wrap .radio label.on .icon:before{ background: #2f6fe0;}
.mypage_classroom_survey .wrap .radio label.on p{ font-weight: 500; color: #000;}
.mypage_classroom_survey .wrap textarea{ display: block; margin-top: 20px; padding: 15px; width: 100%; height: 100px; resize: none; border-radius: 8px; border: 1px solid #e5e5e5; background: #FFF; line-height: 1.4; font-size: 15px; color: #000; outline: none; -webkit-appearance: none;}
.mypage_classroom_survey .wrap textarea:focus{ border-color: #2f6fe0;}
@media(max-width: 1000px){
    .mypage_classroom_survey .wrap{ padding: 20px;}
}
@media(max-width: 767px){
    .mypage_classroom_survey{ grid-gap: 1rem; margin-top: 1.5rem;}
    .mypage_classroom_survey .wrap{ padding: 1.5rem; border-radius: 0.5rem;}
    .mypage_classroom_survey .wrap .type{ font-size: 1.1rem;}
    .mypage_classroom_survey .wrap .q_tit{ margin-top: 0.5rem; font-size: 1.3rem;}
    .mypage_classroom_survey .wrap .scale{ margin-top: 1.5rem;}
    .mypage_classroom_survey .wrap .scale .num{ grid-gap: 0.6rem;}
    .mypage_classroom_survey .wrap .scale .num label{ flex: 1; width: auto; max-width: 3.2rem; height: 3.2rem;}
    .mypage_classroom_survey .wrap .scale .num label p{ font-size: 1.1rem;}
    .mypage_classroom_survey .wrap .scale .ft{ margin-top: 1.2rem;}
    .mypage_classroom_survey .wrap .scale .ft p{ font-size: 1rem;}
    .mypage_classroom_survey .wrap .radio{ grid-gap: 0.5rem; margin-top: 1.2rem;}
    .mypage_classroom_survey .wrap .radio label{ grid-gap: 0.8rem; padding: 1rem; border-radius: 0.5rem;}
    .mypage_classroom_survey .wrap .radio label .icon{ flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem;}
    .mypage_classroom_survey .wrap .radio label .icon:before{ width: 0.8rem; height: 0.8rem;}
    .mypage_classroom_survey .wrap .radio label p{ font-size: 1.1rem;}
    .mypage_classroom_survey .wrap textarea{ margin-top: 1.2rem; padding: 1rem; height: 8rem; border-radius: 0.5rem; font-size: 1.1rem;}
}


.mypage_test{}
.mypage_test .bar_head{ display: flex; justify-content: space-between; align-items: center; grid-gap: 15px; margin-top: 30px;}
.mypage_test .bar_head .now{ font-size: 14px; color: #666;}
.mypage_test .bar_head .now span{ font-weight: 700; color: #000;}
.mypage_test .bar_head .time{ font-size: 14px; color: #666;}
.mypage_test .bar_head .time span{ font-weight: 700; color: #e03131;}
.mypage_test .bar{ overflow: hidden; margin-top: 10px; width: 100%; height: 6px; border-radius: 3px; background: #e9ecef;}
.mypage_test .bar .gauge{ width: 0; height: 100%; border-radius: 3px; background: #2f6fe0; transition: width .3s;}
.mypage_test .list{ margin-top: 20px; padding: 30px; border-radius: 10px; border: 1px solid #e5e5e5; background: #FFF;}
.mypage_test .list .q{ display: none;}
.mypage_test .list .q.on{ display: block;}
.mypage_test .list .q .num{ display: inline-flex; justify-content: center; align-items: center; padding: 0 20px; height: 35px; border-radius: 30px; background: #222; font-size: 14px; font-weight: 600; color: #FFF;}
.mypage_test .list .q .q_tit{ margin-top: 20px; line-height: 1.5; font-size: 17px; font-weight: 700; color: #000;}
.mypage_test .list .q .radio{ display: grid; grid-gap: 10px; margin-top: 25px;}
.mypage_test .list .q .radio label{ display: flex; align-items: center; grid-gap: 12px; padding: 15px 20px; border-radius: 8px; border: 1px solid #e5e5e5; background: #FFF; cursor: pointer; transition: all .2s;}
.mypage_test .list .q .radio label .icon{ flex: 0 0 20px; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; background: #FFF; transition: all .2s;}
.mypage_test .list .q .radio label .icon:before{ content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: #FFF; transition: all .2s;}
.mypage_test .list .q .radio label p{ flex: 1; line-height: 1.4; font-size: 15px; color: #333;}
.mypage_test .list .q .radio label:hover{ border-color: #bbb;}
.mypage_test .list .q .radio label.on{ border-color: #2f6fe0; background: #f5f9ff;}
.mypage_test .list .q .radio label.on .icon{ border-color: #2f6fe0;}
.mypage_test .list .q .radio label.on .icon:before{ background: #2f6fe0;}
.mypage_test .list .q .radio label.on p{ font-weight: 500; color: #000;}
.mypage_test .list .q .radio.ox{ display: flex; grid-gap: 10px;}
.mypage_test .list .q .radio.ox label{ flex: 1; justify-content: center; max-width: 200px;}
.mypage_test .list .q .radio.ox label p{ flex: initial; font-size: 16px; font-weight: 600;}
.mypage_test .list .q .radio.scale{ display: flex; flex-wrap: wrap; grid-gap: 10px;}
.mypage_test .list .q .radio.scale label{ flex: 1; justify-content: center; padding: 15px 10px;}
.mypage_test .list .q .radio.scale label p{ flex: initial; text-align: center; font-size: 14px;}
.mypage_test .list .q textarea{ display: block; margin-top: 25px; padding: 15px; width: 100%; height: 150px; resize: none; border-radius: 8px; border: 1px solid #e5e5e5; background: #FFF; line-height: 1.4; font-size: 15px; color: #000; outline: none; -webkit-appearance: none;}
.mypage_test .list .q textarea:focus{ border-color: #2f6fe0;}
.mypage_test .foot{ display: flex; justify-content: space-between; align-items: center; grid-gap: 15px; margin-top: 20px;}
.mypage_test .foot .button{ display: flex; justify-content: center; align-items: center; padding: 0 20px; height: 40px; border-radius: 10px; border: 1px solid #ddd; background: #FFF; font-size: 15px; font-weight: 500; color: #333; white-space: nowrap; cursor: pointer; transition: all .2s;}
.mypage_test .foot .button:hover{ border-color: #222;}
.mypage_test .foot .button.next{ border-color: #222; background: #222; font-weight: 600; color: #FFF;}
.mypage_test .foot .button.next:hover{ border-color: #000; background: #000;}
.mypage_test .foot .button.off{ border-color: #f0f0f0; background: #FFF; color: #ccc; cursor: default;}
.mypage_test .foot .button.off:hover{ border-color: #f0f0f0;}
.mypage_test .foot .page{ flex: 1; display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 5px;}
.mypage_test .foot .page p{ display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e5e5e5; background: #FFF; font-size: 14px; color: #999; cursor: pointer; transition: all .2s;}
.mypage_test .foot .page p:hover{ border-color: #bbb; color: #333;}
.mypage_test .foot .page p.done{ border-color: #222; background: #222; font-weight: 600; color: #FFF;}
.mypage_test .foot .page p.on{ border-color: #2f6fe0; background: #FFF; font-weight: 700; color: #2f6fe0;}
.mypage_test .submit{ display: flex; justify-content: center; margin-top: 25px;}
.mypage_test .submit .btn_submit{ display: flex; justify-content: center; align-items: center; padding: 0 35px; height: 50px; border-radius: 5px; background: #7048e8; font-size: 16px; font-weight: 600; color: #FFF; cursor: pointer; transition: all .2s;}
.mypage_test .submit .btn_submit:hover{ background: #5f3dc4;}
@media(max-width: 1000px){
    .mypage_test .list{ padding: 20px;}
}
@media(max-width: 767px){
    .mypage_test{}
    .mypage_test .bar_head{ grid-gap: 1rem; margin-top: 1.5rem;}
    .mypage_test .bar_head .now{ font-size: 1.1rem;}
    .mypage_test .bar_head .time{ font-size: 1.1rem;}
    .mypage_test .bar{ margin-top: 0.6rem; height: 0.4rem;}
    .mypage_test .list{ margin-top: 1rem; padding: 1.5rem; border-radius: 0.5rem;}
    .mypage_test .list .q .num{ padding: 0 1rem; height: 2.2rem; border-radius: 0.3rem; font-size: 1rem;}
    .mypage_test .list .q .q_tit{ margin-top: 1.2rem; font-size: 1.3rem;}
    .mypage_test .list .q .radio{ grid-gap: 0.5rem; margin-top: 1.5rem;}
    .mypage_test .list .q .radio label{ grid-gap: 0.8rem; padding: 1rem; border-radius: 0.5rem;}
    .mypage_test .list .q .radio label .icon{ flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem;}
    .mypage_test .list .q .radio label .icon:before{ width: 0.8rem; height: 0.8rem;}
    .mypage_test .list .q .radio label p{ font-size: 1.1rem;}
    .mypage_test .list .q .radio.ox label{ max-width: none;}
    .mypage_test .list .q .radio.ox label p{ font-size: 1.2rem;}
    .mypage_test .list .q .radio.scale{ display: grid;}
    .mypage_test .list .q .radio.scale label{ justify-content: flex-start; padding: 1rem;}
    .mypage_test .list .q .radio.scale label p{ text-align: left; font-size: 1.1rem;}
    .mypage_test .list .q textarea{ margin-top: 1.5rem; padding: 1rem; height: 10rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_test .foot{ flex-wrap: wrap; grid-gap: 1.2rem 0.5rem; margin-top: 1.2rem;}
    .mypage_test .foot .button{ flex: 1 0 calc(50% - 0.25rem); padding: 0; height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_test .foot .page{ order: 3; flex: 1 0 100%; grid-gap: 0.4rem;}
    .mypage_test .foot .page p{ width: 2.2rem; height: 2.2rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_test .submit{ margin-top: 1.5rem;}
    .mypage_test .submit .btn_submit{ padding: 0; width: 100%; height: 3.2rem; border-radius: 0.4rem; font-size: 1.2rem;}
}


.mypage_test_result{ margin-top: 40px;}
.mypage_test_result .score{ padding: 40px 30px; border-radius: 10px; border: 1px solid #e5e5e5; background: #FFF; text-align: center;}
.mypage_test_result .score .s_tit{ font-size: 15px; color: #999;}
.mypage_test_result .score .num{ margin-top: 12px; line-height: 1.1; font-size: 20px; font-weight: 500; color: #999;}
.mypage_test_result .score .num b{ margin-right: 3px; font-size: 48px; font-weight: 700; color: #000;}
.mypage_test_result .score .pass{ display: inline-flex; justify-content: center; align-items: center; margin-top: 20px; padding: 0 20px; height: 36px; border-radius: 30px; background: #e6f4ea; font-size: 15px; font-weight: 600; color: #1a9c4a;}
.mypage_test_result .score .pass.off{ background: #fdeaea; color: #e03131;}
.mypage_test_result .score .txt{ margin-top: 20px; line-height: 1.4; font-size: 15px; color: #999;}
.mypage_test_result .score .txt b{ font-weight: 600; color: #1a9c4a;}
.mypage_test_result .list{ overflow: hidden; margin-top: 20px; border-radius: 10px; border: 1px solid #ddd;}
.mypage_test_result .list .head{ display: flex; background: #f6f8fb;}
.mypage_test_result .list .head li{ display: flex; justify-content: center; align-items: center; padding: 0 20px; height: 50px;}
.mypage_test_result .list .head li.tit{ flex: 1; justify-content: flex-start;}
.mypage_test_result .list .head li p{ font-size: 15px; font-weight: 600; color: #333;}
.mypage_test_result .list .body li .wrap{ display: flex; align-items: center; padding: 20px 0; border-top: 1px solid #ddd; transition: all .3s;}
.mypage_test_result .list .body li .wrap:hover{ background: #fafbfc;}
.mypage_test_result .list .body li .wrap .tit{ flex: 1; padding: 0 20px; line-height: 1.4; font-size: 15px; color: #333;}
.mypage_test_result .list .body li .wrap .answer{ display: flex; justify-content: center; align-items: center; padding: 0 20px; width: 20%;}
.mypage_test_result .list .body li .wrap .answer .none{ font-size: 15px; color: #bbb;}
.mypage_test_result .list .body li .wrap .state{ display: flex; justify-content: center; align-items: center; padding: 0 15px; min-width: 60px; height: 30px; border-radius: 30px; background: #999; font-size: 13px; font-weight: 500; color: #FFF; white-space: nowrap;}
.mypage_test_result .list .body li .wrap .state.type1{ background: #1a9c4a;}
.mypage_test_result .list .body li .wrap .state.type2{ background: #e03131;}
@media(max-width: 767px){
    .mypage_test_result .score{ padding: 2.5rem 1.5rem; border-radius: 0.5rem;}
    .mypage_test_result .score .s_tit{ font-size: 1.1rem;}
    .mypage_test_result .score .num{ margin-top: 0.8rem; font-size: 1.4rem;}
    .mypage_test_result .score .num b{ font-size: 3.2rem;}
    .mypage_test_result .score .pass{ margin-top: 1.2rem; padding: 0 1.2rem; height: 2.4rem; font-size: 1.1rem;}
    .mypage_test_result .score .txt{ margin-top: 1.2rem; font-size: 1rem;}
    .mypage_test_result .list{ margin-top: 1rem; border-radius: 0.5rem;}
    .mypage_test_result .list .head{}
    .mypage_test_result .list .head li{ padding: 0 1rem;}
    .mypage_test_result .list .body li .wrap{ grid-gap: 1rem; padding: 1.2rem 0;}
    .mypage_test_result .list .body li .wrap .tit{ font-size: 1.1rem;}
    .mypage_test_result .list .body li .wrap .answer{ padding: 0 1rem; width: auto;}
    .mypage_test_result .list .body li .wrap .answer .none{ font-size: 1.1rem;}
    .mypage_test_result .list .body li .wrap .state{ padding: 0 0.8rem; min-width: 0; height: 2.2rem; border-radius: 3rem; font-size: 1rem;}
}


.mypage_print_list{ overflow: hidden;}
.mypage_print_list .head{ display: flex;}
.mypage_print_list .head li{ display: flex; justify-content: center; align-items: center; height: 70px; border-top: 1px solid #ddd; border-bottom: 2px solid #00a7d0;}
.mypage_print_list .head li.tit{ flex: 1;}
.mypage_print_list .head li p{ font-size: 16px; font-weight: 600; color: #000;}
.mypage_print_list .body li{}
.mypage_print_list .body li .wrap{ display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: 15px 0; border-bottom: 1px solid #e5e5e5; transition: all .3s;}
.mypage_print_list .body li .wrap:hover{ background: #f6f8fb;}
.mypage_print_list .body li .wrap > div{ display: flex; justify-content: center; align-items: center; padding: 0 5px; font-size: 14px; color: #333;}
.mypage_print_list .body li .wrap .number{ width: 5%;}
.mypage_print_list .body li .wrap .tag{ width: 12%; font-weight: 600;}
.mypage_print_list .body li .wrap .tit{ flex: 1; justify-content: flex-start; grid-gap: 10px; padding: 0 20px;}
.mypage_print_list .body li .wrap .tit a{ line-height: 1.3; font-size: 15px; color: #000;}
.mypage_print_list .body li .wrap .tit .law{ flex: 0 0 auto; display: flex; justify-content: center; align-items: center; padding: 0 10px; height: 35px; border-radius: 5px; border: 1px solid #ddd; background: #FFF; font-size: 13px; color: #666; white-space: nowrap;}
.mypage_print_list .body li .wrap .date{ width: 13%;}
.mypage_print_list .body li .wrap .code{ width: 12%;}
.mypage_print_list .body li .wrap .issue{ width: 8%;}
.mypage_print_list .body li .wrap .print{ width: 8%;}
.mypage_print_list .body li .wrap .state{ display: flex; justify-content: center; align-items: center; padding: 0 12px; min-width: 70px; height: 35px; border-radius: 30px; background: #999; font-size: 13px; font-weight: 600; color: #FFF; white-space: nowrap;}
.mypage_print_list .body li .wrap .state.type1{ background: #1a9c4a;}
.mypage_print_list .body li .wrap .state.type2{ background: #f0921e;}
.mypage_print_list .body li .wrap .btn{ display: flex; justify-content: center; align-items: center; padding: 0 10px; min-width: 70px; height: 35px; border-radius: 30px; border: 1px solid #222; background: #222; font-size: 13px; font-weight: 600; color: #FFF; white-space: nowrap; cursor: pointer; transition: all .2s;}
.mypage_print_list .body li .wrap .btn:hover{ border-color: #00a7d0; background: #00a7d0;}
.mypage_print_list .body li .wrap .btn.off{ border-color: #e5e5e5; background: #FFF; font-weight: 400; color: #bbb; cursor: default;}
.mypage_print_list .body li .wrap .btn.off:hover{ border-color: #e5e5e5; background: #FFF; color: #bbb;}
.mypage_print_list .body li .wrap .m_show{ display: none;}
@media(max-width: 1400px){
    .mypage_print_list .body li .wrap .tit{ grid-gap: 8px; padding: 0 10px;}
    .mypage_print_list .body li .wrap > div{ font-size: 14px;}
}
@media(max-width: 767px){
    .mypage_print_list{ margin-top: 1rem; border-top: 2px solid #222;}
    .mypage_print_list .head{ display: none;}
    .mypage_print_list .body li .wrap{ grid-gap: 0.8rem 0.5rem; padding: 1.5rem 1rem;}
    .mypage_print_list .body li .wrap > div{ justify-content: flex-start; padding: 0; width: auto; font-size: 1.1rem;}
    .mypage_print_list .body li .wrap .number{ flex: initial;}
    .mypage_print_list .body li .wrap .tag{ flex: 1; font-weight: 600;}
    .mypage_print_list .body li .wrap .tit{ flex: initial; flex-wrap: wrap; grid-gap: 0.5rem; padding: 0; width: 100%;}
    .mypage_print_list .body li .wrap .tit a{ font-size: 1.2rem; font-weight: 500;}
    .mypage_print_list .body li .wrap .tit .law{ padding: 0 0.8rem; height: 2.2rem; border-radius: 0.5rem; font-size: 0.9rem;}
    .mypage_print_list .body li .wrap .date{ flex: 1 0 100%; font-size: 1rem;}
    .mypage_print_list .body li .wrap .code{ flex: 1 0 100%; font-size: 1rem;}
    .mypage_print_list .body li .wrap .issue{ width: auto;}
    .mypage_print_list .body li .wrap .print{ width: auto;}
    .mypage_print_list .body li .wrap .state{ padding: 0 1rem; min-width: 0; height: 2.2rem; border-radius: 3rem; font-size: 1rem;}
    .mypage_print_list .body li .wrap .btn{ padding: 0 1rem; min-width: 0; height: 2.2rem; border-radius: 3rem; font-size: 1rem;}
    .mypage_print_list .body li .wrap .m_show{ display: block; margin-right: 0.5rem; font-size: 1rem; font-weight: 500; color: #000;}
}


.mypage_payment_list{ overflow: hidden;}
.mypage_payment_list .head{ display: flex;}
.mypage_payment_list .head li{ display: flex; justify-content: center; align-items: center; height: 70px; border-top: 1px solid #ddd; border-bottom: 2px solid #00a7d0;}
.mypage_payment_list .head li.tit{ flex: 1;}
.mypage_payment_list .head li p{ font-size: 16px; font-weight: 600; color: #000;}
.mypage_payment_list .body li{}
.mypage_payment_list .body li .wrap{ display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: 15px 0; border-bottom: 1px solid #e5e5e5; transition: all .3s;}
.mypage_payment_list .body li .wrap:hover{ background: #f6f8fb;}
.mypage_payment_list .body li .wrap > div{ display: flex; justify-content: center; align-items: center; padding: 0 5px; font-size: 15px; color: #333;}
.mypage_payment_list .body li .wrap .number{ width: 5%;}
.mypage_payment_list .body li .wrap .tag{ width: 12%;}
.mypage_payment_list .body li .wrap .tag p{ display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; color: #000;}
.mypage_payment_list .body li .wrap .tit{ flex: 1; justify-content: center; padding: 0 20px;}
.mypage_payment_list .body li .wrap .tit a{ max-width: 100%; text-align: center; line-height: 1.2; font-size: 15px; color: #000;}
.mypage_payment_list .body li .wrap .pay{ width: 13%;}
.mypage_payment_list .body li .wrap .price{ width: 9%; font-weight: 500; color: #F00;}
.mypage_payment_list .body li .wrap .date{ width: 11%;}
.mypage_payment_list .body li .wrap .receipt{ width: 8%;}
.mypage_payment_list .body li .wrap .state{ width: 9%;}
.mypage_payment_list .body li .wrap .manage{ width: 10%;}
.mypage_payment_list .body li .wrap .manage .none{ color: #bbb;}
.mypage_payment_list .body li .wrap .tag_state{ display: flex; justify-content: center; align-items: center; padding: 0 12px; min-width: 70px; height: 35px; border-radius: 20px; background: #999; font-size: 14px; font-weight: 600; color: #FFF; white-space: nowrap;}
.mypage_payment_list .body li .wrap .tag_state.type1{ background: #1a9c4a;}
.mypage_payment_list .body li .wrap .tag_state.type2{ background: #f0921e;}
.mypage_payment_list .body li .wrap .tag_state.type3{ background: #999;}
.mypage_payment_list .body li .wrap .btn{ display: flex; justify-content: center; align-items: center; padding: 0 12px; min-width: 70px; height: 35px; border-radius: 20px; border: 1px solid #ddd; background: #FFF; font-size: 13px; font-weight: 500; color: #333; white-space: nowrap; cursor: pointer; transition: all .2s;}
.mypage_payment_list .body li .wrap .btn:hover{ border-color: #222; background: #222; color: #FFF;}
.mypage_payment_list .body li .wrap .btn.type1{ border-color: #e03131; background: #e03131; font-weight: 600; color: #FFF;}
.mypage_payment_list .body li .wrap .btn.type1:hover{ border-color: #c92a2a; background: #c92a2a;}
.mypage_payment_list .body li .wrap .btn.type2{ border-color: #7048e8; background: #7048e8; font-weight: 600; color: #FFF;}
.mypage_payment_list .body li .wrap .btn.type2:hover{ border-color: #5f3dc4; background: #5f3dc4;}
.mypage_payment_list .body li .wrap .m_show{ display: none;}
@media(max-width: 1400px){
    .mypage_payment_list .body li .wrap .tit{ padding: 0 10px;}
    .mypage_payment_list .body li .wrap > div{ font-size: 14px;}
}
@media(max-width: 767px){
    .mypage_payment_list{ margin-top: 1rem; border-top: 2px solid #222;}
    .mypage_payment_list .head{ display: none;}
    .mypage_payment_list .body li .wrap{ grid-gap: 1rem 0.5rem; padding: 1.5rem 1rem;}
    .mypage_payment_list .body li .wrap > div{ justify-content: flex-start; padding: 0; width: auto; font-size: 1.1rem;}
    .mypage_payment_list .body li .wrap .number{ flex: initial; padding-right: 0.2rem; width: auto; font-size: 1.1rem;}
    .mypage_payment_list .body li .wrap .tag{ flex: 1;}
    .mypage_payment_list .body li .wrap .tag p{ justify-content: flex-start; padding: 0; max-width: none; min-height: 0; border: 0; background: none; text-align: left; font-weight: 600; font-size: 1.1rem;}
    .mypage_payment_list .body li .wrap .tit{ flex: initial; justify-content: flex-start; padding: 0; width: 100%;}
    .mypage_payment_list .body li .wrap .tit a{ font-size: 1.2rem; font-weight: 500;}
    .mypage_payment_list .body li .wrap .pay{ flex: 1 0 100%; font-size: 1.1rem;}
    .mypage_payment_list .body li .wrap .price{ flex: 1 0 100%; font-size: 1.1rem;}
    .mypage_payment_list .body li .wrap .date{ flex: 1 0 100%; font-size: 1.1rem;}
    .mypage_payment_list .body li .wrap .receipt{ width: auto;}
    .mypage_payment_list .body li .wrap .state{ width: auto;}
    .mypage_payment_list .body li .wrap .manage{ width: auto;}
    .mypage_payment_list .body li .wrap .tag_state{ padding: 0 1rem; min-width: 0; height: 2.2rem; border-radius: 2rem; font-size: 1rem;}
    .mypage_payment_list .body li .wrap .btn{ padding: 0 1rem; min-width: 0; height: 2.2rem; border-radius: 2rem; font-size: 1rem;}
    .mypage_payment_list .body li .wrap .m_show{ display: block; margin-right: 0.5rem; font-size: 1rem; font-weight: 500; color: #000;}
}




.mypage_profile{ margin-top: 20px; border-top: 1px solid #000;}
.mypage_profile .table .row{ display: flex; align-items: stretch; border-bottom: 1px solid #ddd;}
.mypage_profile .table .th{ flex: 0 0 200px; display: flex; align-items: center; padding: 20px; background: #f6f8fb; line-height: 1.4; font-size: 16px; font-weight: 600; color: #333;}
.mypage_profile .table .th font{ margin-left: 3px; color: #F00;}
.mypage_profile .table .td{ flex: 1; display: grid; grid-gap: 10px; padding: 15px 20px; min-width: 0; border-left: 1px solid #e5e5e5;}
.mypage_profile .table .td .fix{ display: inline-flex; align-items: center; justify-self: flex-start; padding: 0 15px; height: 40px; border-radius: 10px; background: #000; font-size: 15px; font-weight: 600; color: #FFF;}
.mypage_profile .table .td input{ display: flex; align-items: center; margin: 0; padding: 0 15px; max-width: 320px; width: 100%; height: 45px; border-radius: 10px; border: 1px solid #ddd; background: #FFF; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.mypage_profile .table .td input:focus{ border-color: #00a7d0;}
.mypage_profile .table .td .ft{ display: flex; align-items: center; grid-gap: 10px;}
.mypage_profile .table .td .ft .btn{ display: flex; justify-content: center; align-items: center; padding: 0 20px; height: 45px; border-radius: 10px; border: 1px solid #000; background: #FFF; font-size: 15px; font-weight: 600; color: #000; white-space: nowrap; cursor: pointer; transition: all .2s;}
.mypage_profile .table .td .ft .btn:hover{ border-color: #222; background: #222; color: #FFF;}
.mypage_profile .table .td .help{ line-height: 1.4; font-size: 13px; color: #999;}
.mypage_profile .table .td .radio{ display: flex; flex-wrap: wrap; align-items: center; grid-gap: 10px 20px;}
.mypage_profile .table .td .radio label{ display: flex; align-items: center; grid-gap: 5px; cursor: pointer;}
.mypage_profile .table .td .radio label .icon{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #DDD; background: #f6f8fb; transition: all .2s;}
.mypage_profile .table .td .radio label .icon svg{ width: 14px; height: 14px; color: #bbb;}
.mypage_profile .table .td .radio label p{ font-size: 15px; color: #666;}
.mypage_profile .table .td .radio label.on .icon{ border-color: #00a7d0; background: #00a7d0;}
.mypage_profile .table .td .radio label.on .icon svg path{ color: #FFF;}
.mypage_profile .table .td .radio label.on p{ font-weight: 600; color: #00a7d0;}
.mypage_profile .table .td .radio .help{ margin-left: 5px;}
.mypage_profile_out{ margin-top: 20px; text-align: center;}
.mypage_profile_out a{ font-size: 14px; color: #333; text-decoration: underline; cursor: pointer;}
.mypage_profile_out a:hover{ color: #000;}
@media(max-width: 1000px){
    .mypage_profile .table .th{ flex: 0 0 160px; padding: 15px;}
    .mypage_profile .table .td{ padding: 15px;}
}
@media(max-width: 767px){
    .mypage_profile{ margin-top: 1rem;}
    .mypage_profile .s_head{ padding: 1rem; height: auto;}
    .mypage_profile .s_head .tit{ font-size: 1.2rem;}
    .mypage_profile .table .row{ display: grid;}
    .mypage_profile .table .th{ flex: initial; padding: 1rem 1rem 0 1rem; background: none; font-size: 1.1rem;}
    .mypage_profile .table .td{ padding: 0.5rem 1rem 1rem 1rem; border-top: 0; border-left: 0;}
    .mypage_profile .table .td .fix{ padding: 0 1rem; height: 2.5rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_profile .table .td input{ padding: 0 1rem; max-width: 100%; height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_profile .table .td .ft{ grid-gap: 0.5rem;}
    .mypage_profile .table .td .ft .btn{ padding: 0 1rem; height: 3rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_profile .table .td .help{ font-size: 1rem;}
    .mypage_profile .table .td .radio{ grid-gap: 0.8rem 1.6rem;}
    .mypage_profile .table .td .radio label{ grid-gap: 0.5rem;}
    .mypage_profile .table .td .radio label .icon{ width: 1.6rem; height: 1.6rem;}
    .mypage_profile .table .td .radio label .icon svg{ width: 1rem; height: 1rem;}
    .mypage_profile .table .td .radio label p{ font-size: 1.1rem;}
    .mypage_profile .table .td .radio .help{ margin-left: 0; width: 100%;}
    .mypage_profile_out{ margin-top: 1.2rem;}
    .mypage_profile_out a{ font-size: 1.1rem;}
}


.mypage_out_notice{ margin-top: 20px; padding: 25px 30px; border-radius: 10px; background: #f6f8fb;}
.mypage_out_notice .s_tit{ position: relative; padding-left: 12px; line-height: 1.4; font-size: 17px; font-weight: 600; color: #000;}
.mypage_out_notice .s_tit:before{ content: ""; position: absolute; top: 8px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #00a7d0;}
.mypage_out_notice ul{ display: grid; grid-gap: 8px; margin-top: 15px;}
.mypage_out_notice ul li{ position: relative; padding-left: 12px; line-height: 1.5; font-size: 15px; color: #666;}
.mypage_out_notice ul li:before{ content: "-"; position: absolute; top: 0; left: 0; color: #999;}
.mypage_out_notice ul li b{ font-weight: 600; color: #d92b2b;}
.mypage_out_form .table .td .radio{ display: grid; grid-gap: 10px;}
.mypage_out_form .table .td textarea{ display: block; margin: 5px 0 0 0; padding: 15px; width: 100%; height: 120px; resize: none; border-radius: 10px; border: 1px solid #ddd; background: #FFF; line-height: 1.4; font-size: 15px; color: #000; outline: none; -webkit-appearance: none;}
.mypage_out_form .table .td textarea:focus{ border-color: #00a7d0;}
.mypage_out_agree{ margin-top: 20px;}
.mypage_out_agree .check label{ display: flex; align-items: center; grid-gap: 8px; cursor: pointer;}
.mypage_out_agree .check label .icon{ flex: 0 0 24px; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #DDD; background: #f6f8fb; transition: all .2s;}
.mypage_out_agree .check label .icon svg{ width: 14px; height: 14px; color: #bbb;}
.mypage_out_agree .check label p{ line-height: 1.4; font-size: 15px; color: #666;}
.mypage_out_agree .check label p b{ font-weight: 600; color: #000;}
.mypage_out_agree .check label.on .icon{ border-color: #00a7d0; background: #00a7d0;}
.mypage_out_agree .check label.on .icon svg{ color: #FFF;}
.mypage_out_agree .check label.on p{ color: #000;}
.mypage_out_btn .btn_out.on{ border-color: #d92b2b; background: #d92b2b; color: #FFF;}
.mypage_out_btn .btn_out.on:hover{ border-color: #b71f1f; background: #b71f1f;}
.mypage_out_ok{ text-align: center;}
.mypage_out_ok .icon{ display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 80px; height: 80px; border-radius: 50%; background: #f6f8fb;}
.mypage_out_ok .icon svg{ width: 40px; height: 40px; color: #00a7d0;}
.mypage_out_ok .tit{ margin-top: 25px; line-height: 1.3; font-size: 28px; font-weight: 700; color: #000;}
.mypage_out_ok .txt{ margin-top: 15px; line-height: 1.6; font-size: 16px; color: #666;}
.mypage_out_ok .txt b{ font-weight: 600; color: #000;}
.mypage_out_ok .info{ margin: 35px auto 0 auto; padding: 30px; max-width: 560px; border-radius: 10px; background: #f6f8fb; text-align: left;}
.mypage_out_ok .info .wrap + .wrap{ margin-top: 25px;}
.mypage_out_ok .info .wrap .s_tit{ padding-bottom: 15px; font-size: 17px; font-weight: 600; color: #000;}
.mypage_out_ok .info .wrap .row{ display: flex; align-items: center; grid-gap: 10px; padding: 8px 0;}
.mypage_out_ok .info .wrap .row p{ flex: 0 0 110px; font-size: 15px; color: #999;}
.mypage_out_ok .info .wrap .row span{ flex: 1; font-size: 15px; font-weight: 500; color: #000;}
.mypage_out_ok .modle_btn{ margin-top: 40px;}
@media(max-width: 1000px){
    .mypage_out_notice{ padding: 20px;}
}
@media(max-width: 767px){
    .mypage_out_notice{ margin-top: 1rem; padding: 1.5rem; border-radius: 0.6rem;}
    .mypage_out_notice .s_tit{ padding-left: 0.9rem; font-size: 1.2rem;}
    .mypage_out_notice .s_tit:before{ top: 0.6rem; width: 0.4rem; height: 0.4rem;}
    .mypage_out_notice ul{ grid-gap: 0.6rem; margin-top: 1rem;}
    .mypage_out_notice ul li{ padding-left: 0.9rem; font-size: 1.1rem;}
    .mypage_out_form .table .td .radio{ grid-gap: 0.8rem;}
    .mypage_out_form .table .td textarea{ margin-top: 0.3rem; padding: 1rem; height: 9rem; border-radius: 0.5rem; font-size: 1.1rem;}
    .mypage_out_agree{ margin-top: 1.2rem;}
    .mypage_out_agree .check label{ grid-gap: 0.5rem;}
    .mypage_out_agree .check label .icon{ flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem;}
    .mypage_out_agree .check label .icon svg{ width: 1rem; height: 1rem;}
    .mypage_out_agree .check label p{ font-size: 1.1rem;}
    .mypage_out_ok{ padding: 0;}
    .mypage_out_ok .icon{ width: 5rem; height: 5rem;}
    .mypage_out_ok .icon svg{ width: 2.5rem; height: 2.5rem;}
    .mypage_out_ok .tit{ margin-top: 1.5rem; font-size: 1.8rem;}
    .mypage_out_ok .txt{ margin-top: 1rem; line-height: 1.3; font-size: 1.1rem;}
    .mypage_out_ok .info{ margin-top: 2rem; padding: 1.5rem; border-radius: 0.6rem;}
    .mypage_out_ok .info .wrap + .wrap{ margin-top: 1.5rem;}
    .mypage_out_ok .info .wrap .s_tit{ padding-bottom: 1rem; font-size: 1.2rem;}
    .mypage_out_ok .info .wrap .row{ grid-gap: 0.5rem; padding: 0.5rem 0;}
    .mypage_out_ok .info .wrap .row p{ flex: 0 0 7rem; font-size: 1.1rem;}
    .mypage_out_ok .info .wrap .row span{ font-size: 1.1rem;}
    .mypage_out_ok .modle_btn{ margin-top: 2rem;}
}




















/* ---------------- 푸터 ----------------*/


.policy_terms{ display: grid; grid-gap: 60px; word-break: keep-all;}
.policy_terms section{ display: grid; grid-gap: 30px;}
.policy_terms section h2{ padding-bottom: 15px; border-bottom: 2px solid #000; line-height: 1.2; font-size: 20px; font-weight: 600;}
.policy_terms section article{ display: grid; grid-gap: 10px;}
.policy_terms section article h3{ font-size: 16px; font-weight: 700; color: #333;}
.policy_terms section article p{ line-height: 1.6; font-size: 16px; color:#333;}
.policy_terms section article ul{ display: grid; grid-gap: 10px; margin-left: 20px;}
.policy_terms section article ul > li{ list-style: disc; position: relative; line-height: 1.6; font-size: 16px; color:#333;}
.policy_terms section article ul > li ol{ margin-top: 10px;}
.policy_terms section article ol{ display: grid; grid-gap: 10px; padding-left: 10px;}
.policy_terms section article ol > li{ counter-increment: num; position: relative; padding-left: 25px; line-height: 1.6; font-size: 16px; color:#333;}
.policy_terms section article ol > li::before{ content:counter(num) " "; display: flex; justify-content: center; align-items: center; position: absolute; top: 4px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #333; font-size: 12px; color: #FFF;}
@media(max-width: 767px){
    .policy_terms{ grid-gap: 2.5rem;}
    .policy_terms section{ grid-gap: 2rem;}
    .policy_terms section h2{ padding-bottom: 1rem; font-size: 1.4rem;}
    .policy_terms section article{ grid-gap: 0.8rem;}
    .policy_terms section article h3{ font-size: 1.2rem;}
    .policy_terms section article p{ font-size: 1.1rem;}
    .policy_terms section article ul{ grid-gap: 0.3rem; margin-left: 1.5rem;}
    .policy_terms section article ul > li{ font-size: 1.1rem;}
    .policy_terms section article ul > li ol{ margin-top: 0.8rem;}
    .policy_terms section article ol{ grid-gap: 0.3rem; padding-left: 0.8rem;}
    .policy_terms section article ol > li{ padding-left: 1.6rem; font-size: 1.1rem;}
    .policy_terms section article ol > li::before{ top: 0.3rem; width: 1.2rem; height: 1.2rem; font-size: 0.8rem;}
}


.policy_privacy{ display: grid; grid-gap: 30px; word-break: keep-all;}
.policy_privacy h2{ padding-bottom: 15px; border-bottom: 2px solid #000; line-height: 1.2; font-size: 20px; font-weight: 600;}
.policy_privacy section{ display: grid; grid-gap: 10px;}
.policy_privacy section h4{ font-size: 16px; font-weight: 700; color: #333;}
.policy_privacy section p{ line-height: 1.6; font-size: 16px; color:#333;}
.policy_privacy section p b{ font-weight: 500;}
.policy_privacy section ul{ display: grid; grid-gap: 10px; margin-left: 20px;}
.policy_privacy section ul li{ list-style: disc; position: relative; line-height: 1.6; font-size: 16px; color:#333;}
.policy_privacy section ul{ margin-left: 0;}
.policy_privacy section ul li{ list-style: none;}
.policy_privacy section > ul > li > ul{ margin-left: 20px; margin-top: 5px;}
.policy_privacy section > ul > li > ul > li > ul{ margin-left: 20px; margin-top: 5px;}
.policy_privacy table{ border-collapse: collapse; width: 100%; text-align: center;}
.policy_privacy table thead{ border-top: 1px solid #ddd;}
.policy_privacy table thead th{ padding: 15px 5px; border-bottom: 1px solid #000; background: #f1f5f9; font-size: 16px; font-weight: 500; color: #000;}
.policy_privacy table tbody td{ padding: 15px 5px; border-bottom: 1px solid #ddd; background: #FFF; font-size: 16px; color: #333;}
.policy_privacy .map1{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 10px;}
.policy_privacy .map1 .wrap{ padding: 10px 0; border: 1px solid #ddd; line-height: 1.2; text-align: center;}
.policy_privacy .map1 .wrap:nth-child(3){ grid-column: 3/4; grid-row: 1/3;}
.policy_privacy .map1 .wrap.box{ display: flex; justify-content: center; align-items: center; border: 0; background: #f1f5f9; font-weight: 500; font-size: 16px; color: #000;}
.policy_privacy .map1 .wrap.text{ display: flex; flex-direction: column; align-items: center; background: #FFF;}
.policy_privacy .map1 .wrap.text p{ font-size: 15px; color: #666;}
.policy_privacy .map1 .wrap.text svg{ width: 20px; height: 20px;}
.policy_privacy .map2{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 10px;}
.policy_privacy .map2 .wrap{ padding: 10px 0; border: 1px solid #ddd; line-height: 1.2; text-align: center;}
.policy_privacy .map2 .wrap.box{ display: flex; justify-content: center; align-items: center; border: 0; background: #f1f5f9; font-weight: 500; font-size: 16px; color: #000;}
.policy_privacy .map2 .wrap.text{ display: flex; flex-direction: column; align-items: center; background: #FFF;}
.policy_privacy .map2 .wrap.text p{ font-size: 15px; color: #666;}
.policy_privacy .map2 .wrap.text svg{ width: 20px; height: 20px;}
.policy_privacy .map3{ display: flex; align-items: center; grid-gap: 10px;}
.policy_privacy .map3 .wrap{ width: 100%; text-align: center;}
.policy_privacy .map3 .wrap p:first-child{ font-size: 16px; font-weight: 500; color: #000;}
.policy_privacy .map3 .wrap p:last-child{ font-size: 14px; color: #666;}
.policy_privacy .map3 .wrap .box{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 5px 0; height: 80px; border: 1px solid #ddd; background: #FFF; line-height: 1.2; font-size: 15px; color: #666;}
.policy_privacy .map3 svg{ flex: 0 0 20px; width: 20px; height: 20px;}
@media(max-width: 767px){
    .policy_privacy{ grid-gap: 2rem;}
    .policy_privacy h2{ padding-bottom: 1rem; font-size: 1.4rem;}
    .policy_privacy section{ grid-gap: 0.8rem;}
    .policy_privacy section h4{ font-size: 1.2rem;}
    .policy_privacy section p{ font-size: 1.1rem;}
    .policy_privacy section ul{ grid-gap: 0.3rem; margin-left: 1.5rem;}
    .policy_privacy section ul li{ font-size: 1.1rem;}
    .policy_privacy table thead th{ padding: 1rem 0.2rem; font-size: 1.1rem;}
    .policy_privacy table tbody td{ padding: 1rem 0.2rem; line-height: 1.2; font-size: 0.9rem;}
    .policy_privacy .map1{ grid-gap: 0.5rem;}
    .policy_privacy .map1 .wrap{ padding: 0.5rem 0;}
    .policy_privacy .map1 .wrap.box{ font-size: 1rem;}
    .policy_privacy .map1 .wrap.text p{ font-size: 1rem;}
    .policy_privacy .map1 .wrap.text svg{ width: 1rem; height: 1rem;}
    .policy_privacy .map2{ grid-gap: 0.5rem;}
    .policy_privacy .map2 .wrap{ padding: 0.5rem 0;}
    .policy_privacy .map2 .wrap.box{ font-size: 1.1rem;}
    .policy_privacy .map2 .wrap.text p{ font-size: 0.9rem;}
    .policy_privacy .map2 .wrap.text svg{ width: 1rem; height: 1rem;}
    .policy_privacy .map3{ grid-gap: 0.2rem;}
    .policy_privacy .map3 .wrap p:first-child{ font-size: 1.1rem;}
    .policy_privacy .map3 .wrap p:last-child{ font-size: 0.9rem;}
    .policy_privacy .map3 .wrap .box{ margin: 0.5rem 0; padding: 0 1rem; height: 7rem; font-size: 1rem;}
    .policy_privacy .map3 svg{ flex: 0 0 1rem; width: 1rem; height: 1rem;}
}


.policy_refund{ display: grid; grid-gap: 60px; word-break: keep-all;}
.policy_refund section{ display: grid; grid-gap: 15px;}
.policy_refund h2{ position: relative; padding-left: 18px; line-height: 1.2; font-size: 24px; font-weight: 700; color: #000;}
.policy_refund h2:before{ content: ""; position: absolute; top: 9px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #00a7d0;}
.policy_refund > section > p{ line-height: 1.6; font-size: 16px; color: #333;}
.policy_refund > section > p b{ font-weight: 500; color: #00a7d0;}
.policy_refund .step{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 40px 40px;}
.policy_refund .step .wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 20px; min-height: 176px; border-radius: 10px; border: 1px solid #e5e5e5; background: #FFF; text-align: center;}
.policy_refund .step .wrap:not(:last-child):after{ content: ""; position: absolute; top: 50%; left: 100%; margin: -8px 0 0 17px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #d5d9de;}
.policy_refund .step .wrap .icon{ display: flex; justify-content: center; align-items: center; margin-bottom: 18px; width: 56px; height: 56px;}
.policy_refund .step .wrap .icon svg{ width: 44px; height: 44px; color: #00a7d0;}
.policy_refund .step .wrap .tit{ line-height: 1.3; font-size: 17px; font-weight: 700; color: #000;}
.policy_refund .step .wrap .txt{ margin-top: 6px; line-height: 1.3; font-size: 15px; color: #666;}
.policy_refund .step .wrap.end{ border-color: #dde3ec; background: #f6f8fb;}
.policy_refund table{ border-collapse: collapse; width: 100%;}
.policy_refund table th{ padding: 14px 20px; border: 1px solid #ddd; background: #f1f5f9; text-align: center; line-height: 1.6; font-size: 16px; font-weight: 500; color: #000;}
.policy_refund table td{ padding: 14px 20px; border: 1px solid #ddd; background: #FFF; line-height: 1.6; font-size: 16px; color: #333;}
@media(max-width: 1000px){
    .policy_refund .step{ grid-gap: 30px 30px;}
    .policy_refund .step .wrap:not(:last-child):after{ margin-left: 10px;}
}
@media(max-width: 767px){
    .policy_refund{ grid-gap: 2.5rem;}
    .policy_refund section{ grid-gap: 0.8rem;}
    .policy_refund h2{ padding-left: 1.2rem; font-size: 1.4rem;}
    .policy_refund h2:before{ top: 0.5rem; width: 0.5rem; height: 0.5rem;}
    .policy_refund > section > p{ font-size: 1.1rem;}
    .policy_refund .step{ grid-template-columns: repeat(1,1fr); grid-gap: 1.5rem;}
    .policy_refund .step .wrap{ align-items: flex-start; padding: 2rem 1rem 2rem 10rem; min-height: auto; border-radius: 1rem;}
    .policy_refund .step .wrap:not(:last-child):after{ top: initial; bottom: -1.4rem; left: 50%; transform: translate(-50%,0) rotate(90deg); margin: 0; border-top-width: 0.5rem; border-bottom-width: 0.5rem; border-left-width: 0.8rem;}
    .policy_refund .step .wrap .icon{ position: absolute; top: 50%; transform: translate(0,-50%); left: 50px; width: 3.4rem; height: 3.4rem;}
    .policy_refund .step .wrap .icon svg{ width: 2.8rem; height: 2.8rem;}
    .policy_refund .step .wrap .tit{ text-align: left; font-size: 1.2rem;}
    .policy_refund .step .wrap .txt{ margin-top: 0.4rem; text-align: left; font-size: 1rem;}
    .policy_refund table th{ padding: 1rem 0.5rem; font-size: 1rem;}
    .policy_refund table td{ padding: 1rem 0.8rem; font-size: 1rem;}
}


.policy_mail{ line-height: 1.6; font-size: 16px; color: #333;}
.policy_mail span{ font-weight: 500; color: #00a7d0;}
@media(max-width: 767px){
    .policy_mail{ font-size: 1.1rem;}
}


.policy_ad{ word-break: keep-all;}
.policy_ad h2{ position: relative; line-height: 1.4; font-size: 17px; font-weight: 700; color: #000;}
.policy_ad > p{ margin-top: 15px; line-height: 1.6; font-size: 16px; color: #333;}
.policy_ad .table{ margin: 20px 0; border: 1px solid #ddd;}
.policy_ad .table .row{ display: flex; align-items: flex-start; grid-gap: 20px; padding: 18px 20px;}
.policy_ad .table .row + .row{ border-top: 1px solid #eee;}
.policy_ad .table .row .th{ flex: 0 0 100px; line-height: 1.6; font-size: 16px; font-weight: 700; color: #000;}
.policy_ad .table .row .td{ flex: 1; line-height: 1.6; font-size: 16px; font-weight: 500; color: #000;}
.policy_ad .txt{ line-height: 1.6; font-size: 15px; color: #666;}
@media(max-width: 767px){
    .policy_ad h2{ font-size: 1.2rem;}
    .policy_ad > p{ margin-top: 1rem; font-size: 1.1rem;}
    .policy_ad .table{ margin: 1.5rem 0;}
    .policy_ad .table .row{ display: grid; grid-gap: 0.3rem; padding: 1rem 0.5rem;}
    .policy_ad .table .row .th{ font-size: 1.1rem;}
    .policy_ad .table .row .td{ font-size: 1.1rem;}
    .policy_ad .txt{ font-size: 1rem;}
}


.location{ word-break: keep-all;}
.location .map{ overflow: hidden; position: relative; height: 500px; border-radius: 15px; border: 1px solid #ddd; background: #f6f8fb;}
.location .map iframe{ display: block; width: 100%; height: 100%; border: 0;}
.location .info{ display: flex; justify-content: space-between; align-items: flex-end; grid-gap: 30px; margin-top: 30px; padding: 30px 40px; border-radius: 15px; background: #f6f8fb;}
.location .info .fl{ display: grid; grid-gap: 15px;}
.location .info .fl .tit{ line-height: 1.2; font-size: 22px; font-weight: 700; color: #000;}
.location .info .fl ul{ display: grid; grid-gap: 8px;}
.location .info .fl ul li{ display: flex; align-items: flex-start; grid-gap: 10px;}
.location .info .fl ul li span{ flex: 0 0 70px; line-height: 1.6; font-size: 16px; font-weight: 600; color: #00a7d0;}
.location .info .fl ul li p{ line-height: 1.2; font-size: 16px; color: #333;}
.location .info .btn{ display: flex; grid-gap: 10px;}
.location .info .btn a{ display: flex; align-items: center; grid-gap: 8px; padding: 0 20px; height: 45px; border-radius: 30px; border: 1px solid rgba(0 0 0/5%); background: #FFF; transition: all .2s;}
.location .info .btn a img{ display: block; width: 22px; height: 22px;}
.location .info .btn a p{ font-size: 16px; font-weight: 500; color: #333; white-space: nowrap;}
.location .info .btn a:hover{ border-color: #00a7d0; box-shadow: 0 5px 15px 0 rgba(33 67 180/10%);}
.location .info .btn a:hover p{ color: #00a7d0;}
@media(max-width: 1000px){
    .location .map{ height: 400px;}
    .location .info{ flex-direction: column; align-items: flex-start;}
}
@media(max-width: 767px){
    .location .map{ height: 20rem; border-radius: 1rem;}
    .location .info{ grid-gap: 1.5rem; margin-top: 1rem; padding: 2rem; border-radius: 1rem;}
    .location .info .fl{ grid-gap: 1rem;}
    .location .info .fl .tit{ font-size: 1.4rem;}
    .location .info .fl ul{ grid-gap: 0.8rem;}
    .location .info .fl ul li{ flex-direction: column; grid-gap: 0.2rem;}
    .location .info .fl ul li span{ flex: none; font-size: 1rem;}
    .location .info .fl ul li p{ font-size: 1.1rem;}
    .location .info .btn{ grid-gap: 0.5rem; width: 100%;}
    .location .info .btn a{ flex: 1; justify-content: center; grid-gap: 0.4rem; padding: 0 0.5rem; height: 3rem; border-radius: 3rem;}
    .location .info .btn a img{ width: 1.4rem; height: 1.4rem;}
    .location .info .btn a p{ font-size: 1rem;}
}