@charset "utf-8";

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css); 
@import url('https://hangeul.pstatic.net/hangeul_static/css/NanumYeBbeunMinGyeongCe.css');

.hanna { font-family: 'hanna'; } 
.nanum { font-family: 'Nanum Barun Gothic'; } 

.pdt0 {padding-top:0px !important;}

/* 모바일 영역 */
.m_box {position:fixed; top:0; right:-500px; width:500px; height:100%; background-color:#fff; /*overflow-y:auto;*/ z-index:999; transition:all .5s;}
.m_box.on {right:0;}
.m_box .m_box_scroll {max-height:700px; overflow-y:auto;}
.m_box .m_top {display:flex; align-items:center; justify-content:space-between; padding:15px 15px; background-image: linear-gradient(135deg, #02a1f9, #29f19c);}
.m_box .m_top .m_logo {width:150px;}
.m_box .m_top .m_logo > a {display:block;}
.m_box .m_top .m_logo > a > img {width:100%;}
.m_box .m_top .m_close {width:30px;}

.m_box ul.m_list > li {text-indent:20px; border-bottom:1px solid #d0d0d0;}
.m_box ul.m_list > li > a {position:relative; display:block; height:60px; line-height:60px; font-weight:600; font-size:1.25rem; font-family:"ChosunLo";}
.m_box ul.m_list > li > a:after {content:""; display:block; width:15px; height:12px;  background:url("../../images/m_arrow_down.png") no-repeat center/100%; position: absolute; z-index: 99999; top:50%; transform:translateY(-50%); right:15px;}
.m_box ul.m_list > li > a.fontbg:after {content:""; display:block; width:15px; height:12px; background:url("../../images/m_arrow_up.png") no-repeat center/100%;  position: absolute; z-index: 99999; transform:translateY(-50%); right:15px;}
.m_box ul.m_list > li > ul.m_sub {position:relative;  display:none;}
.m_box ul.m_list > li > ul.m_sub > li {border-bottom:1px solid #d0d0d0;}
.m_box ul.m_list > li > ul.m_sub > li:first-child {border-top:1px solid #d0d0d0;}
.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; width:100%; height:50px; background:#efefef; line-height:50px; color:#333; font-size:1.125rem; font-weight:500;}
.m_box ul.m_list > li > ul.m_sub > li:last-child > a {border-bottom:none;}
.m_box ul.m_list > li > ul.m_sub > li > a.bold {font-weight:600; background-color:#efefef; border-bottom:1px solid #d0d0d0;}

.m_box ul.m_list .m_s_sub {position:relative; float:right; display:none;  width:50%; right:0; top:-50px; background-color:#fff;  z-index:33;}
.m_box ul.m_list .m_s_sub > li {border-left:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb; box-sizing:border-box; background:#efefef;}
.m_box ul.m_list .m_s_sub > li > a {display:block; height:50px; line-height:50px; font-size:1.125rem; font-weight:500;}
.m_box ul.m_list .m_s_sub > li > a > span {color:#999;}
.m_box ul.m_list .m_s_sub > li > a.color {color:#005ac7;}
.m_box ul.m_list .m_s_sub:after {position:absolute; right:0px; content:""; display:block; width:100%; height:100%; background:#efefef; bottom:-50px; z-index:-1; border-left:1px solid #cbcbcb; box-sizing:border-box;}

.m_box_footer {position:absolute; width:100%; left:0px; bottom:0px; background-color:#dbdbdb; padding:15px 15px; }
.m_box_footer > p {margin-bottom:10px; font-size:1rem;}



.m_bg {position:fixed; top:0; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,.7); display:none; z-index:999;}


@media screen and (max-width:600px){

    .m_box {width:100%; right:-100%;}

}
@media screen and (max-width:500px){
    .m_box ul.m_list > li > a {height:55px; line-height:55px;}
    .m_box ul.m_list > li > ul.m_sub > li > a {font-size:1.0625rem;}
    .m_box ul.m_list .m_s_sub > li > a {font-size:1.0625rem;}
    .m_box .m_top .m_logo {width:130px;}
    .m_box .m_top .m_close {width:25px;}

    .m_box_footer > p {font-size:0.9375rem;}
    .m_box_footer .number > li {font-size:0.9375rem;}


}




#wrap {height:100%;}

@media screen and (max-width:1024px){
    #wrap {height:auto;}
}


/* 해더 영역 */
#header {position:fixed; width:100%; background:url("../../images/h_bg.jpg")no-repeat center/cover; z-index:9;}
#header .h_center {display:flex; align-items:center; justify-content:space-between; padding:20px 50px;}
#header .m_btn {display:none;}

#header .serch_wrap {width:540px; padding:15px; background-color:rgba(255,255,255,.5); border-radius:5px; box-sizing:border-box;}
#header .search_top {display:flex; justify-content:space-between; align-items:center; height:35px; margin-bottom:10px;}
#header .search_top > li { height:100%; color:#fff; background:#0386de; border-radius:5px; box-sizing:border-box;}
#header .search_top > li {display:flex; align-items:center; width:100%; padding-left:15px;}
#header .search_top > li > b {display:inline-block; margin-right:15px; font-weight:550;}

#header .search_top  .shop_box > li {float:left; font-size:0.875rem; margin-right:10px;}
#header .search_top  .shop_box > li:last-child {margin-right:0px;}

#header .search_bot {display:flex; justify-content: space-between; height:40px;}
#header .search_bot > div {height:100%;}
#header .search_bot .all_cate {width:39%;}
#header .search_bot .search_box_wrap {width:59%; border-radius:5px; background:#fff; overflow:hidden;}
#header .search_bot .select {width:100% !important; height:100% !important; padding-left:20px; font-size:1rem; color:#000 !important; font-weight:550; border-radius: 5px; appearance:none; background:#fff url("../../images/select_down_arrow.png") no-repeat right 18px center; border:none; font-family:"Noto Sans KR"; cursor:pointer;}

#header .h_text {font-size:15px; color:#000000; padding-top:20px;font-weight:bold; font-family: 'Noto Sans KR', sans-serif;/*'Nanum Barun Gothic';*/}
#htext2 { display:none;}
@media screen and (max-width:1300px){
    #header .h_logo {width:230px;}
	

}


@media screen and (max-width:1250px){
    #header .h_center {padding:20px 20px;}
}
@media screen and (max-width:1200px){
    #header .h_logo {width:200px;}
	/*#header .h_text {font-size:14px;}*/

}
@media screen and (max-width:1080px){
    #header .h_logo {width:180px;}
    #header .h_logo > a > img {width:100%;}
    #header .search_top > li:nth-child(1) {font-size:0.8125rem;}
    #header .search_top > li:nth-child(2) > b {font-size:0.875rem;}
    #header .search_top .shop_box > li {font-size:0.8125rem;}
    #header .search_bot .select {font-size:0.9375rem;}
	#header .h_text { padding-top:0px;padding-bottom:20px;}
}
@media screen and (max-width:1024px){
    #header {position:fixed; top:0px; left:0px; width:100%;}
    #header .h_center {display:block;}
    #header .m_btn {display:block;}
    #header .m_btn > img {width:30px;}
    #header .search_top {display: none;}
    #header .h_logo_box {display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
    #header .serch_wrap {width:100%;}

    #header .search_top {height:auto;}
    #header .search_top > li:nth-child(1) {width:100%; padding:10px 5px; font-size:1rem;}
    #header .search_top > li:nth-child(2) {display:none;}
    #header .search_bot .select {font-size:1rem;}

	#htext2 { display:block;}
	#htext1 { display:none;}

}
@media screen and (max-width:768px){
    #header .h_logo {width:170px;}
    #header .m_btn > img {width:28px;}
}
@media screen and (max-width:700px){
    #header .search_bot {display:block; height:auto;}
    #header .search_bot:after {content:""; display:block; clear:both;}
    #header .search_bot > div {float:left; height:45px;}
    #header .search_bot .select {font-weight:500;}
    #header .search_bot .all_cate {width:100%;  margin-bottom:10px;}
    #header .search_bot .search_box_wrap {width:100%;}
   
}
@media screen and (max-width:600px){
	#htext2 { display:block;}
	#htext1 { display:none;}
}
@media screen and (max-width:500px){
    #header .h_center {padding:15px;}
    #header .h_logo {width:160px;}
    #header .search_top > li:nth-child(1) {padding:8px 5px;}
    
}
@media screen and (max-width:400px){
    #header .serch_wrap {padding:10px;}
    #header .search_top > li:nth-child(1) {font-size:0.9375rem;}
    #header .search_bot .select {padding-left:15px; font-size:0.9375rem;}
    #header .h_search_box input.tinp {text-indent:15px; font-size:0.9375rem;}
    #header .h_search_box input.tinp::placeholder {font-size:0.9375rem;}
}





#header .h_search_box {height:100%;}
#header .h_search_box .search_form {height:100%;}
#header .h_search_box #searchForm {height:100%;}
#header .h_search_box fieldset {display:flex; justify-content:end; align-items: center; height:100%;}
#header .h_search_box .blind {position:absolute; top:-1000px; visibility:hidden;}
#header .h_search_box input.tinp {width:100%; height:100%; overflow:hidden; border:none; text-indent:20px; color:#000 !important; font-weight:500;}
#header .h_search_box input.tinp::placeholder {color:#bdbdbd; font-size:1rem; text-indent:15px;}
#header .h_search_box button.search_btn {width:55px; min-width:25px; height:100%; color:#fff; font-size:0px; border:0; border-radius:15px; background:url("../../images/h_search_btn.png") no-repeat center; /*  white-space:nowrap; -webkit-border-radius:0; -webkit-appearance:none;*/ cursor:pointer;}

.left_bar {position:fixed; top:0px; left:0px; width:260px; height:100%; background:#f9f9f9; z-index:2;}
.left_gnb {padding:225px 0px 0px 50px;}
.left_gnb > li {position:relative;}
.left_gnb > li:last-child {margin-bottom:0px;}
.left_gnb > li > a {position:relative; display:block; width:230px; margin-bottom:30px; padding-left:20px; font-size:1.375rem; font-family:"ChosunLo"; box-sizing:border-box; color:#777;}
.left_gnb > li > a.color {position:relative; color:#000;}
.left_gnb > li > a.color:after {content:""; display:block; width:4px; height:18px; background:#00b273; border-radius:50pt; position:absolute; top:7px; left:0px;}

.left_gnb > li .l_sub_gnb2 {display:none; position:absolute; top:0; right:-20px; background-color:#ecf2f0; padding:15px 0px; z-index:8;}
.left_gnb > li .l_sub_gnb2 > li {margin-bottom:15px;}
.left_gnb > li .l_sub_gnb2 > li:last-child {margin-bottom:0px;}
.left_gnb > li .l_sub_gnb2 > li > a {color:#333; font-weight:500;}


.left_gnb > li .l_sub_gnb2 > li > a {position:relative; padding:0px 25px;}
.left_gnb > li .l_sub_gnb2 > li > a.font {color:#000; font-weight:550;}
.left_gnb > li .l_sub_gnb2 > li > a.font:after {content:""; display:block; width:9px; height:10px; background:url("../../images/l_gnb_arrow02.png") no-repeat; position:absolute; top:50%; transform:translateY(-50%); left:0px;}


.footer {position:absolute; bottom:14px; left:20px;}
.footer small {display:block; font-size:0.75rem;}

.m_footer  {display:none;}


@media screen and (max-width:1024px){
    .m_footer {position:static; display:flex; flex-direction:column-reverse; align-items:center; justify-content:center; padding:25px 20px; background:#f4f4f4;}
    .m_footer small {margin-bottom:10px; font-size:1rem;}
    .m_footer small br {display:none; }
    .m_footer .f_number {margin-bottom:0px;}
    .m_footer .f_number > li {float:left; margin-right:15px;}
    .m_footer .f_number > li:last-child {margin-right:0px;}
    .m_footer .f_number > li > p {font-size:1rem;}
}
@media screen and (max-width:768px){
    .m_footer {padding:20px 20px;}
    .m_footer small {margin-bottom:5px; font-size:0.9375rem;}
    .m_footer .f_number > li > p {font-size:0.9375rem; font-weight:normal;}

   
}

@media screen and (max-width:500px){
    .m_footer {padding:15px;}
    .m_footer small {display:block; font-size:0.875rem; text-align:center; word-break:keep-all;}
    .m_footer .f_number > li > p {font-size:0.875rem;}
    .footer .f_number > li > span {width:27px; height:27px;}

   
}



#main_wrap {height:100%; padding-left:350px;}
#main {position:relative; /*height:100%;*/ /*overflow-y:auto;*/ padding-top:205px;}
#main .right_conts {width:100%; padding-right:50px;}
#main .right_content {padding:0px 0px 250px;}
#main .e_book_list {display:flex; flex-wrap:wrap;}
#main .e_book_list > li {display:flex; flex-direction:column; flex:none; flex-basis:16.8%; margin-right:4%; margin-bottom:45px;}
#main .e_book_list > li:nth-child(5n) {margin-right:0px;}
#main .e_book_list > li .e_img {position:relative; border:1px solid #cecece;}
#main .e_book_list > li .e_img > img {width:100%;}
#main .e_book_list > li .e_s_text {display:block; margin-top:15px; text-align:center; font-size:0.9375rem;}
#main .e_book_list > li .e_text {text-align:center; font-weight:600; color:#009256; font-size:1.25rem;}


@media screen and (max-width:1500px){

    #main_wrap {padding-left:310px;}


    #main .e_book_list > li {flex-basis:17.6%; margin-right:3%;}
 
}
@media screen and (max-width:1300px){
    #main .e_book_list > li {flex-basis:22.75%;}

    #main .e_book_list > li:nth-child(5n) {margin-right:3%;}
    #main .e_book_list > li:nth-child(4n) {margin-right:0px;}

}


@media screen and (max-width:1250px){
    /* #main .right_conts {padding: 40px 30px 0px 290px;} */
    #main_wrap {padding-left:290px;}

    #main .right_conts {padding-right:30px;}

}

@media screen and (max-width:1024px){
    .left_bar {display:none;}
    /* #main .right_conts {padding:286.5px 25px 0px;} */

    #main_wrap {padding-left:0px; height:auto; overflow-y:initial;}
    #main {padding-top:0px;}

    #main .right_conts {padding:213.48px 25px 0px;}


    #main .right_content {padding:0px;}

    
}

@media screen and (max-width:768px){
    
    #main .e_book_list > li {flex-basis:31.333333%; margin-bottom:40px;}

    #main .e_book_list > li:nth-child(4n) {margin-right:3%;} 
    #main .e_book_list > li:nth-child(3n) {margin-right:0px;} 

    #main .right_conts {padding:201.63px 25px 0px;}

  
}

@media screen and (max-width:700px){
    #main .right_conts {padding:261.63px 20px 0px;}
}




@media screen and (max-width:600px){
    #main .e_book_list > li .e_text {font-size:0.9375rem;}
    #main .e_book_list > li {flex-basis:48.5%; margin-bottom:35px;}


    #main .e_book_list > li:nth-child(3n) {margin-right:3%;} 
    #main .e_book_list > li:nth-child(2n) {margin-right:0px;} 
}
@media screen and (max-width:500px){
    #main .right_conts {padding:229.77px 15px 0px;}

 

}
@media screen and (max-width:400px){
  



}
@media screen and (max-width:38px){
 

}

@media screen and (max-width:360px){

}


