@charset "utf-8";
html{height:100%;} 
body{min-width:320px;overflow-x:hidden;height:100%;} 


/*****************************/
/*  Section - Main content css*/
/*****************************/
#m_section{width:100%;height:auto;max-width:1240px;margin:0 auto;padding:12px 20px 0 20px;overflow:auto;} 
.all_sbox{background:#f2f2f2;padding:20px;margin:1% 0;position:relative;}
.all_sbox > h3{font-size:23px;color:transparent;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;}
#m_section > div.all_sbox + div.all_sbox{margin-left:2%;} 

/*더보기버튼*/
.all_sbox .more_bt{position:absolute;color:transparent;font-size:34px;}

/*더보기버튼 박스별 위치*/
.sbox2 .more_bt, .sbox3 .more_bt{top:-36px;right:0;} 
.sbox4 .more_bt{top:17px;right:20px;}


/************ Library Story box *************/
.sbox1{width:49%;height:240px;float:left}
.sbox1 > ul{padding-top:15px} 
.sbox1 > ul img{width:auto;height:auto;max-height:130px;max-width:100%;} 
.sbox1 .owl-carousel{height:auto;} 

/************* board box *************/
.sbox2{width:49%;height:240px;float:left;overflow:hidden;} 
/* Board Tab  */
.tabs{position:relative;overflow:hidden;width:100%;font-size:18px;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;}
/* Tab Title*/
.tabs nav > ul{position:relative;display:table;}
.tabs nav > ul > li{position:relative;;display:block;text-align:center;float:left}
.tabs nav > ul > li > a{position:relative;display:block;padding:6px 12px;margin-right:10px;background:#fff;color:#716495;transition:background-color 0.2s, color 0.2s;}
.tabs nav > ul > li > a:hover, .tabs nav > ul > li > a:focus{color:transparent;}
.tabs nav ul li.tab-current a{background:transparent;color:#fff !important;}
/* Tab Content */
.tabs_cont{position:relative;}
.tabs_cont section{display:none;	padding:17px 0 0 5px}
.tabs_cont section.content-current{display:block;}
.tabs_cont .board_tab{overflow:hidden;}
.tabs_cont .board_tab li{width:100%;margin-bottom:4px;font-size:14px;}
.tabs_cont .board_tab li a{color:#393939;}  
.tabs_cont .board_tab li a:hover{color:transparent;}  
.tabs_cont .board_tab li span.news_title{display:inline-block;width:calc(100% - 90px);font-size:14px;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;}
.tabs_cont .board_tab li span.news_title a{float:left;display:inline-block;width:auto;max-width:calc(100% - 40px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:5px;}
.tabs_cont .board_tab li span.news_title a:before{content:"\f027";font-family:'FontAwesome';color:transparent;opacity:0.7;}
.tabs_cont .board_tab li span.news_title span.m_new{display:inline-block;font-size:10px;padding:0px 5px;border-radius:30px;border:1px solid transparent;color:transparent; } 
.tabs_cont .board_tab li span.news_data{display:inline-block;font-size:12px;color:#758d9b;width:80px;vertical-align:middle;text-align:right;overflow:hidden;white-space:nowrap;}



/************* Book Story box *************/
.sbox3{width:34%;height:270px; float:left;position:relative;margin-bottom:0 !important;}
.bookstory_tab{width:90%;margin:0 auto;}
.owl-carousel a{text-align:center;}
.owl-carousel a > span{margin-top:5px;font-size:13px;display:inline-block;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.owl-carousel p > a > img{width:95px;height:125px;background:transparent;border:1px solid #ccc;} 
.owl-theme .owl-controls .owl-page span{background:transparent  !important;}

/************* holiday box *************/
.sbox4{width:28%;height:270px; float:left;position:relative;overflow:hidden;margin-bottom:0 !important;}  
.sbox4 .close_more{position:absolute;width:30px;height:30px;background:transparent;top:20px;right:22px;color:#fff;font-size:25px;line-height:30px;text-align:center;border-radius:50%;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;}
.sbox4 .close_more:hover{color:#fff;}/* 더보기 버튼 */
.sbox4 > div{width:100%;margin-top:15px;}
.sbox4 > div > h4{ padding:10px 0;background:#fff;font-size:15px;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;margin-bottom:20px;}
.sbox4 > div > h4 > span{background:transparent; color:#fff;padding:10px 12px;font-size:15px;margin-right:10px;}
.sbox4 > div > p{font-size:14px;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;line-height:20px;}
.sbox4 > div > .close_text1{color:#333;}
.sbox4 > div > .close_text2{color:#F63;padding-left:16px;}
.sbox4 > div > ul{margin-top:10px}
.sbox4 > div > ul > li{float:left;width:27px;height:27px; line-height:27px; background:transparent;color:#fff;font-size:15px;text-align:center;border-radius:50%;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;margin:3px;}
.sbox4 > div > ul > li > a{width:27px;height:27px; line-height:27px; background:transparent;color:#fff;font-size:15px;text-align:center;border-radius:50%;font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;margin:3px;}


/************* Quick box *************/
.sbox5{width:34%;height:270px; float:left;position:relative;margin-left:0 !important;margin-bottom:0 !important;}
.link_box{width:100%;margin-top:8px;}
.link_box li{width:25%;float:left;text-align:center; margin:8px 0 0 0;overflow:hidden}
.link_box li a span{display:inline-block;height:35px;width:100%;margin-top:3px;overflow:hidden}
.link_box li a{font-family:'Open Sans' , 'Nanum Gothic' , '나눔고딕';font-weight:600;font-size:13px;color:#716495;letter-spacing:-1px;display:inline-block;}
.link_box li a i{font-size:47px;}   
.link_box li a:hover{color:transparent;}

/*****************************/
/*  Rollring_Banner - Main bottom css */
/*****************************/
#rollring_banner{clear:both;width:100%;max-width:1240px;margin:0 auto;padding:20px 20px;}  
#rollring_banner ul li > a.thumbnail{margin-bottom:0;}
#rollring_banner ul li > a.thumbnail:hover{border-color:transparent}
#rollring_banner .owl-controls{display:none !important;}

@media (max-width:1200px){
/* Board Tab  */ 
.tabs{font-size:16px;} 
/* Tab Title*/
.tabs nav > ul > li > a{padding:6px 8px;margin-right:6px;} 
/*더보기버튼 박스별 위치*/
.sbox2 .more_bt, .sbox3 .more_bt{top:-35px;}   
}

@media (max-width:1069px){
/*****************************/
/*  Section - Main content css*/
/*****************************/
.all_sbox{padding:15px;}
.all_sbox > h3{font-size:20px;}

/*더보기버튼*/
.all_sbox .more_bt{font-size:30px;} 

/*더보기버튼 박스별 위치*/
.sbox2 .more_bt, .sbox3 .more_bt{top:-33px;right:0;} 
.sbox4 .more_bt{top:11px;right:20px;}   
 
/************ Library Story box *************/
.sbox1{width:100%;height:auto;}



/************* board box *************/ 
.sbox2{width:49%;height:235px;margin-left:0 !important;}
/* Board Tab  */
.tabs{font-size:15px;}

/* Tab Title*/
.tabs nav > ul > li > a{padding:7px 8px;margin-right:10px;}

/* Tab Content */
.tabs_cont section{	padding:17px 0 0 5px}
.tabs_cont .board_tab li{margin-bottom:7px;}
.tabs_cont .board_tab li span.news_title{width:100%;font-size:13px;} 
.tabs_cont .board_tab li span.news_data{display:none;}  


/************* Book Story box *************/
.sbox3{width:57%;height:240px;}
.owl-carousel p > a > img{width:80px;height:100px;}

/************* holidy box *************/
.sbox4{width:41%;height:240px;margin-left:0 !important;}
.sbox4 > div{margin-top:15px;}
.sbox4 > div > h4{padding:10px 0;font-size:15px;margin-bottom:20px;}
.sbox4 > div > h4 > span{padding:10px 12px;font-size:15px;margin-right:10px;}
.sbox4 > div > p{font-size:14px;line-height:20px;}
.sbox4 > div > .close_text2{padding-left:16px;}
.sbox4 > div > ul{margin-top:10px}
.sbox4 > div > ul > li{width:23px;height:23px; line-height:23px;font-size:13px;margin:3px;}


/************* Quick box *************/
.sbox5{width:49%;height:235px;margin-left:2% !important;margin-bottom:1% !important;}
.link_box{width:100%;height:90%;margin-top:8px;}
.link_box li{width:25%;float:left;text-align:center; margin:6px 0;} 
.link_box li a{font-size:12px;letter-spacing:-1px;}
.link_box li a i{font-size:42px;}
.link_box li a span{height:28px;}  
}


@media (max-width:960px){
/*****************************/
/*  Section - Main content css*/
/*****************************/
.all_sbox{padding:15px;}
.all_sbox > h3{font-size:20px;}

/*더보기버튼*/
.all_sbox .more_bt{font-size:30px;} 

/*더보기버튼 박스별 위치*/
.sbox2 .more_bt, .sbox3 .more_bt{top:-33px;right:0;} 
.sbox4 .more_bt{top:11px;right:20px;}   
 
/************ Library Story box *************/
.sbox1{width:100%;height:auto;}
.sbox1 > ul img{max-height:125px;}


/************* board box *************/ 
.sbox2{width:49%;height:235px;margin-left:0 !important;}
/* Board Tab  */
.tabs{font-size:15px;}

/* Tab Title*/
.tabs nav > ul > li > a{padding:7px 8px;margin-right:10px;}

/* Tab Content */
.tabs_cont section{	padding:17px 0 0 5px}
.tabs_cont .board_tab li{margin-bottom:7px;}



/************* Book Story box *************/
.sbox3{width:57%;height:240px;}
.owl-carousel p > a > img{width:80px;height:100px;}

/************* holidy box *************/
.sbox4{width:41%;height:240px;margin-left:0 !important;}
.sbox4 > div{margin-top:15px;}
.sbox4 > div > h4{padding:10px 0;font-size:15px;margin-bottom:20px;}
.sbox4 > div > h4 > span{padding:10px 12px;font-size:15px;margin-right:10px;}
.sbox4 > div > p{font-size:14px;line-height:20px;}
.sbox4 > div > .close_text2{padding-left:16px;}
.sbox4 > div > ul{margin-top:10px}
.sbox4 > div > ul > li{width:23px;height:23px; line-height:23px;font-size:13px;margin:3px;}


/************* Quick box *************/
.sbox5{width:49%;height:235px;margin-left:2% !important;margin-bottom:1% !important;}
.link_box{width:100%;height:90%;margin-top:8px;}
.link_box li{width:25%;float:left;text-align:center; margin:6px 0;} 
.link_box li a{font-size:12px;letter-spacing:-1px;}
.link_box li a i{font-size:42px;}
.link_box li a span{height:28px;}  


/*****************************/
/*  Rollring_Banner - Main bottom css*/
/*****************************/
#rollring_banner{clear:both;width:100%;margin:0 auto;padding:15px 20px;}
}
@media (max-width:767px){

/*****************************/
/*  Section - Main content css*/
/*****************************/
#m_section{padding:0 10px;}
#m_section > div.all_sbox + div.all_sbox{margin-left:0;}
.all_sbox{padding:15px;margin:3px 0px !important;width:100%;}
.all_sbox:first-child{margin-top:0 !important;}
.all_sbox > h3{font-size:18px;}

/*더보기버튼*/
.all_sbox .more_bt{font-size:28px;}

/*더보기버튼 박스별 위치*/
.sbox2 .more_bt, .sbox3 .more_bt{top:-30px;right:0;} 
.sbox4 .more_bt{top:11px;right:15px;} 

/************ Library Story box *************/
.sbox1{height:auto;padding-bottom:10px;}


/************* board box *************/
.sbox2{height:auto;}
/* Board Tab  */
.tabs{font-size:13px;} 
/* Tab Title*/
.tabs nav{margin:0;}
.tabs nav > ul > li > a{padding:6px 8px;margin-right:6px;} 

/* Tab Content */
.tabs_cont section{padding:12px 0 0 0;}
.tabs_cont .board_tab li{margin-bottom:2px;} 
.tabs_cont .board_tab li span.news_title{width:calc(100% - 80px);font-size:12px;} 
.tabs_cont .board_tab li span.news_data{display:inline-block;font-size:11px;width:75px;}
.news_more{position:absolute;width:24px;height:24px;top:-26px;right:2px;font-size:21px;line-height:24px;}



/************* Book Story box *************/
.sbox3{height:230px;margin-bottom:0px !important;}  
.owl-carousel p > a > img{width:80px;height:100px;}


/************* holidy box *************/
.sbox4{height:auto;}
.sbox4 .close_more{width:24px;height:24px;top:16px;right:16px; font-size:21px;line-height:24px;}
.sbox4 > div{margin-top:15px;}
.sbox4 > div > h4{padding:8px 0;font-size:14px;margin-bottom:10px;}
.sbox4 > div > h4 > span{padding:8px 10px;font-size:14px;margin-right:10px;}
.sbox4 > div > p{font-size:14px;line-height:20px;float:left;}
.sbox4 > div > .close_text2{padding-left:16px;}
.sbox4 > div > ul{padding-top:10px;clear:both;}
.sbox4 > div > ul > li{width:23px;height:23px; line-height:23px;font-size:13px;margin:3px;}


/************* Quick box *************/
.sbox5{height:auto;}
.link_box{margin-top:8px;}
.link_box li{width:12.5%;float:left;text-align:center; margin:12px 0 0 0;}
.link_box li a{font-size:11px;letter-spacing:-1px;}
.link_box li a i{font-size:35px;}
.link_box li a span{height:26px;}

/*****************************/
/*  Rollring_Banner - Main bottom css*/
/*****************************/
#rollring_banner{padding:8px 10px;} 
}

@media (max-width:639px){
/************* Book Story box *************/	
.owl-carousel a > span{font-size:10px;}	 
/************* holidy box *************/
.sbox4 > div > p{font-size:12px;}
	
/************* Quick box *************/
.link_box li{margin:8px 0 0 0;width:25%;} 
.link_box li a{font-size:10px;}
.link_box li a i{font-size:30px;}
.link_box li a span{height:22px;}

/* Tab Content */
.tabs_cont .board_tab li span.news_title{width:100%} 
.tabs_cont .board_tab li span.news_data{display:none;}
}