@charset "utf-8";

/* 상단 */
#header{position:relative;top:0;left:0;z-index:100;width:100%;transition:background-color 0.2s;/*background:#fff;*/}
#header .header-top{position:relative;margin:0 auto; width:calc(100% - 110px); height:134px;}
/* logo */
#header #logo{position:absolute;top:50%;left:0;transform:translateY(-50%); z-index:1;}
#header #logo a{display:block;height:100%;line-height:0;max-width:265px}
#header #logo a img{height:100%;width:100%}
/* search */
#header .search-wrap{position:relative;margin:0 auto;width:100%;max-width:450px;box-shadow:0 3px 7px rgba(0,0,0,.15);border-radius:15px}
@media only screen and (min-width:1025px) {
    #header .search-wrap{display:block!important}
}
#header .search-wrap input[type="text"]{padding:0 56px 0 20px;width:100%;height:48px;border-radius:15px;border:0 none;font-weight:400;font-size:16px;color:var(--color-dark-gray)}
#header .search-wrap .search{position:absolute;top:0;right:0;padding:0;width:56px;height:48px;background:none;text-align:center}
#header .search-wrap .back{display:none;position:absolute;top:0;left:30px;padding:0;width:30px;height:80px;background:none}
#header .m-search-btn{display:none;line-height:0}
/* logion */
.header-login-wrap{position:absolute;top:41px;right:0;display:flex;align-items:center;gap:8px}
.header-login-wrap .login-utils{display:flex;align-items:center;}
.header-login-wrap .login-utils li{display:inline-block;vertical-align:middle}
.header-login-wrap .login-utils li a{display:block; min-width:56px; height:50px; padding:0 13px; line-height:48px; font-weight:700;font-size:22px; text-align:center; color:#000; /*background:#fff; */border:1px solid #000; border-radius:24px;}
.header-login-wrap .login-utils li.join a{line-height:50px; font-weight:700; color:var(--color-primary); font-family: 'neulis-sans', sans-serif;}
.header-login-wrap .login-utils li.login a {font-weight:900;}
.header-login-wrap .login-menu{display:none;position:absolute;top:100%;right:42px;z-index:110;margin-top:21px;padding:20px;width:160px;border-radius:3px;border:1px solid var(--color-dark-gray);background:#fff}
.header-login-wrap .login-menu .user-name{margin-bottom:15px;font-weight:700;font-size:14px;color:var(--color-dark-gray, #333)}
.header-login-wrap .login-menu .user-name strong{font-weight:800}
.header-login-wrap .login-menu .alarm-wrap{position:absolute;top:20px;right:20px;line-height:0}
.header-login-wrap .login-menu .alarm-wrap .new{position:absolute;top:-8px;right:-10px;width:16px;height:16px;border-radius:50%;background:var(--color-red);font-weight:500;font-size:11px;line-height:16px;color:#fff;text-align:center}
.header-login-wrap .login-menu .user-menu li a{position:relative;display:inline-block;font-weight:500;font-size:18px;line-height:32px;color:#000;transition:.3s}
.header-login-wrap .login-menu .user-menu li a:after{content:'';position:absolute;bottom:5px;left:0;width:100%;height:1px;background:#000;transition:.3s;opacity:0}
.header-login-wrap .login-menu .user-menu li:hover a{font-weight:700}
.header-login-wrap .login-menu .user-menu li:hover a:after{opacity:1}
.login-menu .user-menu .btn-admin{margin-top:7px}
.login-menu .user-menu .btn-admin a{display:inline-flex;gap:5px;align-items:center}
.language-select-box{position:relative;}
.language-select-box .language-select{position:relative;display:none;min-width:90px;padding:14px 14px 15px;font-size:15px;font-weight:500;color:#fff;background:var(--color-dark-gray, #333);border-radius:15px}
/* .language-select-box .language-select:after{content:'';position:absolute;top:50%;right:12px;width:16px;height:16px;background:url(/html/_skin/1/images/common/icon_globe.webp) no-repeat center/contain;transform:translateY(-50%)} */
/* .language-select-box.on .language-select:after{width:11px;height:9px;background-image:url(/html/_skin/1/images/common/icon_select_arrow.webp)} */
/* .language-select-box .language-list{position:absolute;top:100%;left:0;display:none;width:100%;padding:10px 5px 10px 15px;background:#4e4e4e;border-radius:15px;z-index:110} */
.language-select-box .language-list {display:flex; gap:8px;}
/* .language-select-box .language-list li + li{margin-top:5px} */
.language-select-box .language-list a{display:block;width:56px; height:50px; line-height:30px; padding:11px 5px; font-weight:700; font-size:22px; font-family:'neulis-sans', sans-serif; text-align:center; color:#000; background:#fff; border:1px solid #000; border-radius:24px;}
.language-select-box .language-list .on a{color:#fff; background:#000;}

/* .language-select-box .language-list a:where(:hover,.on){color:#fff} */
.header-login-wrap .search-btn {width:35px; height:35px; background:url(/html/_skin/1/images/common/icon_search.png) no-repeat center/contain;}
@media only screen and (max-width:1800px) {
    #header .header-top {width:calc(100% - 6.111vw); height:7.444vw;}
    #header #logo a {width:14.722vw;}
    .header-login-wrap {top:2.278vw;}
    .header-login-wrap .login-utils li a {min-width:3.111vw; height:2.778vw; padding:0 0.722vw; line-height:2.77vw; font-size:1.222vw; border-radius:1.333vw;}
    .header-login-wrap .login-utils li.join a {padding:0.611vw 0.722vw; line-height:1.667vw;}
    .language-select-box .language-list {gap:0.444vw;}
    .language-select-box .language-list a {width:3.111vw; height:2.778vw; line-height:1.667vw; padding:0.611vw 0.278vw; font-size:1.222vw; border-radius:1.333vw;}
    .header-login-wrap .search-btn {width:1.944vw; height:1.944vw;}
}
/* @media only screen and (max-width:1180px) {
    #header .header-top{padding:16px 30px;width:100%;height:80px}
    #header #logo{left:30px}
    .header-login-wrap{top:16px;right:75px;}
    .header-login-wrap .login-utils{background:none;padding-right:0}
    .header-login-wrap .login-menu{right:50px}
} */
@media only screen and (max-width:1024px) {
    .header-login-wrap{top:50%;right:75px;transform:translateY(-50%);z-index:10; gap:15px;}
    .header-login-wrap .login-utils{display:none}
    .language-select-box .language-select{display:block; position:relative; min-width:30px;height:30px;padding:0;background:transparent}
    .language-select-box .language-select span{display:none}
    .language-select-box .language-select:after{content:''; position:absolute;top:0; right:0;width:100%;height:100%;background:url(/html/_skin/1/images/common/icon_globe.svg) no-repeat center/contain}
    .language-select-box.on .language-select:after{width:100%;height:100%;background:url(/html/_skin/1/images/common/icon_globe.svg) no-repeat center/contain}
    /* .language-select-box .language-list{top:calc(100% + 10px);left:-30px;width:90px} */
    .language-select-box .language-list{position:absolute;top:calc(100% + 10px);left:-16px; flex-direction:column; width:60px;padding:10px 5px;background:#4e4e4e;border-radius:15px;z-index:110; display:none;}
    /* .language-select-box .language-list li + li{margin-top:5px} */
    .language-select-box .language-list a{display:block; width:100%; height:auto; padding:3px 0; line-height:1em; font-size:15px;font-weight:500;color:rgba(255,255,255,0.5); text-align:center; background:transparent; border:none;}
    .language-select-box .language-list a:where(:hover,.on){color:#fff}
    .language-select-box .language-list .on a {background:transparent}

    /* #header .m-search-btn{display:block;right:120px} */
    #header .search-wrap{display:none;position:fixed;top:0;left:0;z-index:20;max-width:100%;border-bottom:2px solid var(--color-dark-gray);border-radius:0;box-shadow:none}
    #header .search-wrap input[type="text"]{padding:0 75px;height:80px;border-radius:0;font-size:24px}
    #header .search-wrap .back{display:block}
    #header .search-wrap .search{right:30px;width:30px;height:80px;background:url(../images/common/m_icon_search.png) no-repeat center center}
    #header .search-wrap .search img{display:none}

    #header .header-top {width:calc(100% - 50px); height:80px;}
    /* #header #logo {top:30px; transform:none;} */
    #header #logo a{width:auto; max-width:200px; height:37px;}
    .header-login-wrap {right:55px;}
    .header-login-wrap .m-search-btn {display:none;}
    #header .menu-btn{position:absolute;top:50%; right:0; width:29px;height:25px; z-index:1;cursor:pointer; transform:translateY(-50%);}
    #header .menu-btn.on{top:38px; transform:none; z-index:20}
    #header .menu-btn span{position:absolute;right:0;width:100%;height:3px;background:#000;border-radius:3px;transition:.3s}
    #header .menu-btn span:nth-child(1){top:0}
    #header .menu-btn span:nth-child(2){top:50%; margin-top:-2px;}
    #header .menu-btn span:nth-child(3){bottom:0}
    #header .menu-btn.on span:nth-child(1){top:8px;transform:rotate(-45deg)}
    #header .menu-btn.on span:nth-child(2){display:none;}
    #header .menu-btn.on span:nth-child(3){bottom:14px;transform:rotate(45deg)}
}
@media only screen and (max-width:768px) {
    /* #header .header-top{padding:0 20px;height:70px} */
    #header #logo{left:0;height:30px}
    #header #logo a{max-width:none}
    #header #logo a img{width:auto}
    #header .search-wrap{height:70px}
    #header .search-wrap input[type="text"]{padding:0 60px;height:70px;font-size:18px}
    #header .search-wrap .back{left:0;width:60px;height:70px}
    #header .search-wrap .back img{height:20px}
    #header .search-wrap .search{right:0;width:60px;height:70px;background-size:auto 20px}
    /* #header .m-search-btn{right:90px;margin-top:-10px} */
    #header .m-search-btn img{height:20px}
    .header-login-wrap{right:40px}
    .language-select-box .language-select{min-width:25px}
    .language-select-box .language-select:after{width:100%}
    .language-select-box.on .language-select:after{width:100%}
    .language-select-box .language-list{top:calc(100% + 5px); left:-20px;}
    .language-select-box .language-list a{font-size:14px}

    #header .menu-btn {width:23px; height:21px;}
    /* #header .menu-btn span {height:2px;} */
    #header .menu-btn.on{top:27px; width:25px;height:25px}
    #header .menu-btn.on span {height:2px;}
    #header .menu-btn.on span:nth-child(1) {top:11px;}
    #header .menu-btn.on span:nth-child(3) {bottom:12px;}
}
/* -------- gnb -------- */
#gnb {display:flex; justify-content:center; align-items:center; position:relative;width:100%; height:100%; text-align:center;transition:.3s}
/* .fixed #gnb{position:fixed;top:0;left:0} */
#gnb .gnb-wrap{font-size:0; display:flex;}
.fixed #gnb .sub-depth-box {top:0;}
@media only screen and (max-width:1024px) {
    #gnb {display:none;}
    .gnb-inner{overflow:hidden}
}
@media only screen and (min-width:1024px) {
    #gnb .swiper-wrapper{justify-content:center}
}
#gnb .depth01{position:relative;display:inline-block;width:auto;vertical-align:top; transform:none;}
#gnb .depth01>a{position:relative;display:flex;justify-content:center;align-items:center; height:134px;padding:6px 0 7px; margin:0 15px; font-family:'NanumsquareNeo', sans-serif; font-weight:800;font-size:23px;line-height:28px;color:#000; letter-spacing:-.04em; transition:color .3s}
#gnb .depth01:first-child>a {font-size:24px;}
/* #gnb .depth01 > a:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--color-primary);transition:.3s;transform:scaleX(0)} */
/* #gnb .depth01:hover > a:after{transform:scaleX(1)} */
/* #gnb .depth02{overflow:hidden;position:absolute;top:100%;left:50%;z-index:90;transform:translateX(-50%);width:163px;height:0;background:#fff;transition:.3s} */
#gnb .sub-depth-box {position:fixed; top:134px; left:50%; width:100%; height:0; padding:0; background:rgba(255,255,255,0.95); transform:translateX(-50%); overflow:hidden;transition:height,padding 0.3s;}
/* #gnb .sub-depth-box {height:0;} */
#gnb .depth01:hover>a {color:#85b6ff;}
#gnb .depth01:is(:nth-of-type(2),:nth-of-type(3)):hover>a {color:#ff817e;}
#gnb .depth01:is(:nth-of-type(4),:nth-of-type(5)):hover>a {color:#ffa8d7;}
#gnb .depth01:nth-of-type(6):hover>a {color:#39be91;}
#gnb .depth01:hover .sub-depth-box{height:auto; min-height:225px; padding-top:35px; padding-bottom:20px; box-shadow: 2px 2px 10px 0px rgba(196, 141, 141, 0.3);}
@media only screen and (max-width:1800px) {
    #gnb .depth01>a {height:7.444vw;padding:0.333vw 0 0.389vw; margin:0 0.833vw; font-size:max(15px, 1.278vw); line-height:1.556vw;}
    #gnb .depth01:first-child>a {font-size:1.333vw;}
    #gnb .sub-depth-box {top:7.444vw;}
    #gnb .depth01:hover .sub-depth-box{min-height:12.5vw; padding-top:1.944vw; padding-bottom:1.111vw; box-shadow:0.111vw 0.111vw 0.556vw 0.000vw rgba(196, 141, 141, 0.3);}
}
@media only screen and (min-width:1024px) {
    #gnb .depth01:hover .sub-depth-box{border-top:2px solid #85b6ff;}
    #gnb .depth01:is(:nth-of-type(2),:nth-of-type(3)) .sub-depth-box{border-top-color:#ff817e;}
    #gnb .depth01:is(:nth-of-type(4),:nth-of-type(5)) .sub-depth-box{border-top-color:#ffa8d7;}
    #gnb .depth01:nth-of-type(6) .sub-depth-box{border-color:#39be91;}
}
#gnb .depth02 {display:flex; gap:65px; justify-content:center; width:100%; /*min-width:1810px;*/}
#gnb .depth02>li {width:180px;}
#gnb .depth02 li a{display:block; height:auto; padding:0; font-weight:800;font-size:20px;line-height:2em; color:#000;transition:.3s; letter-spacing:-.04em;}
/* #gnb .depth02 li>a:hover{color:var(--color-primary)} */
#gnb .depth03-list {margin-top:10px;}
/* #gnb .depth03-list li + li {margin-top:5px;} */
#gnb .depth03-list li a {font-weight:600; font-size:18px;}
#gnb .gnb-bg{display:none}
/* -------- menu btn -------- */
#gnb .menu-btn{position:absolute;top:50%;left:50%;z-index:1;margin-top:-9px;margin-left:570px;width:20px;height:18px;cursor:pointer}
#gnb .menu-btn.on{z-index:20}
#gnb .menu-btn span{position:absolute;right:0;width:100%;height:3px;border-radius:3px;background:var(--color-dark-gray);transition:.3s}
#gnb .menu-btn span:nth-child(1){top:0}
#gnb .menu-btn span:nth-child(2){top:50%;margin-top:-1.5px}
#gnb .menu-btn span:nth-child(3){bottom:0}
#gnb .menu-btn.on span:nth-child(1){top:8px;transform:rotate(-45deg)}
#gnb .menu-btn.on span:nth-child(2){right:-100%;opacity:0}
#gnb .menu-btn.on span:nth-child(3){bottom:7px;transform:rotate(45deg)}
@media only screen and (max-width:1800px) {
    #gnb .depth02 {gap:3.611vw;}
    #gnb .depth02>li {width:10vw;}
    #gnb .depth02 li a{font-size:max(13px, 1.111vw);}
    #gnb .depth03-list {margin-top:0.556vw;}
}
@media only screen and (max-width:1180px) {
    #gnb .menu-btn{top:auto;bottom:100%;left:auto;right:30px;margin-top:0;margin-bottom:31px}
}
@media only screen and (max-width:1024px) {
    #header{box-shadow:none}
    #gnb{position:static;border-color:#ddd}
    .fixed #gnb .menu-btn{display:none}
    #gnb .menu-btn{top:27px;margin-bottom:0;width:29px;height:27px}
    #gnb .menu-btn.on{margin-bottom:13px;width:41px;height:41px}
    #gnb .menu-btn span{transition:.3s}
    #gnb .menu-btn.on span:nth-of-type(1){top:19px;transform:rotate(-45deg)}
    #gnb .menu-btn.on span:nth-of-type(2){right:-100%;opacity:0}
    #gnb .menu-btn.on span:nth-of-type(3){bottom:19px;transform:rotate(45deg)}
}
@media only screen and (max-width:768px) {
    /* #header{transition:background-color 0.4s;} */
    /* #header.fixed{position:fixed;top:0; background:#fff;} */
    #gnb{padding:0 6px}
    .fixed #gnb{position:relative}
    #gnb .depth01{margin:0 14px;width:auto}
    #gnb .depth01 a{font-size:16px;line-height:54px}
    .fixed #gnb .menu-btn{display:block;top:-44px}
    #gnb .menu-btn{right:20px;width:20px;height:18px}
    #gnb .menu-btn.on{margin-bottom:28px;width:25px;height:25px}
    #gnb .menu-btn span{height:2px}
    #gnb .menu-btn.on span:nth-of-type(1){top:12px}
    #gnb .menu-btn span:nth-child(2){margin-top:-1px}
    #gnb .menu-btn.on span:nth-of-type(3){bottom:11px}
}
@media only screen and (min-width:1025px) {
    #m-gnb-wrap{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;text-align:center}
    .fixed #m-gnb-wrap{position:fixed;top:60px}
    #m-gnb-wrap .m-header-utils,#m-gnb-wrap .m-user-menu,#m-gnb-wrap .login-utils{display:none}
    #m-gnb-wrap .m-gnb{font-size:0}
    #m-gnb-wrap .m-gnb .depth01{display:inline-block;width:163px;vertical-align:top}
    #m-gnb-wrap .m-gnb .depth01 > a{position:relative;font-size:0}
    #m-gnb-wrap .m-gnb .depth02{padding:17px 0}
    #m-gnb-wrap .m-gnb .depth02 a{display:block;font-weight:400;font-size:15px;line-height:40px;color:var(--color-dark-gray);transition:.3s}
}
@media only screen and (max-width:1024px) {
    /* mobile gnb */
    #m-gnb-wrap{display:none;position:fixed;top:0;right:0;z-index:10;width:100%;height:100vh;background:rgba(0,0,0,.8)}
    #m-gnb-wrap .m-gnb-inner{position:absolute;top:0;right:-100%;padding:85px 0 0;width:80%;max-width:500px;height:100%;background:#fff}
    #m-gnb-wrap .m-header-utils{position:absolute;top:30px;right:88px;font-size:0}
    #m-gnb-wrap .m-header-utils li{display:inline-block;margin-left:20px;vertical-align:top}
    #m-gnb-wrap .m-header-utils li a{position:relative;display:block;line-height:0}
    #m-gnb-wrap .m-header-utils .alarm .new{position:absolute;bottom:100%;left:100%;margin-bottom:-10px;margin-left:-6px;width:18px;height:18px;border-radius:50%;background:var(--color-red);font-weight:500;font-size:14px;line-height:18px;color:#fff;text-align:center}
    #m-gnb-wrap .m-user-menu{margin-bottom:40px}
    #m-gnb-wrap .m-user-menu dt{padding:0 30px;font-weight:600;font-size:36px;line-height:69px;color:#000}
    #m-gnb-wrap .m-user-menu dt strong{font-weight:700}
    #m-gnb-wrap .m-user-menu dt a{display:block;font-weight:700;font-size:36px;line-height:69px;color:#000}
    #m-gnb-wrap .m-user-menu dd{padding:0 30px}
    #m-gnb-wrap .m-user-menu dd a{position:relative;display:block;padding-left:25px;font-weight:500;font-size:36px;line-height:69px;color:#000}
    #m-gnb-wrap .m-user-menu dd a:before{content:'';position:absolute;top:20px;left:0;width:10px;height:10px;border-radius:50%;background:var(--color-dark-gray, #333);}
    #m-gnb-wrap .m-gnb{overflow-x:hidden;max-height:calc(100% - 363px);border-top:1px solid #eee}
    #m-gnb-wrap .m-gnb .depth01 > a{position:relative;display:block;padding:19px 30px 20px;border-bottom:1px solid #eee;font-weight:600;font-size:28px;line-height:1.5em;color:#000}
    #m-gnb-wrap .m-gnb .depth01 > :is(a:before,a:after){content:'';position:absolute;top:50%;right:30px;margin-left:-6.5px;width:13px;height:1px;background:#32186d}
    #m-gnb-wrap .m-gnb .depth01 > a:after{transform:rotate(-90deg)}
    #m-gnb-wrap .m-gnb .depth01.on > a:after{display:none}
    #m-gnb-wrap .m-gnb .depth02{display:none;padding:22px 0;border-bottom:1px solid #eee}
    #m-gnb-wrap .m-gnb .depth02 li a{display:block;padding:0 30px;font-weight:400;font-size:24px;line-height:56px;color:#000}
    #m-gnb-wrap .login-utils{padding:55px 0 30px;font-size:0;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;row-gap:7px}
    #m-gnb-wrap .login-utils li{position:relative;display:inline-block;margin:0 27px;vertical-align:top}
    #m-gnb-wrap .login-utils li:after{content:'';position:absolute;top:50%;right:-27px;margin-top:-10px;width:1px;height:20px;background:var(--color-light-gray,#ccc)}
    #m-gnb-wrap .login-utils li:last-child:after{display:none}
    #m-gnb-wrap .login-utils li a{display:block;font-weight:400;font-size:22px;color:var(--color-light-gray)}
}
@media only screen and (max-width:767px) {
    #m-gnb-wrap .m-gnb-inner{padding-top:50px}
    #m-gnb-wrap .m-header-utils{top:29px;right:66px}
    #m-gnb-wrap .m-header-utils li{margin-left:12px}
    #m-gnb-wrap .m-header-utils li a img{height:21px}
    #m-gnb-wrap .m-header-utils .alarm .new{margin-bottom:-7px;margin-left:-4px;width:13px;height:13px;font-size:9px;line-height:13px}
    #m-gnb-wrap .m-user-menu{margin-bottom:25px}
    #m-gnb-wrap .m-user-menu dt{padding:0 20px;font-size:22px;line-height:50px}
    #m-gnb-wrap .m-user-menu dt a{font-size:22px;line-height:50px}
    #m-gnb-wrap .m-user-menu dd{padding:0 20px}
    #m-gnb-wrap .m-user-menu dd a{padding-left:15px;font-size:18px;line-height:43px}
    #m-gnb-wrap .m-user-menu dd a:before{top:12px;width:7px;height:7px}
    #m-gnb-wrap .m-gnb{max-height:calc(100% - 235px)}
    #m-gnb-wrap .m-gnb .depth01 > a{padding:11px 20px 12px;font-size:17px}
    #m-gnb-wrap .m-gnb .depth01 > :is(a:before,a:after){right:20px;width:9px}
    #m-gnb-wrap .m-gnb .depth02{padding:14px 0}
    #m-gnb-wrap .m-gnb .depth02 li a{padding:0 20px;font-size:15px;line-height:35px}
    #m-gnb-wrap .login-utils{padding:35px 0 20px}
    #m-gnb-wrap .login-utils li{margin:0 16px}
    #m-gnb-wrap .login-utils li a{font-size:14px}
    #m-gnb-wrap .login-utils li:after{right:-16px;margin-top:-6.5px;height:13px}
}
/* 하단 */
#footer{position:relative;width:100%; padding:101px 100px 84px; color:#fff; background:#000;}
/* -------- utils -------- */
#footer .footer-utils{border:1px solid #ddd;border-width:1px 0}
#footer .footer-utils .swiper-wrapper{margin:0 auto;width:1180px;font-size:0}
#footer .footer-utils .swiper-slide{display:inline-block;margin-right:40px;width:auto;vertical-align:top}
#footer .footer-utils .swiper-slide a{display:block;font-weight:500;font-size:16px;line-height:67px;color:var(--color-dark-gray)}
@media only screen and (max-width:1800px) {
    #footer{padding:5.611vw 4.056vw 4.667vw;}
    #footer .footer-utils .swiper-wrapper{padding:0 30px;width:100%}
}
@media only screen and (max-width:767px) {
    #footer .footer-utils .swiper-wrapper{padding:0 20px}
    #footer .footer-utils .swiper-slide{margin-right:30px}
    #footer .footer-utils .swiper-slide a{font-size:15px;line-height:60px}
    #footer {padding-left:20px; padding-right:20px;}
}
@media only screen and (max-width:640px) {
    #footer .footer-utils .swiper-slide{margin-right:20px}
    #footer .footer-utils .swiper-slide a{font-size:14px;line-height:50px}
}
/* -------- address -------- */
/* #footer .footer-address{margin:0 auto;padding:40px 0 35px;width:1180px;font-size:0} */
/* #footer .footer-address .foot-logo{display:inline-block;width:300px;vertical-align:top;padding-right:60px}
#footer .footer-address .foot-logo img{max-width:200px}
#footer .footer-address address{display:inline-block;width:calc(100% - 300px);font-style:normal;vertical-align:top; word-break:keep-all;}
#footer .footer-address address span{display:inline-block;margin:0 35px 5px 0;font-weight:300;font-size:16px;color:var(--color-dark-gray);word-break:keep-all;vertical-align:top}
#footer .footer-address address .copy{display:block;margin-top:25px;margin-right:0;margin-bottom:0}
@media only screen and (max-width:1180px) {
    #footer .footer-address{padding:40px 30px 35px;width:100%}
}
@media only screen and (max-width:1024px) {
    #footer .footer-address .foot-logo{display:none}
#footer .footer-address address{width:100%}
}
@media only screen and (max-width:768px) {
    #footer .footer-address{padding:30px 20px;width:100%}
}
@media only screen and (max-width:640px) {
    #footer .footer-address address span{margin-right:20px;font-size:14px}
    #footer .footer-address address span:nth-of-type(2) ~ span{display:block}
    #footer .footer-address address .copy{margin-top:20px}
} */
/* -------- btn top -------- */
/* #footer .btn-top{position:fixed;bottom:30px;right:30px;z-index:110;margin-bottom:0;margin-left:530px;width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.20);line-height:0} */
/* #footer .btn-top img{display:block;margin:0 auto}
#footer .btn-top .top-arrow{margin:16px auto 8px}
@media only screen and (max-width:1180px) {
    #footer .btn-top{left:auto;right:30px;margin-left:0}
}
@media only screen and (max-width:768px) {
    #footer .btn-top{right:20px;bottom:20px}
}
@media only screen and (max-width:640px) {
    #footer .btn-top{width:56px;height:56px}
    #footer .btn-top .top-arrow{margin:13px auto 6px;height:10px}
    #footer .btn-top .top-txt{height:7px}
} */

#footer .foot-logo img {width:100%; vertical-align:top;}
#footer .footer-top {display:flex; align-items:flex-end; gap:90px; line-height:1.429em; font-size:21px; font-weight:500; letter-spacing:-.01em; color:#fff;}
#footer .footer-address {font-style:normal; font-weight:bold; width:320px; word-break:keep-all;}
#footer .footer-contact {margin-left:20px; font-weight:bold;}
#footer .footer-contact span {display:block;}
#footer .footer-menu {margin-left:auto;}
#footer .footer-menu a {font-size:21px; font-weight:700; letter-spacing:-.01em; color:#fff;}
#footer .footer-bottom {display:flex; align-items:center; margin-top:73px;}
#footer .footer-bottom .copy {margin-left:90px; margin-right:5px; line-height:1.81em; font-size:21px; letter-spacing:-.01em; color:#fff; font-weight:700;}
#footer .footer-bottom .btn-familysite {display:block; width:162px; height:55px; line-height:51px; font-size:21px; font-weight:700; color:#fff; text-align:center; border:2px solid #fff; border-radius:27px;}
#footer .btn-top {position:fixed; bottom:100px; right:30px; display:flex; justify-content:center; padding-top:33px; width:56px; height:56px; font-size:13px; font-weight:600; letter-spacing:-.01em; color:#fff; text-align:center; background:#404040; border-radius:24px; box-shadow:4px 4px 12px 0px rgba(0, 0, 0, 0.7); z-index:2; display:none;}
#footer .btn-top:before {content:''; position:absolute; top:14px; left:18px; width:16px; height:16px; border-top:5px solid #fff; border-left:5px solid #fff; transform:rotate(45deg);}

#footer .familysite {position:relative;}
#footer .familysite .site-area {display:none; position:absolute; bottom:100%; left:0; width:160px; max-height:210px; margin-bottom:10px; padding:10px; background:#fff; border:1px solid #888; overflow-y:auto; border-radius:1vw; z-index:1}
.familysite .site-list li + li {margin-top:5px;}
.familysite .site-list a {display:block; padding:5px 0; font-size:15px; color:#000;}

#footer .competent_office_list {display:flex; gap:30px; margin-left:auto;}
#footer .competent_office_list li a {display:block;}
#footer .competent_office_list li img {max-width:100%; vertical-align:top;}

@media only screen and (max-width:1800px) {
    #footer .foot-logo {width:9.333vw;}
    #footer .footer-top {gap:5vw; font-size:1.167vw;}
    #footer .footer-address {width:17.778vw;}
    #footer .footer-contact {margin-left:1.111vw;}
    /* #footer .footer-menu {margin-right:1vw;} */
    #footer .footer-menu a {font-size:1.167vw;}
    #footer .footer-bottom {margin-top:4.056vw;}
    #footer .footer-bottom .copy {margin-left:3.889vw; font-size:1.167vw;}
    #footer .footer-bottom .btn-familysite {width:9vw; height:3.056vw; line-height:2.833vw; font-size:1.167vw; border-radius:1.5vw;}
    /* #footer .btn-top {gap:0.333vw; width:11.556vw; height:3.056vw; padding-left:0.278vw; font-size:1.167vw; border-radius:1.5vw;}
    #footer .btn-top:after {width:1.944vw; height:1.444vw;} */
    #footer .competent_office_list {gap:1.667vw; margin-right:35px;}
}
@media only screen and (max-width:1280px) {
    #footer .footer-bottom {flex-wrap:wrap; row-gap:15px;}
    #footer .footer-bottom .copy {margin-left:2.778vw;}
    #footer .competent_office_list {margin-right:65px;}
    #footer .competent_office_list li img {height:30px;}
}
@media only screen and (max-width:1024px) {
    #footer {padding:50px 25px 40px;}
    #footer .foot-logo {width:113px;}
    #footer .footer-top {font-size:13px;}
    #footer .footer-address {width:164px;}
    #footer .footer-contact {margin-left:0;}
    /* #footer .footer-menu {margin-right:2px;} */
    #footer .footer-menu a {font-size:13px;}
    #footer .footer-bottom {margin-top:40px;}
    #footer .footer-bottom .copy {font-size:13px;}
    #footer .footer-bottom .btn-familysite {width:92px; height:32px; line-height:29px; font-size:13px;}
    /* #footer .btn-top {width:125px; height:32px; font-size:13px;}
    #footer .btn-top:after {width:21px; height:14px;} */
}
@media only screen and (max-width:767px) {
    #footer {padding-top:67px;}
    #footer .footer-top {flex-direction:column; align-items:flex-start; gap:0; line-height:1.667em; font-size:15px;}
    #footer .foot-logo {order:1;}
    #footer .footer-address {width:100%; order:3;}
    #footer .footer-contact {margin-top:37px; order:2;}
    #footer .footer-contact span:last-child {margin-top:2px;}
    #footer .footer-menu {margin-top:25px; margin-left:0; order:4;}
    #footer .footer-menu a {font-size:15px;}
    #footer .footer-bottom {flex-direction:column; align-items:flex-start; gap:0; margin-top:22px;}
    #footer .footer-bottom .btn-familysite {width:100px; height:35px; line-height:32px; font-size:14px; border-radius:17px; border-width:1px;}
    #footer .footer-bottom .copy {margin-left:0; line-height:1.769em; order:1;}
    #footer .btn-top {bottom:85px; right:20px; width:44px; height:44px; padding-top:26px; font-size:11px; border-radius:18px; box-shadow:3px 3px 8px 0px rgba(0, 0, 0, 0.5);}
    #footer .btn-top:before {top:11px; left:14px; width:14px; height:14px; border-top-width:3px; border-left-width:3px;}
    /* #footer .btn-top {gap:6px; width:120px; height:35px; margin-top:20px; margin-left:0; font-size:14px; border-radius:17px; border-width:1px; order:3;}
    #footer .btn-top:after {width:17px; height:12px; background-image:url(/html/_skin/1/images/common/icon_top_mo.png);} */

    #footer .familysite {margin-top:27px; order:2;}
    #footer .familysite .site-area {width:140px; border-radius:10px;}
    .familysite .site-list a  {font-size:14px;}

    #footer .competent_office_list {flex-wrap:wrap; gap:15px 10px; margin-top:20px; margin-left:0; order:3;}
}


/* form css */
/* checkbox */
.checkbox-wrap input{display:none}
.checkbox-wrap label{display:inline-block;font-size:16px;line-height:24px;color:var(--color-dark-gray);vertical-align:top;cursor:pointer}
.checkbox-wrap label:before{content:'';display:inline-block;margin-right:10px;width:24px;height:24px;border:1px solid #ccc;box-sizing:border-box;border-radius:50%;background:#fff;vertical-align:top}
.checkbox-wrap input:checked + label:before{border-color:var(--color-primary);background:var(--color-primary) url(../images/common/checkmark.png) no-repeat center center}
.checkbox-wrap.gray input:checked + label:before{border-color:var(--color-dark-gray);background:var(--color-dark-gray) url(../images/common/checkmark.png) no-repeat center center}
.checkbox-wrap.square label:before{border-radius:4px}
@media only screen and (max-width:767px) {
    .checkbox-wrap label{font-size:14px;line-height:18px}
    .checkbox-wrap label:before{margin-right:5px;width:18px;height:18px}
    .checkbox-wrap input:checked + label:before,.checkbox-wrap.gray input:checked + label:before{background-size:auto 6px}
}
/* checkbox btn */
.checkbox-btn input{display:none}
.checkbox-btn label{display:inline-block;margin-right:10px;width:100px;border-radius:4px;border:1px solid #ccc;background:#fff;font-size:18px;line-height:38px;color:var(--color-dark-gray);text-align:center;cursor:pointer}
.checkbox-btn input:checked + label{border-color:var(--color-primary);background:var(--color-primary);color:#fff}
@media only screen and (max-width:767px) {
    .checkbox-btn label{font-size:14px;line-height:30px}
}
/* radio */
.radio-wrap input{display:none}
.radio-wrap label{display:inline-block;font-size:16px;line-height:24px;color:var(--color-dark-gray);vertical-align:top;cursor:pointer}
.radio-wrap label:before{content:'';display:inline-block;margin-right:10px;width:24px;height:24px;border:1px solid #ccc;box-sizing:border-box;border-radius:50%;background:#fff;vertical-align:top}
.radio-wrap input:checked + label:before{border-width:8px;border-color:var(--color-primary)}
@media only screen and (max-width:767px) {
    .radio-wrap label{font-size:14px;line-height:18px}
    .radio-wrap label:before{margin-right:5px;width:18px;height:18px}
    .radio-wrap input:checked + label:before{border-width:5px}
}
/* date */
.select-date{font-size:0}
.select-date > *{display:inline-block;vertical-align:top}
.select-date .date{padding:0 10px;height:40px;border-radius:4px;border:1px solid #ccc;font-size:18px;line-height:38px;color:var(--color-dark-gray)}
.select-date .date + span{width:30px;font-size:18px;line-height:40px;color:var(--color-dark-gray);text-align:Center}
@media only screen and (max-width:767px) {
    .select-date .date{padding:0 10px;height:30px;background-size:auto 14px;font-size:15px;line-height:30px}
    .select-date .date + span{font-size:15px;line-height:30px}
}
/* file select */
.select-file{font-size:0}
.select-file input[type="file"]{display:none}
.select-file label{display:inline-block;margin-right:11px;padding:0 13px;border-radius:12px;background:var(--color-primary);font-size:12px;line-height:24px;color:#fff;vertical-align:top}
.select-file span{display:inline-block;font-size:16px;line-height:24px;color:var(--color-dark-gray);vertical-align:top}
.attach-list{font-size:0}
.attach-list li{margin-bottom:7px;font-size:16px;line-height:24px;color:var(--color-dark-gray)}
.attach-list li:last-child{margin-bottom:0}
.attach-list li strong{display:inline-block;margin-right:11px;padding:0 13px;border-radius:12px;background:#ccc;font-weight:400;font-size:12px;line-height:24px;color:#fff;vertical-align:top}
/* 하단 */
#sitemap{position:relative;width:100%;background:#fff}
/* -------- utils -------- */
    #sitemap .footer-utils{border:1px solid #ddd;border-width:1px 0;overflow:hidden}
    #sitemap .footer-utils .swiper-wrapper{margin:0 auto;width:1180px;font-size:0}
    #sitemap .footer-utils .swiper-slide{display:inline-block;margin-right:40px;width:auto;vertical-align:top}
    #sitemap .footer-utils .swiper-slide a{display:block;font-weight:500;font-size:16px;line-height:67px;color:var(--color-dark-gray)}
@media only screen and (max-width:1180px) {
    #sitemap .footer-utils .swiper-wrapper{padding:0 30px;width:100%}
}
@media only screen and (max-width:768px) {
    #sitemap .footer-utils .swiper-wrapper{padding:0 20px}
    #sitemap .footer-utils .swiper-slide{margin-right:30px}
    #sitemap .footer-utils .swiper-slide a{font-size:15px;line-height:60px}
}
@media only screen and (max-width:640px) {
    #sitemap .footer-utils .swiper-slide{margin-right:20px}
    #sitemap .footer-utils .swiper-slide a{font-size:14px;line-height:50px}
}
.band-banner{overflow:hidden}

.text-primary {color:var(--color-primary)}

/* popup */
.popup-wrap{display:none}
.popup-wrap{position:fixed;top:0;left:0;bottom:0;right:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8)}
.popup-wrap .popup-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:40px;max-width:560px;width:calc(100% - 60px);max-height:800px;height:calc(100% - 60px);border-radius:10px;background:#fff}
.popup-wrap .popup-tit{font-weight:700;font-size:24px;color:var(--color-dark-gray, #333)}
.popup-wrap .popup-btn{display:flex; margin-top:58px; width:100%}
/* .popup-wrap .popup-btn{display:flex} */
.popup-wrap .popup-btn a{display:block}
.popup-wrap .popup-btn button{width:100%}
.popup-wrap .popup-btn button + button{margin-left:10px}
.popup-wrap .popup-contents-wrap{margin-top:30px;height:calc(100% - 178px)}
.popup-wrap .popup-scroll{overflow-x:hidden}
:where(.popup-box,.popup-wrap) .close{position:absolute;top:37px;right:37px;width:42px;height:42px;font-size:0}
:where(.popup-box,.popup-wrap) .close:before,:where(.popup-box,.popup-wrap) .close:after{content:'';position:absolute;top:50%;left:0;z-index:1;width:100%;height:2px;border-radius:5px;background:var(--color-gray,#aaa)}
:where(.popup-box,.popup-wrap) .close:before{transform:rotate(45deg)}
:where(.popup-box,.popup-wrap) .close:after{transform:rotate(-45deg)}
.popup-wrap .popup-sub-tit {font-weight:400; font-size:23px; line-height:36px; color:var(--color-dark-gray, #333); word-break:keep-all;}

.popup-wrap.type2 .popup-tit {padding-bottom:38px; border-bottom:1px solid #ccc;}
.popup-wrap.type2 .close {top:34px; right:35px; width:40px; height:40px;}
.popup-wrap.type2 .close:before, .popup-wrap.type2 .close:after {height:3px;}
.popup-wrap.type2 .popup-btn {margin-top:55px; justify-content:center;}
.popup-wrap.type2 .popup-btn .btn-lg {width:160px; padding-top:16px; padding-bottom:15px;}
@media only screen and (max-width:767px) {
    .popup-wrap .popup-tit{font-size:18px}
    .popup-wrap .popup-inner{padding:25px;max-height:calc(100vh - 100px);height:auto}
    .popup-wrap .popup-contents-wrap{margin-bottom:10px;height:calc(100vh - 282px)}
    .popup-wrap .close{top:17px;right:17px;width:32px;height:32px}
    :where(.popup-box,.popup-wrap) .close{top:17px;right:17px;width:32px;height:32px}
    .popup-wrap .popup-btn{margin-top:30px}
    .popup-wrap .popup-sub-tit {font-size:17px; line-height:25px;}

    .popup-wrap.type2 .popup-tit {padding-bottom:25px;}
    .popup-wrap.type2 .close {top:22px; right:21px; width:30px; height:30px;}
    .popup-wrap.type2 .close:before, .popup-wrap.type2 .close:after {height:2px;}
    .popup-wrap.type2 .popup-btn {margin-top:35px;}
    .popup-wrap.type2 .popup-btn .btn-lg {width:120px; padding-top:13px; padding-bottom:12px;}
}

.main-class-box{display:inline-block;vertical-align:top;width:33.33%;width:calc(33.33% - 20px)}
.main-class-box .thumb{overflow:hidden;height:auto; border-radius:40px; aspect-ratio:53/43; /*aspect-ratio:360/202;*/ background:#edeeef;}
.main-class-box .thumb a{display:block}
.main-class-box .thumb img{width:100%;transition:transform .5s}
.main-class-box .class-info{position:relative; padding:35px 39px 0}
.main-class-box .class-name{font-size:14px;line-height:26px;color:var(--color-dark-gray,#333)}
.main-class-box .class-name strong{display:inline-block;margin-right:6px;padding:0 10px;border-radius:4px;background:var(--color-primary,#0148d4);font-weight:400;color:#fff}
.main-class-box .name{margin-top:15px;margin-bottom:7px;font-size:15px;color:#000}
.main-class-box .class-subject{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;width:100%;font-size:30px;line-height:1.333em;color:#fff; /*word-break:keep-all;*/font-weight:800; letter-spacing:-.03em;}
.main-class-box .price{display:block;margin-top:20px;font-size:16px;color:#111;text-align:right}
.main-class-box .price .discount{margin-right:5px;color:var(--color-red,#dc3545)}
.main-class-box .price strong{font-weight:400;font-size:24px; word-break:keep-all;}
.main-class-box .price del{text-decoration:line-through;color:var(--color-light-gray,#ccc)}
.main-class-box .lecture-label{position:absolute;top:25px; left:25px;z-index:1;display:flex}
.main-class-box .lecture-label li{display:inline-block;min-width:111px;height:53px; line-height:53px; padding:0 15px;border-radius:26.5px;background:#ff817e;font-weight:700;font-size:21px;color:#fff; text-align:center;}
.main-class-box .desc {min-height:90px; margin-top:7px; line-height:1.476em; font-size:21px; font-weight:300; color:#fff; letter-spacing:-.03em; word-break:keep-all; overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;}

@media only screen and (max-width:1800px) {
    .main-class-box{width:calc(33.33% - 1.111vw)}
    .main-class-box .thumb{border-radius:2.222vw;}
    .main-class-box .class-info{ padding:1.944vw 2.167vw 0}
    .main-class-box .class-subject{font-size:1.667vw}
    .main-class-box .desc {min-height:2.222vw; margin-top:0.389vw; font-size:1.167vw;}
    .main-class-box .lecture-label{top:1.1vw; left:1.1vw;}
    .main-class-box .lecture-label li{min-width:6.167vw;height:2.944vw; line-height:2.944vw; padding:0 0.833vw;border-radius:1.472vw; font-size:1.167vw;}
    
}
@media only screen and (max-width:1024px) {
    .main-class-box {width:calc(50% - 15px)}
    .main-class-box .class-info {padding:19px 21px 0;}
    .main-class-box .lecture-label li {height:30px; padding:0 8px; line-height:30px; font-size:12px; border-radius:15px;}
    .main-class-box .class-subject {font-size:18px;}
    .main-class-box .desc {min-height:42px; font-size:14px;}
}
@media only screen and (max-width:767px) {
    /* .main-class-box {width:calc(50% - 10px);}
    .main-class-box .thumb {border-radius:40px;}
    .main-class-box .lecture-label {top:20px; left:20px;}
    .main-class-box .class-info {padding-top:10px;}
    .main-class-box .class-subject {line-height:1.5em; font-size:16px;}
    .main-class-box .desc {min-height:39px; margin-top:2px; font-size:13px;} */

    .main-class-box {width:calc(50% - 10px);}
    .main-class-box .thumb {border-radius:40px;}
    .main-class-box .class-info {padding-top:2.564vw;}
    .main-class-box .class-subject {line-height:1.5em; font-size:clamp(16px, 4.103vw, 23px);}
    .main-class-box .desc {min-height:clamp(40px, 10vw, 50px); margin-top:0.513vw; font-size:clamp(13px, 3.333vw, 20px);}
    .main-class-box .lecture-label {top:15px; left:15px;}
    .main-class-box .lecture-label li {height:clamp(25px, 7.2vw, 40px); padding:0 clamp(11px, 2.821vw, 17px); line-height:clamp(25px, 7.2vw, 40px); font-size:clamp(12px, 3.077vw, 20px) ; border-radius:3.846vw;}
}
@media only screen and (max-width:640px) {
    .main-class-box {width:100%;}
    .main-class-box .thumb {border-radius:30px;}
    .main-class-box .lecture-label {top:10px; left:10px;}
}


.tab-conts-wrap{display:none}
.tab-conts-wrap.on{display:block}

/* chatbot */
#footer .btn-chatbot {position:fixed;bottom:30px;right:30px;z-index:110;display:flex; align-items:center; justify-content:center; margin-bottom:0;margin-left:530px;width:56px;height:56px;border-radius:24px;background:#7bd990;box-shadow:rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;line-height:0}
#chatbot {position:fixed; bottom:28px; right:20px; width:375px; max-height:690px; height:100vh; z-index:9999; border-radius:20px; box-shadow:rgba(255, 255, 255, 0.12) 0px 0px 2px 0px inset, rgba(0, 0, 0, 0.05) 0px 0px 2px 1px, rgba(0, 0, 0, 0.3) 0px 12px 60px; overflow:hidden; visibility:hidden; transition:visibility 400ms cubic-bezier(0.36, 0, 0, 1); animation:400ms cubic-bezier(0.36, 0, 0, 1) 0s 1 normal none running fadeIn; will-change:transform, opacity; overscroll-behavior:contain;}
.chatbot-on #chatbot {transition:visibility 400ms cubic-bezier(0.36, 0, 0, 1); visibility:visible;  animation:400ms cubic-bezier(0.36, 0, 0, 1) 0s 1 normal both running fadeOut;}
#chatbot .chatbot-close {position:absolute; top:13px; right:16px; width:24px; height:24px; font-size:0; text-indent:-9999em; background:url(/html/images/common/chatbot_close.png) no-repeat center/contain;}
body.chatbot-on {overflow:hidden; height:100dvh;}

@media only screen and (max-width:767px) {
    #footer .btn-chatbot {right:20px; width:44px; height:44px; border-radius:18px;}
    #footer .btn-chatbot img {width:30px;}
    #chatbot {width:100%; height:100dvh; max-height:100dvh; left:0; top:0; right:0; bottom:0; border-radius:0;}
    .chatbot-on #chatbot {touch-action:none; -webkit-overflow-scrolling:none;}
    #chatbot iframe {height:100dvh;}
}

@keyframes fadeOut {
    0% {
        opacity: 0;
        transform: translate3d(0px, 20px, 0px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        opacity: 0;
        transform: translate3d(0px, 20px, 0px);
    }
}