@charset "utf-8";
/* 해더 반응형 작업 */


/* 모바일 박스 */
.m_box {position:fixed; top:0; left:-350px; width:350px; height:100%; background-color:#fff; /*overflow-y: scroll;*/ overflow-y:auto; z-index:999; transition:all .5s;z-index: 999999;}
.m_box.on {left:0;}
.m_box .m_height {max-height:500px; overflow-y:scroll;}
.m_box .m_line {margin-bottom:30px;}

.m_box div.m_top {padding:10px 20px; border-bottom:1px solid #ccc; background-color: #222;}
.m_box div.m_top:after {content:""; display:block; clear:both;}
.m_box div.m_top > a.home_btn {display:inline-block; color:#fff; font-size:18px;}
.m_box div.m_top > a.home_btn > i {margin-right:5px;}
.m_box div.m_top > a.m_close {float:right;}
.m_box div.m_top > a.m_close > i {font-size:25px; color:#fff;}
.m_box ul.m_list > li {text-indent:20px; line-height:50px; border-bottom:1px solid #ccc;}
.m_box ul.m_list > li > a {position:relative; display:block; font-weight:500; font-size:17px;}
/* .m_box > ul.m_list > li > a:after {content:"\f078"; font-size: 13px; color: silver; font-family: FontAwesome; position: absolute; z-index: 99999; top:0px; right:15px;}
.m_box > ul.m_list > li > a.fontbg:after {content:"\f077"; font-size: 13px; color: silver; font-family: FontAwesome; position: absolute; z-index: 99999; top:0px; right:15px;} */
.m_box ul.m_list > li > ul.m_sub {background-color:#efefef; display:none;}
.m_box ul.m_list > li > ul.m_sub > li {border-bottom:1px solid #e5e5e5;}
.m_box ul.m_list > li > ul.m_sub > li:last-child {border-bottom:none;}
.m_box ul.m_list > li > ul.m_sub > li > a {display:block; color:#666; font-size:16px; font-weight:500;}

a.m_btn {display:none;}


.m_box .m_bottom {position:absolute; bottom:0px; width:100%; text-align:center; background-color:#e9e9e9; padding:15px 15px 5px;}
.m_box .btn_login {display:block; font-size:medium; padding:7px; width:100%; font-weight:700; letter-spacing:1px; margin-bottom:10px; border-radius:50px; -webkit-border-radius:50px; background: #c51917;color: #fff;}

.m_box .sns_icon  {margin-bottom:10px;}
.m_box .sns_icon > li {width:40px; height:40px; display:inline-block; margin:0px 5px;}
.m_box .sns_icon > li > a {display:block; height:100%;}
.m_box .sns_icon > li:nth-child(1) > a {background:url("https://edu.chosun.com/images/main/re_sns01.png") no-repeat center/40px auto;}
.m_box .sns_icon > li:nth-child(2) > a {background:url("https://edu.chosun.com/images/main/re_sns02.png") no-repeat center/40px auto;}
.m_box .sns_icon > li:nth-child(3) > a {background:url("https://edu.chosun.com/images/main/re_sns03.png") no-repeat center/40px auto;}
.m_box .sns_icon > li:nth-child(4) > a {background:url("https://edu.chosun.com/images/main/re_sns04.png") no-repeat center/40px auto;}
.m_box .m_bottom small {color:#666; font-size: 13px;}



.m_box  ul.m_family_wrap > li {text-indent:20px; line-height:50px;}
.m_box  ul.m_family_wrap > li > a {position:relative; display:block; font-weight:500; font-size:17px; color:#fff; background-color:#222;}
/* .m_box  ul.m_family_wrap > li > a:after {content:"\f078"; font-size: 13px; color: silver; font-family: FontAwesome; position: absolute; z-index: 99999; top:0px; right:15px;}
.m_box  ul.m_family_wrap > li > a.fontbg:after {content:"\f077"; font-size: 13px; color: silver; font-family: FontAwesome; position: absolute; z-index: 99999; top:0px; right:15px;} */

.m_box .m_family_t:after {content:""; display:block; clear:both;}
.m_box .m_family_t {box-sizing:border-box; padding:15px 15px 0px;}
.m_box .m_family_t > li {float:left; width:50%; margin-bottom:10px;}
.m_box .m_family_t > li:nth-child(1) > a > div {background:url("https://art.chosun.com/dhtm/images/logo_artchosun.svg") no-repeat center;}
.m_box .m_family_t > li:nth-child(2) > a > div {background:url("https://edu.chosun.com/images/main/re_f_icon02.png") no-repeat center/40px auto;}
.m_box .m_family_t > li:nth-child(2) > a > p {position:relative;}
.m_box .m_family_t > li:nth-child(2) > a > p:after {content:"\f078"; font-size: 13px; color: silver; font-family: FontAwesome; position: absolute; z-index: 99999; top:0px; right:-20px;}



.m_box .m_family_t > li > a { display:flex; align-items:center;}
.m_box .m_family_t > li > a > div.m_icon {width:40px; height:40px; /*margin-right:10px;*/}


.m_box .m_family {box-sizing:border-box; padding:0px 15px 15px; display:block; border-bottom:1px solid #222;} 
.m_box .m_family:after {content:""; display:block; clear:both;}
.m_box .m_family > li {float:left; width:50%; margin-bottom:10px;}
.m_box .m_family > li > a { display:flex; align-items:center;}
.m_box .m_family > li > a > div.m_icon {width:40px; height:40px; background-color:rebeccapurple;/* margin-right:10px;*/}
/* .m_box .m_family > li:nth-child(1) > a > div {background:url("https://art.chosun.com/dhtm/images/logo_artchosun.svg") no-repeat center;}
.m_box .m_family > li:nth-child(2) > a > div {background:url("https://edu.chosun.com/images/main/re_f_icon02.png") no-repeat center/40px auto;} */
.m_box .m_family > li:nth-child(1) > a > div {background:url("https://edu.chosun.com/images/main/re_f_icon03.png") no-repeat center/40px auto;}
.m_box .m_family > li:nth-child(2) > a > div {background:url("https://edu.chosun.com/images/main/re_f_icon04.png") no-repeat center/40px auto;}
.m_box .m_family > li:nth-child(3) > a > div {background:url("https://edu.chosun.com/images/main/re_f_icon05.png") no-repeat center/40px auto;}
.m_box .m_family > li:nth-child(4) > a > div {background:url("https://edu.chosun.com/images/main/re_f_icon06.png") no-repeat center/40px auto;}
.m_box .m_family > li:nth-child(5) > a > div {background:url("https://edu.chosun.com/learning/img/logo_top.png") no-repeat center/35px auto;}








@media screen and (max-width:1300px){
    img {max-width:100%;/* width:100%;*/}
    /* 전체 영역 */
    body {min-width:100%;}
    
    /* 해더 영역 */
    #top_section {display:none;}
    .inner {width:100% !important;}


    a.m_btn {display:block; position:absolute; left:10px; top:50%; transform: translateY(-50%);}
    a.m_btn > i {font-size:30px;}
    
    #header {position:relative; padding:40px 0px; width:97% !important; }
    #header > section {display:block;}
    #header > section > div {display:block;}
    #header > section > div.logoBox {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    #header > section > div.leftBox {display:none;}
    #header > section > div.rightBox .sns {display:none;}
    
    .sb-search {float:none; position:absolute; right:0; transform:translateY(-50%); top:50%; min-height:35px; height:35px; min-width:35px;}
    .sb-search-input {padding:0px; text-indent:20px;}
    .sb-icon-search { display:inline-block; width:35px; height:35px; line-height:35px; right:0; top:0;}
   
    
    #nav ul {display:flex;  justify-content:space-evenly;  }
    /* #nav ul {display:block;} */
    /* #nav ul:after {content:""; display:block; clear:both;}
    #nav ul li {float:left; display:block; width:16.666666%;} */
    #nav ul li:nth-child(1)::before {display:none;}
    #nav ul li:nth-child(6)::after {display:none;}
    
    
    }
    
    @media screen and (max-width:900px){
        /* 해더 영역 */
        #header {padding:35px 0px;}
    
        #header > section > div.logoBox {width:140px;}
        #header > section > div.logoBox > a {display:block;}
        #header > section > div.logoBox > a > img {width:100%;}
    
        #nav ul li a {/* padding:10px 0px;*/ font-size:18px; min-width: inherit;}
    }
    
    @media screen and (max-width:700px){
    
        /* 해더 영역 */
        #header > section > div.logoBox {width:120px;}
    
        #nav {overflow-x: auto; -ms-overflow-style: none;}
        #nav::-webkit-scrollbar {display: none;}
        #nav ul {display:flex; justify-content:start;   
            /* -webkit-box-pack: start;
            -moz-box-justify-content: flex-start;
            -ms-flex-pack: start;  */
            min-width:550px; overflow: hidden; width: 100%;}
        #nav ul li {width:auto; margin:0px 14px;}
        #nav ul li:before {display:none;}
        #nav ul li a {/*padding:8px 0px;*/ font-size:17px; min-width: max-content;}
        /* #nav ul li a:after {content: ""; display:inline-block; width:1px; height:13px; background-color:rgba(0, 0, 0, 0.25); margin:0px 10px;} */
        #nav ul li:last-child > a:after {display:none;}
    }
    
    @media screen and (max-width:600px){
        /* 해더 영역 */

        #nav ul li a {font-size:16px; height:38px; min-height: 38px; max-height:38px;}
        /* #nav ul {justify-content: space-evenly;} */
        #header > section > div.logoBox {width:110px;}
        #header {padding:30px 0px;}
    
    }