@charset "utf-8";

/* fonts 
@font-face{
    font-family: OpenSans;
    src: url(/font/OpenSans-Regular.ttf);
}
@font-face{
    font-family: NotoSansCJKkr;
    src: url(/font/NotoSansCJKkr-Regular.otf);
}
@font-face{
    font-family: SCDream6;
    src: url(/font/SCDream6.otf);
}
*/
/* main reset css 공통 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	vertical-align: -webkit-baseline-middle;
	vertical-align: -moz-middle-with-baseline;
	font-family: 'Noto Sans KR',"맑은 고딕", sans-serif !important;
}


html {
    /* Prevent font scaling in landscape */
    font-size: 16px !important;
    text-size-adjust: none !important;
    -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
    -moz-text-size-adjust: none; /*Firefox*/
    -ms-text-size-adjust: none; /*Ie*/
    -o-text-size-adjust: none; /*old versions of Opera*/
}

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    color: #333333;
    text-decoration: none;
}
img{
    vertical-align: middle;
    border: none;
}

header, section, footer, nav, article, aside{
    display: block;
}
.clearFix{ clear: both; }
header:after, section:after, footer:after, nav:after, article:after, aside:after{
    content: ''; display: block; clear: both;
}
section{
    margin-bottom: 120px;
}

.warpper{
    width: 100%;
    margin: auto;
    font-family: NotoSansCJKkr;
    color: #333333;
}

/* slide menu */
.bars_icon>input{
    width: 40px;
    height: 32px;
    position: relative;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}
.bars_icon>span{
    display: flex;
    width: 24px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    top: -40px;
    background: #333;;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 5px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease;
}
.bars_icon>span:first-child{
    transform-origin: 0% 0%;
}
.bars_icon>span:nth-last-child(2){
  transform-origin: 0% 100%;
}
.bars_icon>input:checked ~ span{
    opacity: 1;
    transform: rotate(0deg) translate(0, 0);
    background: #36383f;
}
.bars_icon>input:checked ~ span:nth-last-child(3){
    opacity: 0;
    transform: rotate(0deg) scale(0.2 0.2);
}
.bars_icon>input:checked ~ span:nth-last-child(2){
    transform: rotate(0deg) translate(0, 0);
}

#mySidenav{
    position: fixed;
    top: 0px;
    z-index: 2000;
}

#mySidenav.open{ width: 100%; }

.top_navigation .welcome_txt.slide_menu{
    position: fixed;
    top: 0;
    left: 100px;
}


/************

index header css 

************/

/* top_nav */
.nav{}
.top_navigation{
    width: 100%;
    height: 68px;
    position: relative;
    line-height: 68px;
}
.welcome_txt{
    font-size: 14px;
    letter-spacing: -2px;
    display: inline-block;
    font-weight: 500;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    line-height: 76px;
}
.welcome_txt_bold{
    font-weight: bold;
    font-size: 16px;
    letter-spacing: -1px;
    padding-left: .2rem;
    color: #222;
}
.welcome_txt_logo{
    font-weight: bold;
    display: block;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: -1px;
    padding-left: .2rem;
    color: #222;
}
.grade_icon{
    margin-left: 10px;
}
/*
.logout_txt{
    font-size: 12px;
    letter-spacing: -4px;
    width: 12%;
    display: inline-block;
}
*/
.bell_img{
    display: inline-block;
    
}
.logout_icon{
    position: absolute;
    top: 2px;
    right: 6.2em;
}
.alram_icon{
    position: absolute;
    top: 2px;
    right: 3.8em;
}
.home_icon{
    position: absolute;
    margin-left: .4rem;
}
.bars_icon{
    position: absolute;
    top: 2px;
    right: .2rem;
}
/* top_nav end */

/* mid nav */
.mid_navigation{
    width: 100%;
    height: 44px;
}
.mid_navigation>a{
    width: 33.333333%; 
    float: left;
    text-align: center;
    line-height: 44px;
    font-size: 18px;
    letter-spacing: -2px;
    font-family: 'NotoSansCJKkr';
    color: #333333;
    text-decoration: none;
    background-color: #fff;
    border-bottom: 1px solid #DAD8D8;
}
.mid_navigation .menu03{
    background-color: #ffee00;
}

.red_circle{
    width: 20px;
    height:20px;
    background-color: #ff0000;
    border-radius: 40px;
    display: inline-block;
    line-height: 20px;
    margin-left: 4px;
}
.red_circle_txt{
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 1px;
    position: relative;
    top: -3px;
}
.kakao_png{
    width: 24px;
    position: relative;
    top: -2px;
    left: 4px;
}
.menu{
    border-bottom: 2px solid #222;
}
.menu.active{
    color: #6600FF;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: 1px solid #6600ff;
    padding: 0;
    
}
/* mid nav end */

/************

index section css 

************/
section{
    padding-top: 52px;
}

.main_banner{
    width: 100%;
    height: 452px;
}

/* carousel */
#carouselExampleControls{
    position: relative;
    padding-top: 112px;
    color: #ffffff;
}
#carouselExampleControls .carousel-inner>div{
    height: 452px;
    overflow: hidden;
}
#carouselExampleControls .carousel-item>div{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}
.carousel01{
    background-image: url(/images/main_banner01.png);
}
.carousel02{
    background-image: url(/images/main_banner02.png);
}
.carousel03{
    background-image: url(/images/main_banner03.png);
}
.indecator_btn{
    position: relative;
    width: 100px;
}
.indecator_btn>button{
    position: absolute;
    top: -280px;
    left: 10px;
}
.carousel-control-prev-icon{
    position: absolute;
    bottom: 30%;
}
.carousel-control-next-icon{
    position: absolute;
    bottom: 30%;
    right: -90px;
}
.carousel-item.active{
    height: 100%;
}

.carousel-item_minibanner{
    display: inline-block;
    padding: 6px 12px;
    border: 1.2px solid #ffffff;
    border-radius: 16px;
    font-size: 13px;
    margin-top: 60px;
    margin-left: 16px;
    margin-bottom: 16px;
}
.carousel-item h4{
    font-size: 35px;
    font-family: SCDream6;
    margin-left: 16px;
    letter-spacing: -3px;
}
.carousel-item_para{
    font-size: 18px;
    margin-left: 16px;
    letter-spacing: -1px;
}
.carousel-item_pagenum{
    font-family: OpenSans;
    position: absolute;
    bottom: 89px;
    left: 33px;
}

/* library */
h2{
    padding-top: 40px;
    padding-bottom: 20px;
    font-size: 22px;
    font-family: NotoSansCJKkr;
    text-indent: 1em;
    position: absolute;
    letter-spacing: -2px;
}

.library_video{
    width: 100%;
    height: 358px;
    overflow: scroll;
    position: relative;
}
.library_video_move_btn{
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 40px;
    left: 14rem;
}
.library_video_inner{
    padding-left: 4%;
    width: 430px;
    margin: auto;
    clear: both;
}
.library_video_inner_box{
    width: 124px;
    height: 225px;
    float: left;
    text-align: center;
    font-family: NotoSansCJKkr;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #DAD8D8;
    margin-left: 2.5%;
    border-radius: 4px;
    position: relative;
    margin-top: 100px;
}
.library_video_inner_box_para{
    box-sizing: border-box;
    position: relative;
    top: 6px;
    margin: 0;
    padding: 0;
}
.library_video_inner_box .liner{
    width: 60px;
    height: 1px;
    background-color: #DAD8D8;
    display: inline-block;
}

.library_video_inner_box_img{
    position: relative;
    top: 10px;
}
.library_video_inner_box>a{
    color: #ffffff;
    text-decoration: none;
    display: block;
    background-color: #C299FF;
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 0;
}

.library_status{
    width: 100%;
    height: 268px;
    background-color: #ECDFFF;
    overflow: scroll;
}
.library_status_inner{
    width: 550px;
    margin: auto;
    padding-left: 4%;
}
.library_status_inner_box{
    margin-top: 100px;
    box-sizing: border-box;
    width: 120px;
    height: 135px;
    background-color: #ffffff;
    border-radius: 4px;
    text-align: center;
    float: left;
    margin-left: 10px;
}
.library_status_inner_box_para{
    box-sizing: border-box;
    position: relative;
    top: 8px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    letter-spacing: -1px;
}
.library_status_inner_box .liner{
    width: 60px;
    height: 1px;
    background-color: #DAD8D8;
    display: inline-block;
}
.library_status_inner_box_num{
    font-family: OpenSans;
    font-size: 25px;
    font-weight: bold;
    color: #6600FF;
    box-sizing: border-box;
    padding-top: 18px;
}
.library_status_inner_box_txt{
    font-size: 12px;
}

.library_information{
    width: 100%;
    height: 496px;
    box-sizing: border-box;
}
.library_information_inner{
    width: 100%;
    margin-top: 100px;
}
.library_information_inner_backimg{
    position: relative;
    top: -65px;
    left: 52%; 
}
.library_information_inner_backimg.more{
    position: relative;
    left: 58%;
}
.library_information_inner_href_icon01{
    position: relative;
    top: -70px;
    left: 64%;
}
.library_information_inner_href_icon02{
    position: relative;
    top: -70px;
    left: 57.8%;
}
.library_information_inner_href_icon03{
    position: relative;
    top: -70px;
    left: 46.5%;
}
.library_information_inner_box{
    margin: auto;
    width: 92%;
    height: 120px;
    color: #ffffff;
    clear: both;
    border-radius: 4px;
    margin-bottom: 40px;
}
.library_information_inner_box>a{
    display: inline-block;
    color: #fff;
    text-decoration: none;
}
.library_information_inner_box.box01{
    background-color: #304E92;
}
.library_information_inner_box.box02{
    background-color: #524D9A;
}
.library_information_inner_box.box03{
    background-color: #8456B9;
}
.library_information_inner_box_txt{
    clear: both;
    box-sizing: border-box;
    padding-left: 6%;
    position: relative;
    z-index: 3;
}
.library_information_inner_box_txt>h3{
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    padding-top: 34px;
}
.library_information_inner_box_txt>p{
    font-size: 14px;
}

.membership_benefits{
    width: 100%;
    height: 269px;
    background-color: #ECDFFF;
}
.library_membership_inner{
    width: 96%;
    margin: auto;
}
.library_membership_inner_box{
    width: 96%;
    height: 120px;
    background-color: #ffffff;
    position: relative;
    top: 100px;
    margin-left: 2%;
    float: left;
    box-sizing: border-box;
    padding: 10px 20px;
}
.library_membership_inner_box.m_inner_box01{
    background-image: url(/images/img_member_72dp.png);
    background-size: 61px 37px;
    background-repeat: no-repeat;
    background-position: 82px 140px;
}

.library_membership_inner_box.m_inner_box02{
    background-image: url(/images/img_ballon_72dp.png);
    background-size: 56px 72px;
    background-repeat: no-repeat;
    background-position: 90% 90%;
}

.library_membership_inner_box>strong{
    color: #6600FF;
    font-size: 16px;
    line-height: 50px;
    letter-spacing: -1px;
}
.library_membership_inner_box>p{
    font-size: 14px;
}

.formation_status{
    width: 100%;
    height: 223px;
    box-sizing: border-box;
}
.formation_status_move_btn{
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    top: 42px;
    left: 280px;
}
.formation_status_inner{
    width: 96%;
    margin: auto;
    padding-bottom: 0;
    margin-bottom: 0;
}
.formation_status_inner_box{
    width: 96%;
    margin: auto;
    position: relative;
    top: 70px;
    padding: 12px 0;
}
.formation_status_inner_box .liner{
    width: 96%;
    height: 1px;
    background-color: #DAD8D8;
    display: block;
    margin: auto;
}
.formation_status_inner_box .liner.second{
    position: relative;
    top: 30px;
}
.formation_status_inner_box li{
    list-style: none;
    line-height: 44px;
    clear: both;
}
.formation_status_inner_box a{
    color: #333333;
    text-decoration: none;
}
.formation_status_inner_box_txt{
    display: inline-block;
    float: left;
    text-indent: -1.2em;
}
.formation_status_inner_box_data{
    display: inline-block;
    float: right;
    font-size: 15px;
    font-family: OpenSans;
    color: #707070;
    padding-right: 10px;
}

/* index footer css */
footer{
    width: 100%;
    height: 398px;
    background-color: #F4F4F4;
    box-sizing: border-box;
}
.footer{
    width: 90%;
    margin: auto;
}
.footer_top{
    padding: 20px 0;
    border-bottom: 1px solid #DAD8D8;
}
.footer_top>span{
    display: block;
    text-align: center;
}
.footer_top_phone{
    font-size: 18px;
}
.footer_top_hour{
    font-size: 15px;
    color: #707070;
    padding-top: 6px;
    letter-spacing: -1px;
}
.footer_bottom{
    padding-top: 20px;
}
.footer_bottom_company{
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -1px;
}
.footer_bottom_company a{
    display: inline-block;
}

/* side nav */
.sidenav{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 112px;
    right: 0;
    background-color: #f4f4f4;
    overflow-x: hidden;
    transition: 0.3s;
    text-align: left;
}
.sidenav li{
    list-style: none;
}
.sidenav a{
    text-decoration: none;
    font-size: 16px;
    color: #333333;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover{
  color: #222222;
}
.sidenav .closebtn{
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.sidenav .main_menu{
    font-weight: bold;
    width: 30%;
    float: left;
    margin-left: 0;
    padding-left: 0;
    text-indent: 1.2em;
    line-height: 36px;
    color: #707070;
    padding-top: 40px;
}
.sidenav .main_menu_active{
    font-weight: bold;
    color: #6600FF;
    border-bottom: 2px solid #6600FF;
}
.sidenav .main_menu>li{
    width: 126%;
    padding-bottom: 40px;
    letter-spacing: -1px;
}
.sidenav .sub_menu{
    font-weight: 500;
    width: 62%;
    height: 100%;
    float: right;
    text-indent: 1.6em;
    margin-left: 0;
    padding-left: 0;
    background-color: #ffffff;
    padding-top: 94px;
}
.sidenav .sub_menu>li{
    padding-bottom: 20px;
    letter-spacing: -3px;
}
.sub_menu .sub_active>a{
    font-weight: bold;
    color: #6600FF;
}

@media screen and (min-width:375px){
    section{
        padding-top: 112px;
    }
    .carousel-control-prev-icon{
        bottom: 4%;
    }
    .carousel-control-next-icon{
        bottom: 4%;
    }
    .library_information_inner_box_txt>p{
        font-size: 16px;
    }
    .library_membership_inner_box>p{
        font-size: 14px;
    }

    .library_information_inner_href_icon01{
        left: 65%;
    }
    .library_information_inner_href_icon02{
        left: 60%;
    }
    .library_information_inner_href_icon03{
        left: 50.2%;
    }
    .carousel-item_pagenum{
        bottom: 15px;
    }
}
@media screen and (min-width:425px){
    .carousel-item>div{
        background-position-y: -60px;
    }
    
    .library_information_inner_href_icon01{
        left: 65%;
    }
    .library_information_inner_href_icon02{
        left: 60.6%;
    }
    .library_information_inner_href_icon03{
        left: 52.6%;
    }
    
    .library_membership_inner_box.m_inner_box01{
        background-position: 120px 150px;
    }
}
@media screen and (min-width:768px){
    .library_video_inner{
        width: 460px;
    }
    .library_status_inner{
        width: 560px;
    }
    .main_banner{
        height: 682px;
    }
    #carouselExampleControls .carousel-inner>div{
        height: 682px;
    }
    #carouselExampleControls .carousel-item>div{
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-y: -210px;
    }
    
    .library_information_inner_href_icon01{
        left: 79.9%;
    }
    .library_information_inner_href_icon02{
        left: 77.5%;
    }
    .library_information_inner_href_icon03{
        left: 72.8%;
    }
    
    .library_membership_inner_box.m_inner_box01{
        background-position: 250px 150px;
    }
}

/*  layerPopup */
.pop_wrap{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:500;display:none;background:rgba(0,0,0,0.8);overflow-y:auto;}
.pop_wrap > div{display:table;width:100%;height:100%;table-layout:fixed}
.pop_wrap > div > div{display:table-cell;width:100%;vertical-align:middle}
.pop_data{position:relative;margin:0 auto;padding:30px;width:1000px;height:600px;background:#fff;box-sizing:border-box;text-align:left;}
.pop_data>div{height:410px;}
.btn_pop_close{display:block;position:absolute;right:0;top:0;width:28px;height:28px;border-left:solid 1px #e5e5e5;border-bottom:solid 1px #e5e5e5;background:#fff;}
.btn_pop_close:after,
.btn_pop_close:before{content:"";position:absolute;left:50%;top:50%;width:1px;height:18px;margin-top:-9px;background:#666}
.btn_pop_close:after{-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg)}
.btn_pop_close:before{-ms-transform: rotate(-45deg);-webkit-transform: rotate(45deg);transform: rotate(-45deg)}

.youtube_layer{width:100%;padding-bottom:30px;float:none;}
.youtube_layer{position:relative;width:100%;height:0;padding-bottom:56.25%;}
.youtube_layer iframe{position:absolute;width:100%;height:100%;top:0;left:0;}

/* popup */
.popup_wrap .pop_alert{
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.layerpop_area{
    padding: 40px 0;
    height: auto;
    margin: auto;
    width: 88%;
    border-radius: 3%;
    background-color: #fff;
}
.layerpop_area .title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 0;
    letter-spacing: -1px;
}
.layerpop_close{
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 26px;
}
.layerpop_area .content{
    width: 100%;
    font-size: 18px;
    background-color: #fff; 
    padding: 8px; 
    width: 98%; 
    margin: auto;
}
.layerpop_area .content.gray_bg{
    background-color: #F4F4F4;
    width: 92%;
    padding: 30px 10px;
}
.layerpop_area .content.gray_bg.align_left{
    text-align: left;
}
.layerpop_area .content>img{
    width: 96%;
    margin-top: 20px;
}
.layerpop_area .chk_btn{
    border: 1px solid #6600FF;
    padding: 10px 40px;
    border-radius: 2px;
    font-weight: 500;
    color: #6600FF;
    text-decoration: none;
}
.layerpop_area .blank{
    width: 100%;
    height: 30px;
}
.library_video_inner_box_btn>img{
    padding-bottom: 3px;
}
.go_kakao{
    width: 100%;
    min-height: 600px;
}

.footer_bottom_company>a{
    text-decoration: none;
    color: #1e599a;
    font-weight: 600;
}
.footer_mid{
    width: 100%;
    margin-left: 0;
    padding-left: 0;
}
.footer_mid>ul{
    width: 100%;
    margin-left: 0;
    padding-left: 0;
}
.footer_mid>ul>li{
    width: 25%;
    text-align: center;
    float: left;
}
.footer_mid>ul>li>a{
    display: inline-block;
    color: #222;
    font-size: 13px;
    text-decoration: none;
    letter-spacing: -1px;
}
.footer_bottom{
    clear: both;
}
/* popup */
.term_layer .pop_data{position:relative;margin:0 auto;padding:30px;width:300px;height:auto;background:#fff;box-sizing:border-box;text-align:left;}
.term_layer .btn_pop_close{display:block;position:absolute;right:0;top:0;width:28px;height:28px;border-left:solid 1px #e5e5e5;border-bottom:solid 1px #e5e5e5;background:#fff;}
.term_layer .btn_pop_close:after,
.term_layer .btn_pop_close:before{content:"";position:absolute;left:50%;top:50%;width:1px;height:18px;margin-top:-9px;background:#666}
.term_layer .btn_pop_close:after{-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg)}
.term_layer .btn_pop_close:before{-ms-transform: rotate(-45deg);-webkit-transform: rotate(45deg);transform: rotate(-45deg)}
.term_layer h2{margin-bottom:10px;}
.term_con{height:300px;overflow-y: scroll;width:100%;background:#fbfbfb;padding:10px;}