/* 하연교육 디자인 에셋*/

:root {
    /*하연교육 색상표*/
    --main:#FF9922;
    --main2:#FF8522;
    --main3:#FFA438;
    --main4: #FF7F1E;
    --main5:#FFF6F1;
    --blue:#5492FF;
    --blue2:#EEF4FF;
    --green:#93CA45;
    --green2:#6CAC11;
    --green3:#ABCD03;
    --purple:#785ACD;
    --purple2:#F7F4FF;
    --black:#000000;
    --gray1:#555555;
    --gray2:#777777;
    --gray3:#999999;
    --wh_gray:#F8F8F8;
    --white:#ffffff;
    --yellow:#FFF194;
    --yellow2:#FFFAEC;
    --border1:#dddddd;
    --border2:#d9d9d9;
    --border3:#e4eaf2;
    --border4:#aaaaaa;
    --border5:#eeeeee;

    --point1:#5492FF;
    --point2:#68BCF9;
    --point3:#CC7DF1;
    --point4:#93CA45;
    --point5:#FFB72D;
    --point6:#FFF4D7;
    --point7:#FFEFE0;
    --point8:#FF5C00;
    --point9:#E8F8FF;
    --point10:#0094FF;
    --point11:#DEEBFF;
    --point12:#F6E4FF;
    --point13:#EDFCD7;
    --point14:#638F25;
}

/*폰트-어그로체*/
/* @font-face {
    font-family: 'SBAggro';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.ttf') format("truetype");
    font-display: swap;
} */
@font-face {
    font-family: 'SBAggro';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/SANDBOX/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggro';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/SANDBOX/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggro';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/SANDBOX/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

.hidden {overflow:hidden;}
.mw-526 {width: 100%; max-width:526px;}
.inner {width: 100%; max-width: 1432px; padding: 0 16px; margin: 0 auto;}

/*기본 텍스트 스타일*/
*{font-family:'Pretendard';}
h1{font-size:0;}
h1 a{font-size:0}/*로고 타이틀 - soundOlny*/
h2{font-size:46px;font-weight:700;line-height:55.2px;color:var(--black);letter-spacing:-0.03rem;}
h3{font-size:40px;font-weight:700;line-height:60px;color:var(--black);letter-spacing:-0.03rem;}
h4{font-size:32px;font-weight:700;line-height:42px;color:var(--black);letter-spacing:-0.03rem;}
h5{font-size:24px;font-weight:700;line-height:28.8px;color:var(--black);letter-spacing:-0.03rem;}
P{font-size:24px;font-weight:500;line-height:1.5;color:var(--gray1);letter-spacing:-0.03rem;}
.comment{font-size:14px;line-height:22px;font-weight:500;color:#555;text-align:left;}
.comment.listType::before{display:inline-block;content:'';width:4px;min-width:4px;height:4px;background:#999;margin-right:8px;transform:translateY(-3px);}
.nodata{font-size:14px;line-height:22px;font-weight:500;color:#999;}
.soundOnly{font-size:0;display:none;}
.required{position:relative;display:inline;}
.required::after{position:absolute;top:0;right:-16px;content:'*';color:var(--main2);width:10px;height:10px;}
.important{color:var(--main2) !important;}
.underline{text-decoration:underline;}

/*PC요소&모바일요소*/
.pc_only_b{display:block !important;;}
.pc_only_f{display:flex !important;;}
.m_only_b{display:none !important;}
.m_only_f{display:none !important;}

/*input*/
input:not([type='checkbox'],[type='radio']){width:100%;height:46px;line-height:46px;padding:0 16px;border:1px solid var(--border1);color:var(--black);font-size:14px;font-weight:500;border-radius:4px;}
input:not([type='checkbox'],[type='radio'],:read-only):focus,
textarea:focus{border:1px solid var(--main2);}
input:not([type='checkbox'],[type='radio'])::placeholder,
textarea::placeholder{color:var(--gray3)}
input:not([type='checkbox'],[type='radio']):disabled,
textarea:disabled{background:#eee;color:var(--gray2);}
textarea{width:100%;padding:16px;border:1px solid var(--border1);color:var(--black);font-size:14px;font-weight:500;border-radius:4px;resize:none;}
textarea.textarea{height:160px;}

/*input[type='checkbox']*/
label input[type='checkbox']{display:none;}
label:has(input[type='checkbox']){display:block;position:relative;width:24px;height:24px;border-radius:4px;border:1px solid #aaa;background:url('../img/icons/check.svg')no-repeat center #fff;color:#DDDDDD;padding:0}
label:has(input[type='checkbox']:checked){position:relative;;border:1px solid var(--main2);background:url('../img/icons/check_on.svg')no-repeat center var(--main2);color:#fff;}
.label_chk_wrap p{font-size:16px;font-weight:500;color:#555;}
.label_chk_wrap .allceck{font-size:20px;font-weight:500;color:#000;}
.label_chk_wrap span{font-size:16px;font-weight:500;color:var(--main2)}

/*input[type='radio']*/
input[type="radio"]{width:24px;height:24px;border:1px solid #aaa;padding:0;border-radius:50%;}
input[type="radio"]:checked{background:#fff;border:7px solid var(--main2)}
input[type="radio"]:disabled{background:#fff;border:7px solid var(--border1)}

/*select*/
select{position:relative;display:flex;align-items:center;height:46px;padding: 0 40px 0 16px;border:1px solid var(--border1);border-radius:4px;background:url('../img/icons/icon_dropdown.svg') no-repeat right 16px center;font-size:14px;color:var(--gray1);font-weight:500;appearance:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;}
select option{padding:4px 0;font-size:14px;color:var(--gray1);}

/*button*/
button.h56{height:56px;line-height:54px;border-radius:4px;text-align:center;font-weight:700;font-size:20px;width:100%;}
button.h46{height:46px;line-height:44px;border-radius:4px;text-align:center;font-weight:700;font-size:14px;width:100%;}
button.h40{height:40px;line-height:38px;border-radius:4px;text-align:center;font-weight:700;font-size:14px;width:100%;}
button.type01{background:var(--main2);border:1px solid  var(--main2);color:#fff;}
button.type02{background:#fff;border:1px solid #aaa;color:var(--black)}
button.type03{background:#fff;border:1px solid  var(--main2);color:var(--main2)}

/*중앙영역*/
.md_contents{display:flex;justify-content:center;align-items:center;flex-direction:column;}
.mx_600{max-width:600px;}

/*영역*/
.btn_area{width:100%;;display:flex;justify-content:center;align-items:center;gap:24px}
.label_chk_wrap{display:flex;align-items:center;gap:8px}

/*form_table*/
.form_table{width:100%;}
.form_table th, td{padding:12px 0}
.form_table th{text-align:left;}
.form_table th p{font-size:16px;font-weight:500;color:#000}
.form_table .flex_box{display:flex;align-items:center;}
.form_table .flex_box:has(button){gap:8px}
.form_table .flex_box input:not([type="radio"],[type="checkbox"]){width:292px}
.form_table .flex_box button{width:150px;}
.form_table .flex_box.address{flex-wrap:wrap;gap:8px}
.form_table .flex_box.address .full{width:100%;}
.form_table tr:has(.address) td > .flex_box:first-child{margin-bottom:8px}
.form_table tr:has(.address) th{vertical-align : top;padding-top:24px}
.form_table tr:has(.authen) th{vertical-align : top;padding-top:24px}
.form_table th.top{vertical-align : top;}
.form_table .authen .flex_box:not(:first-child){margin-top:8px}
/*=============================================================*/
/*                      header - GNB(pc)                       */
/*=============================================================*/
header{width:100%;border-bottom:1px solid var(--border1);z-index:999;}
header .header_wraper_m{display:none;}
header .header_wraper_pc{position:relative;display:flex;width:100%;max-width:1432px;height:90px;padding:0 16px;margin:0 auto;justify-content:center;align-items:center;}
header .header_wraper_pc h1{position: absolute; top: calc(50% - 15px); left: 16px;}
header .header_wraper_pc nav{height:100%;display:flex;align-items:center;}
header .header_wraper_pc nav ul{display:flex;gap:80px;}
header .header_wraper_pc nav ul li a{font-size:18px;line-height:21px;color:var(--black);font-weight:600;}
header .header_wraper_pc .login_menu{position:absolute;top:calc((100% - 37px) / 2);right:16px;}
.login_menu{display:flex;justify-content:flex-start;align-items:center;gap:12px}
.login_menu button{height:37px;line-height:35px;border-radius:50px;padding:0 24px;font-weight:700;}
.login_menu button.type02{color:var(--gray1)}
#M_menu{display:none;}
#Fullmenu{display:none;width:100%;border:1px solid var(--border1);border-bottom:1px solid var(--border1);padding:32px 0 60px;position:absolute;top:90px;background:#fff;z-index:999;;}
#Fullmenu .full_menu_wraper{margin:0 auto;}
#Fullmenu .full_menu_wraper > ul{display:flex;justify-content:center;gap:50px}
#Fullmenu .full_menu_wraper > ul > li > a{display:none;}
#Fullmenu .full_menu_wraper .depth2{display:flex;flex-direction:column;align-items:center;gap:16px}
#Fullmenu .full_menu_wraper ul > li:nth-child(3) .depth2{transform:translateX(8px);}
#Fullmenu .full_menu_wraper .depth2 a{font-size:16px;font-weight:600;color:#555}
#Fullmenu .full_menu_wraper .depth2 a:hover{color:var(--main2);border-bottom:1px solid var(--main2);}

/*=============================================================*/
/*                      header - LNB(pc)                       */
/*=============================================================*/
#LNB{width:100%;height:50px;border-bottom:1px solid var(--border1);display:flex;align-items:center;z-index:999;}
#LNB .Lnb_wraper{width:100%;max-width:1432px;height:100%;padding:0 16px;margin:0 auto;display:flex;justify-content:flex-start;align-items:center;}
#LNB .Lnb_wraper > li{width:200px;height:100%;border-left:1px solid var(--border1);display:flex;align-items:center;font-size:14px;color:var(--black)}
#LNB .Lnb_wraper > li:last-child{border-right:1px solid var(--border1);}
#LNB .Lnb_wraper .home {width:56px;}
#LNB .Lnb_wraper .home a {display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
#LNB .Lnb_wraper .depth1{padding:0 16px;color:#777}
#LNB .Lnb_wraper .depth2{position:relative;z-index:99;}
#LNB .Lnb_wraper .depth2 > button{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%;padding:0 16px;font-size:14px;color:#000;}
#LNB .Lnb_wraper .depth2 > button::after{content:'';display:inline-block;width:16px;height:16px;background:url(../img/icons/icon_dropdown.svg)center no-repeat;transition:.3s;}
#LNB .Lnb_wraper .depth2.active > button::after{transform:rotate(-180deg);}
#LNB .Lnb_wraper .depth2_option{position:absolute;top:102%;left:0;width:calc(100% + 2px);padding:24px 16px;margin:0 -1px;border:1px solid var(--border1);border-top:0;display:none;background:#fff;}
#LNB .Lnb_wraper .depth2_option li{font-size:14px;line-height:22px;font-weight:500;color:var(--gray2);}
#LNB .Lnb_wraper .depth2_option li + li{margin-top:16px;}
#LNB .Lnb_wraper .depth2_option li a{display:inline-block;}
#LNB .Lnb_wraper .depth2_option li a:hover{color:var(--black);}
/*=============================================================*/
/*                         footer (pc)                         */
/*=============================================================*/
footer{background:#1B1A1E;padding:60px 0}
footer .txt_area{opacity:.5;display:flex;flex-direction:column;gap:10px;}
footer .txt_area p,footer .txt_area address{font-size:14px;font-weight:700;color:#fff;text-decoration: none;font-style: normal;}
footer .inner{display:flex;justify-content:space-between;}
footer .ft_nav{display:flex;gap:16px;margin-bottom:42px}
footer .ft_nav li a{font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;gap:16px}
footer .ft_nav li:not(:last-child) a::after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#4B4B4B;}
footer .ft_nav li.org a{color:var(--main2)}
footer .ft_right{padding:20px;border: 1px solid #FFFFFF0D;background: #FFFFFF0D;border-radius:10px;}
footer .ft_right .txt01{font-size:14px;font-weight:700;color:var(--main2)}
footer .ft_right a{display:block;font-size:26px;font-weight:700;color:var(--main2);margin:4px 0 16px}
footer .ft_right p:not(.txt01){font-size:14px;line-height:22px;color:#fff;opacity:.5;}
footer .txt_area p span{padding-left:16px}
footer .add_wrap{display:flex;align-items:center;gap:16px;}
footer .add_wrap address{line-height:1.5;}

.modal_wrap {position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.5s;}
.modal_wrap.show {opacity: 1; visibility: visible;}
.modal_wrap .modal_area {width: calc(100% - 32px); max-width: 1000px; height: 86%; max-height: 610px; padding: 40px 40px 60px; border-radius: 10px; background-color: var(--white); overflow: hidden;}
.modal_wrap .modal_area.minH {max-height: 300px;}
.modal_wrap .modal_area .modal_title {display: flex; align-items: center; justify-content: space-between; padding-bottom: 40px;}
.modal_wrap .modal_area .modal_title p {font-size: 32px; color: var(--black); font-weight: 700;}
.modal_wrap .modal_area .modal_content {height: calc(100% - 88px);}
.modal_wrap .modal_area .modal_content .scroll_area {height: 100%; overflow-y: auto; -ms-overflow-style: none;}
.modal_wrap .modal_area .modal_content .scroll_area::-webkit-scrollbar {display: none;}
.modal_wrap .modal_area .modal_content .scroll_area div + div {margin-top: 24px;}
.modal_wrap .modal_area .modal_content .scroll_area p {font-size: 16px; color: var(--gray1); font-weight: 500; line-height: 24px;}
.modal_wrap .modal_area .modal_content .scroll_area p + p {margin-top: 16px;}
.modal_wrap .modal_area .modal_content .scroll_area p b {color: var(--black);}
.modal_wrap .modal_area .modal_content .scroll_area p span {display: block; padding-left: 12px;}


@media (max-width: 1200px) {
    header .header_wraper_pc nav ul {gap: 50px;}
    #Fullmenu .full_menu_wraper > ul {gap: 20px;}
    #Fullmenu .full_menu_wraper ul > li:nth-child(3) .depth2{transform:translateX(6px);}
}
@media (max-width: 1024px) {
    .mw-526 {max-width:100%;}

    /* 하연교육 디자인 에셋(모바일)*/
    h2{font-size:30px;font-weight:700;line-height:40px;color:var(--black)}
    h3{font-size:24px;font-weight:700;line-height:36px;color:var(--black)}
    h4{font-size:22px;font-weight:700;line-height:36px;color:var(--black)}
    h5{font-size:18px;}
    P{font-size:15px;font-weight:500;color:var(--gray1);}
    .label_chk_wrap .allceck{font-size:15px;line-height:18px;}
    .comment.listType{display:flex;}
    .comment.listType::before{transform: translateY(9px);}
    /*PC요소&모바일요소*/
    .pc_only_b{display:none !important;}
    .pc_only_f{display:none !important;}
    .m_only_b{display:block !important;;}
    .m_only_f{display:flex !important;;}

    /*input*/
    textarea.textarea{height:100px;}

    /*중앙영역*/
    .md_contents{padding:0 16px}
    /*영역*/
    .btn_area{gap:8px}

    /*form_table*/
    .form_table .flex_box button{min-width:100px;width:100px;}
    .m_only_b .form_table th{padding-top:24px}

    /*=============================================================*/
    /*                      header - GNB(M)                       */
    /*=============================================================*/
    header{height:64px;}
    header .header_wraper_pc{display:none;}
    header .header_wraper_m{display:flex;width:100%;height:100%;padding:0 16px;justify-content:space-between;align-items:center;}
    #M_menu{display:block;position:fixed;top:0;right:0;width:100%;height:100%;z-index:999;overflow:hidden;opacity:0;visibility:hidden;}
    #M_menu, #M_menu > *{transition:.5s;}
    #M_menu .menu_bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);}
    #M_menu .menu_wrapper{width:88%;height:100%;position:absolute;right:-1000px;top:0;background:#fff;}
    #M_menu .topmenu{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--border1)}
    #M_menu nav .depth1{border-bottom:1px solid var(--border1);}
    #M_menu nav .depth1 > a{display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px;background:#fff;font-size:20px;font-weight:600;line-height:24px;}
    #M_menu nav .depth1 > a::after{content:'';display:inline-block;width:24px;height:24px;background:url(../img/icons/icon_dropdown2.svg)center no-repeat;transition:.3s;}
    #M_menu nav .depth1.on > a{background:#FFF6F1;color:#FF8522}
    #M_menu nav .depth1.on > a::after{transform:rotate(-180deg);}
    #M_menu nav .depth2{display:none;padding:24px;}
    #M_menu nav .depth2 li + li{margin-top:16px;}
    #M_menu nav .depth2 a{font-size:16px;font-weight:600;color:#555;}
    #M_menu.on{opacity:1;visibility:visible;}
    #M_menu.on .menu_bg{opacity:1;}
    #M_menu.on .menu_wrapper{right:0;}
    /*=============================================================*/
    /*                      header - LNB(M)                       */
    /*=============================================================*/
    #LNB .Lnb_wraper{padding:0;}
    #LNB .Lnb_wraper > li:first-child{display:none;}
    #LNB .Lnb_wraper > li:not(:first-child){width:50%;}
    #LNB .Lnb_wraper > li:last-child{border-right:0;}
    #LNB .Lnb_wraper > li:not(:last-child){border-left:0;}
    /*=============================================================*/
    /*                         footer (M)                         */
    /*=============================================================*/
    footer{padding:24px 0 40px}
    footer .inner{flex-direction: column-reverse;}
    footer .ft_nav{flex-wrap:wrap;margin:32px 0;gap:8px}
    footer .ft_nav li a{font-size:13px;gap:8px}
    footer .txt_area p, footer .txt_area address{font-size:13px}
    footer .add_wrap{align-items:flex-start;flex-direction:column;gap:8px}
    footer .txt_area p span{padding-left:8px}
    footer .txt_area{gap:8px}

    .modal_wrap .modal_area {padding: 24px;}
    .modal_wrap .modal_area .modal_title {padding-bottom: 24px;}
    .modal_wrap .modal_area .modal_title p {font-size: 22px;}
    .modal_wrap .modal_area .modal_content {height: calc(100% - 57px);}
    .modal_wrap .modal_area .modal_content .scroll_area p {font-size: 14px; line-height: 20px;}
    .modal_wrap .modal_area .modal_content .scroll_area p span {padding-left: 10px;}
}