@charset "utf-8";
/* 240925 */

#wrapper {position: relative; width: 100%; max-width: 100%; overflow: hidden;}

/*header*/
#header {position: absolute; top: 0; left: 0; width: 100%; height:55px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.3);z-index: 10; transition:all 0.3s;}
#header {background: rgba(0,0,0,.5);border-bottom: none;} /* 240925 */
#header.fixed {width: 100%; top: 0; position: fixed; background: rgba(255,255,255); box-shadow: 0 4px 7px 0px rgba(0,0,0,0.1); border-bottom: none; z-index: 9998; transition:all 0.3s;}
/* #header h1 {}
/* 191219 시즌로고추가(s) */
#header h1 a {display: inline-block; padding-top:19px; padding-bottom: 18px;}
/* 191219 시즌로고추가(e) */
#header h1 a.xmas {display: inline-block; padding-top:2px; padding-bottom: 18px;}

/* 191231 시즌로고추가(s) */
#header h1 a.newyear {display: inline-block; padding-top:8px; padding-bottom: 18px;}
/* 191231 시즌로고추가(e) */

/* 200918 시즌로고추가(s) */
#header h1 a.fall {display: inline-block; padding-top:19px; padding-bottom: 18px; margin-left:-34px}
/* 200918 시즌로고추가(e) */

/*211202(s) 시즌로고css수정*/
#header h1 a.xmas {display: inline-block; padding-top:21px; padding-bottom: 18px; margin-left:-26px}
/*211202(e) 시즌로고css수정*/
#header h1 a {padding: 8px 0;}
#header h1 a.season {padding: 16px 0}
#header .mypage {display: block; position: absolute; top: 50%; left:20px; margin-top: -10px;}
#header .menu {display: block; position: absolute; top: 0; right: 0; padding: 20px 20px; z-index: 100;}



/*gnb*/
.gnbarea {display:none; position: fixed; top: 0; right: 0; width: 100%; height:100%; overflow: hidden; z-index: 9999; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspective:1000; -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0);}
.gnbarea .blackbg {position: absolute; top: 0; left: 0; width: 100%; height:100%; background:rgba(0,0,0,0.5); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; z-index: 998;}
.gnbarea .gnbmenu {position: absolute; top: 0; right: -450px; width: 450px; height: 100%; background: #fff; overflow-y: auto; overflow-scrolling:touch; -webkit-overflow-scrolling:touch; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; z-index: 999;}
.gnbarea .gnbmenu .top {padding: 19px 15px 18px 19px; text-align: left;}
.gnbarea .gnbmenu .top a {display: inline-block; font-size: 13px; color:#1a1a1a;}
.gnbarea .gnbmenu .top a.login span {display: inline-block; width: 15px; height: 16px; margin-right: 5px; background:url(../img/common/login_btn.png) no-repeat; background-size: 15px 16px; vertical-align:-4px;}
.gnbarea .gnbmenu .top .logout {display: inline-block; font-size: 13px; color:#1a1a1a; cursor: pointer;}
.gnbarea .gnbmenu .top .id {font-size: 13px;}
.gnbarea .gnbmenu .top .id span {display: inline-block; margin-right: 2px; font-size: 13px; color:#000;}
.gnbarea .gnbmenu .top span.line {display: inline-block; margin-left:6px; margin-right: 6px; width: 1px; height: 11px; background:#1a1a1a; vertical-align: -1px;}
.gnbarea .menuclose {position: absolute; top: 20px; right: 20px;}
#gnb {}
#gnb li a{display: block; color:#000;}
#gnb .zeroD {padding:18px 20px; border-top:1px solid #cdcdcd; font-size: 15px;}
#gnb .zeroD.on{color:#fff; background: #6f28e4;}
/*gnb oneD*/
#gnb .oneD {padding:18px 20px; border-top:1px solid #cdcdcd; font-size: 15px; color:#000; background: url(../img/common/gnb_plus.png) no-repeat right 20px top 50%; background-size: 10px 10px;}
#gnb .oneD.on {color:#fff; background: #6f28e4 url(../img/common/gnb_minus.png) no-repeat right 20px top 50%; background-size: 10px 1px;}
#gnb .oneD.bdbo {border-bottom: 1px solid #cdcdcd;}
/*gnb twoD*/
#gnb .twoD {background: #f5f5f5;}
#gnb .twoD > a {padding:13px 20px; font-size: 14px; border-bottom: 1px solid #cdcdcd;}
#gnb .twoD > a.bdbn {border-bottom: none;}
#gnb .twoD > .hv3d {background: #f5f5f5 url(../img/common/gnb_hv3d_plus.png) no-repeat right 20px top 50%; background-size: 10px 10px;}
#gnb .twoD > .hv3d.on {color:#6f28e4; background: #f5f5f5 url(../img/common/gnb_hv3d_minus.png) no-repeat right 20px top 50%; background-size: 10px 1px;}
/*gnb thrD*/
#gnb .thrD {padding:11px 0; background: #f5f5f5; border-bottom: 1px solid #cdcdcd;}
#gnb .thrD.bdbn {border-bottom: none; border-top: 1px solid #cdcdcd;}
#gnb .thrD >a {padding:9px 27px; font-size: 13px; color:#525252;}
#gnb .thrD >a.firstli {border-top: 1px solid #cdcdcd;}
/*gnb twoD*/
#gnb .twoD {display: none;}
#gnb .thrD {display: none;}
#gnb .twoD>.lastli {}
#gnb .thrD>.lastli {}


/*sub_box*/
#sub_box {background-color:#fff;}
#sub_box_archi{background:url(../img/content/a_wrap_bg.png) center;}
.subpage_wrap {position: relative;}

/*탭 있을시*/
.subpage_wrap ul {position: absolute; bottom: 0; left: 0; right: 0;}
.subpage_wrap ul li a {display: block; width: 100%; height: 52px; font-size: 18px; font-family: NSBold; color:#fff; text-align: center; line-height: 52px;}
.subpage_wrap ul li.on {background-color: #fff;}
.subpage_wrap ul li.lasttab {border-right: none;}
.subpage_wrap .sub_tit {padding:130px 0 120px 0;}
.subpage_wrap .sub_tit.study_hightit {padding:125px 0 75px 0;}
.subpage_wrap .sub_tit h3 {font-size:25px; font-family: NSEBold; color:#fff; margin-bottom: 10px; text-align: center; line-height: 25px;}
.subpage_wrap .sub_tit p {font-size:15px; font-family: NS; color:#fff; text-align: center; line-height: 21px;}
.sub_contentbox{padding: 0 15px; font-family: NS;}
.sub_contentbox .sub_contentbox_inner {width: 100%;}
/*user 탭*/
.user li {float: left; width: calc((100% - 1px)/2); border-right: 1px solid rgba(255,255,255,0.25); background-color: rgba(0,0,0,0.2);}
.user li.on a {color: rgb(98, 72, 230);}
/*study 탭*/
.study li {float: left; width: calc((100% - 1px*6)/6); border-right: 1px solid rgba(255,255,255,0.25); background-color: rgba(0,0,0,0.2);}
.study li.none {display: none;}
.study li.biglast {border-right: none;}
.study li.on a {color: rgb(13, 174, 219);}
/*help 탭*/
.help li {float: left; width: calc((100% - 1px)/2); border-right: 1px solid rgba(255,255,255,0.25); background-color: rgba(0,0,0,0.2);}
.help li.on a {color: rgb(195, 65, 188);}
/*.help li {float: left; width: calc((100% - 1px*2)/3); border-right: 1px solid rgba(255,255,255,0.25); background-color: rgba(0,0,0,0.2);}
.help li.on a {color: rgb(195, 65, 188);}
.help li a.help_a {font-size: 17px;}*/
/*school 탭*/
.school li {float: left; width: calc((100% - 1px)/2); border-right: 1px solid rgba(255,255,255,0.25); background-color: rgba(0,0,0,0.2);}
.school li.on a {color: rgb(204, 72, 183);}
/*탭 없을시_p없음*/
.subpage_wrap .subhigh_tit {padding:137px 0 78px 0;}
.subpage_wrap .subhigh_tit.usermain {padding:125px 0 90px 0;}
.subpage_wrap .subhigh_tit h3 {font-size:25px; font-family: NSEBold; color:#fff; text-align: center;}
.subpage_wrap .subhigh_tit p {font-size:15px; font-family: NS; color:#fff; text-align: center; line-height: 21px;}
/*탭 없을시_p있음*/
.subpage_wrap .subhigh_tit2 {padding:130px 0 72px 0;}
.subpage_wrap .subhigh_tit2 h3 {margin-bottom: 10px; font-size:25px; line-height: 25px; font-family: NSEBold; color:#fff; text-align: center;}
.subpage_wrap .subhigh_tit2 p {font-size:15px; font-family: NS; color:#fff; text-align: center; line-height: 21px;}

/*background color*/
.loginbgcolor {background:rgb(120, 3, 232); background:linear-gradient(135deg, rgb(3, 222, 232) 0, rgb(120, 3, 232) 50%, rgb(120, 3, 232) 100%);}
.userbgcolor {background:rgb(93, 72, 230); background:linear-gradient(135deg, rgb(226, 51, 213) 0, rgb(93, 72, 230) 50%, rgb(93, 72, 230) 100%);}
.studybgcolor {background:rgb(0, 203, 212); background:linear-gradient(135deg, rgb(0, 95, 239) 0, rgb(0, 203, 212) 50%, rgb(0, 203, 212) 100%);}
.helpbgcolor {background:rgb(204, 72, 183); background:linear-gradient(135deg, rgb(120, 3, 232) 0, rgb(204, 72, 183) 50%, rgb(204, 72, 183) 100%);}
.buybgcolor {background: linear-gradient(135deg, rgb(111, 40, 228) 0%, rgb(30, 136, 229) 50%, rgb(30, 136, 229) 100%);}



/*footer*/
#footer {width: 100%; height: 195px; background-color:#fff;}
#footer .policy {border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; text-align: center;}
#footer .policy ul {margin:0 auto; padding: 15px 0 9px 0; display: inline-block;}
#footer .policy ul li {float: left; background: url(../img/common/footer.png) no-repeat; background-position:  0px 0px; background-size: auto 50px; padding-left: 15px;}
#footer .policy ul li.company {background: none; margin-left: 15px; padding-left: 0px;}
#footer .policy ul li a {display: block; margin-right: 15px; font-size:12px; color:#636363;}
#footer .address {margin-top: 22px; color:#949494; font-size:13px; letter-spacing: 0;text-align: center;}
#footer .address p {line-height: 20px; color:#949494;}
#footer .address p span {display:inline-block; color:#949494;}
#footer .address p.copyright {margin-top: 12px; font-family: NBG; color:#636363; font-size:11px; line-height: 15px;}




/*animation*/
.yAnimate_1, .yAnimate_2, .yAnimate_3, .yAnimate_4, .yAnimate_5, .xAnimate_1, .xAnimate_2, .xAnimate_3, .xAnimate_4 {opacity:0;}
.yAnimate_1 {
    -webkit-animation: yAnimate 0.9s ease;
    -moz-animation: yAnimate 0.9s ease;
    -o-animation: yAnimate 0.9s ease;
    -ms-animation: yAnimate 0.9s ease;
    animation: yAnimate 0.9s ease;
    opacity: 1;
}

.yAnimate_2 {
    -webkit-animation: yAnimate 1.1s ease;
    -moz-animation: yAnimate 1.1s ease;
    -o-animation: yAnimate 1.1s ease;
    -ms-animation: yAnimate 1.1s ease;
    animation: yAnimate 1.1s ease;
    opacity: 1;
}

.yAnimate_3 {
    -webkit-animation: yAnimate 1.3s ease;
    -moz-animation: yAnimate 1.3s ease;
    -o-animation: yAnimate 1.3s ease;
    -ms-animation: yAnimate 1.3s ease;
    animation: yAnimate 1.3s ease;
    opacity: 1;
}

.yAnimate_4 {
    -webkit-animation: yAnimate 1.5s ease;
    -moz-animation: yAnimate 1.5s ease;
    -o-animation: yAnimate 1.5s ease;
    -ms-animation: yAnimate 1.5s ease;
    animation: yAnimate 1.5s ease;
    opacity: 1;
}

.yAnimate_5 {
    -webkit-animation: yAnimate 0.5s ease;
    -moz-animation: yAnimate 0.5s ease;
    -o-animation: yAnimate 0.5s ease;
    -ms-animation: yAnimate 0.5s ease;
    animation: yAnimate 0.5s ease;
    opacity: 1;
}

.xAnimate_1 {
    -webkit-animation: xAnimate 0.9s ease;
    -moz-animation: xAnimate 0.9s ease;
    -o-animation: xAnimate 0.9s ease;
    -ms-animation: xAnimate 0.9s ease;
    animation: xAnimate 0.9s ease;
    opacity: 1;
}

.xAnimate_2 {
    -webkit-animation: xAnimate 1.1s ease;
    -moz-animation: xAnimate 1.1s ease;
    -o-animation: xAnimate 1.1s ease;
    -ms-animation: xAnimate 1.1s ease;
    animation: xAnimate 1.1s ease;
    opacity: 1;
}

.xAnimate_3 {
    -webkit-animation: xAnimate 1.3s ease;
    -moz-animation: xAnimate 1.3s ease;
    -o-animation: xAnimate 1.3s ease;
    -ms-animation: xAnimate 1.3s ease;
    animation: xAnimate 1.3s ease;
    opacity: 1;
}

.xAnimate_4 {
    -webkit-animation: xAnimate 1.5s ease;
    -moz-animation: xAnimate 1.5s ease;
    -o-animation: xAnimate 1.5s ease;
    -ms-animation: xAnimate 1.5s ease;
    animation: xAnimate 1.5s ease;
    opacity: 1;
}

@-webkit-keyframes yAnimate{
    0%{opacity:0; transform:translateY(50px);}
    100%{opacity:1; transform:translateY(0px);}
}
@-moz-keyframes yAnimate{
    0%{opacity:0; transform:translateY(50px);}
    100%{opacity:1; transform:translateY(0px);}
}
@-o-keyframes yAnimate{
    0%{opacity:0; transform:translateY(50px);}
    100%{opacity:1; transform:translateY(0px);}
}
@-ms-keyframes yAnimate{
    0%{opacity:0; transform:translateY(50px);}
    100%{opacity:1; transform:translateY(0px);}
}
@keyframes yAnimate{
    0%{opacity:0; transform:translateY(50px);}
    100%{opacity:1; transform:translateY(0px);}
}
@-webkit-keyframes xAnimate{
    0%{opacity:0; transform:translateX(50px);}
    100%{opacity:1; transform:translateX(0px);}
}
@-moz-keyframes xAnimate{
    0%{opacity:0; transform:translateX(50px);}
    100%{opacity:1; transform:translateX(0px);}
}
@-o-keyframes xAnimate{
    0%{opacity:0; transform:translateX(50px);}
    100%{opacity:1; transform:translateX(0px);}
}
@-ms-keyframes xAnimate{
    0%{opacity:0; transform:translateX(50px);}
    100%{opacity:1; transform:translateX(0px);}
}
@keyframes xAnimate{
    0%{opacity:0; transform:translateX(50px);}
    100%{opacity:1; transform:translateX(0px);}
}







@media all and (max-width: 640px){

    .gnbarea .gnbmenu {position: absolute; top: 0; right: -250px; width: 250px; height: 100%; background: #fff; overflow-y: auto; overflow-scrolling:touch; -webkit-overflow-scrolling:touch; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; z-index: 999;}
    /*study 탭*/
    .subpage_wrap .sub_tit.study_tit {padding:110px 0 190px 0;}
    .study li {float: left; width: calc(100%/2); box-sizing: border-box; border-right: 1px solid rgba(255,255,255,0.25); border-bottom: 1px solid rgba(255,255,255,0.25); background-color: rgba(0,0,0,0.2);}
    .study .study_a {font-size: 16px; height: 45px; line-height: 45px;}
    .study li.biglast {border-right: 1px solid rgba(255,255,255,0.25);}
    .study li.smalllast {border-right: none;}
    .study li.none {display: block;}

}

@media all and (max-width: 375px){
    .subpage_wrap .sub_tit p span {display: block;}

}

@media all and (max-width: 320px){

    .subpage_wrap .subhigh_tit2 p span {display: block;}
}